Have a fairly simple menu bar (with hover drop downs) that works fine. See Code below.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
margin: 0px;
}
.text-outline {
color: #ffffff;
font-size: larger;
text-shadow: -1px -1px 0 #663333, 1px -1px 0 #663333, -1px 1px 0 #663333, 1px 1px 0 #663333;
}
#div_menu_main {
position: absolute;
left:0px;
top:135px;
width:1200px;
overflow: visible;
height:26px;
background-color: #996633;
z-index:-1;
}
.navbar {
position: absolute;
left:0px;
top:135px;
width:1200px;
overflow: visible;
height:26px;
z-index:10;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
font-weight: bold;
text-align: center;
padding: 4px 10px;
text-decoration: none;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #663333;
}
/*
#div_menu_main_overlay {
position: absolute;
left:0px;
top:135px;
width:1200px;
overflow: visible;
height:26px;
z-index:10;
}
#div_menu_main_overlay a {
float: left;
font-size: 16px;
color: white;
font-weight: bold;
text-align: center;
padding: 4px 10px;
text-decoration: none;
}
#div_menu_main_overlay a:hover, .dropdown:hover .dropbtn {
background-color: #663333;
}
*/
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border:none;
outline: none;
color: white;
font-weight: bold;
padding: 4px 10px;
background-color: inherit;
font-family: inherit;
margin-left:5px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #996633;
min-width: 130px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-left:5px;
}
.dropdown-content a {
float: none;
color: white;
padding: 4px 10px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #663333;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<title>Untitled</title>
</head>
<body>
<div id="div_menu_main"></div>
<div class="navbar text-outline"><!--textonly-->
<!--<div id="div_menu_main_overlay" class="text-outline"><!--textonly-->
HOME
CREATE POST
<div class="dropdown"><button class="dropbtn text-outline">REVISE POST<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
LOST PASSWORD
REVISE POST
REVISE POST2
REVISE POST3
</div>
</div>
SEARCH
<div class="dropdown">
<button class="dropbtn text-outline">DONATIONS<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
DONATORS
</div>
</div>
<div class="dropdown">
<button class="dropbtn text-outline">HELP<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
FAQs
GUIDELINES
LOST PASSWORD
</div>
</div>
NEWS
<div class="dropdown">
<button class="dropbtn text-outline">ABOUT<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
FRIENDS
SITE TRAFFIC
ADVERTISING
WHY?
ABOUT
CONTACT MIA
</div>
</div>
</div>
</body>
</html>
Normally one div would be used for the background and the menu items, however, I have to weave around some graphics so the "menu bar" is in the < div id="div_menu_main" > and the menu items and dropdowns are in the < div class="navbar text-outline" >. All works fine ... dropdowns behave as expected, ie stacked.
However, am integrating this into a larger project where there is already an extensively used "navbar" class, and given there is only one main menu, decided to use < div id=div_menu_main_overlay class="text-outline" > ...basically changing class=navbar for id=div_menu_main_overlay. Converted the .navbar references over to #div_menu_main_overlay ... and then it happens. NOTE: For ease I have both flavors of CSS code in the example, just commenting out the version not being tested.
The unexpected behavior is the dropdown content are now acting as if the anchor element is float: left; vs none;. Played around with several possibilities and even though all I have to do is change the class name to something over than .navbar, this subtlety has piqued my interest on what is the problem.
Related
I have a site I'm building which has a few dropdown menus. I'm sure this isn't being done in the most efficient way, but I'm curious why this is happening. I have the exact same CSS code for these dropdowns but one of them is nested under the main navigation and the other one is under a mobile menu (so like everything would be one under button).
The code works somewhat because when I've changed the display to be anything but none, the styling works fine and everything.. but for some reason, I just can't find out why the mobile menu dropdown isn't working but the main navbar one is.
Here's the code for the main nav bar dropdown:
#menu .dropdown {
top: -1px;
position: relative;
display: inline-block;
z-index: 9999;
margin-left: -6px;
margin-right: -7px;
}
#menu .dropbtn {
background-color: transparent;
color: white;
border: none;
font-family: 'chivolight';
font-size: 1em;
font-weight: 600;
letter-spacing: 1px;
}
#menu .dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 10em;
box-shadow: relative rgba(0, 0, 0, 0.2);
margin-top: -0.2em;
margin-left: 0.35em;
top: 2.8em;
z-index: 99;
}
#menu .dropdown-content a {
background: white;
padding: 0.4em 1em;
text-decoration: none;
display: block;
}
#menu .dropdown-content a:hover {
background-color: #ddd;
}
#menu .dropdown:hover .dropdown-content {
display: block;
}
#menu .dropdown:hover .dropbtn {
background-color: transparent;
}
```
<div id="menu" class="chivolight">
<ul>
<li>
<div class="dropdown">
<button class="dropbtn">About Us</button>
<div class="dropdown-content">
Capabilties
Certifications
History
Quality
</div>
</div>
</li>
</ul>
</div>
And the code for the mobile menu dropdown:
#menuicon .icon-dropbtn {
background-color: white;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
#menuicon .icon-dropdown {
position: relative;
display: inline-block;
}
#menuicon .icon-dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right: 0;
}
#menuicon .icon-dropbtn:hover {
opacity: 0.8;
transition: 0.3s;
}
#menuicon .icon-dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#menuicon .icon-dropdown-content a:hover {
background-color: #f1f1f1
}
#menuicon .icon-dropbtn:hover .icon-dropdown-content {
display: block;
}
#menuicon .icon-dropdown:hover .icon-dropbtn {
background-color: #3e8e41;
}
<div id="menuicon">
<div class="icon-dropdown">
<button class="icon-dropbtn" style="font-size: 0.8em;"><font color=black><i class="fa fa-bars"></i></font></button>
<div class="icon-dropdown-content">
Link 1
Link 1
Link 1
</div>
</div>
</div>
You have a misnamed hover selector in the mobile css:
#menuicon .icon-dropbtn:hover .icon-dropdown-content {
display: block;
}
should read:
#menuicon .icon-dropdown:hover .icon-dropdown-content {
display: block;
}
Select the mobile display classes:
#menuicon .icon-dropdown .icon-dropbtn{
//CSS for mobile display
}
or
Add same class to both buttons:
Like
Main:
<div id="menu" class="chivolight">
<ul>
<li>
<div class="dropdown">
<button class="dropbtn someclass">About Us</button>
<div class="dropdown-content">
Capabilties
Certifications
History
Quality
</div>
</div>
</li>
</ul>
</div>
Mobile:
<div id="menuicon">
<div class="icon-dropdown">
<button class="icon-dropbtn someclass" style="font-size: 0.8em;"><font
color=black>
<i class="fa fa-bars"></i></font></button>
<div class="icon-dropdown-content">
Link 1
Link 1
Link 1
</div>
</div>
</div>
Now use CSS for the given class:
.someclass{
//Now both buttons have same class
//Add CSS
}
I need to create menu like shown in this screenshot:
So as you can, the cursor hover opens large sub menu with two sub sections. Will be glad for any similar examples to my issues. Thanks for your answers!
Here is a very simple example to get you started. It needs more styling of course and more content, but this should give you all the tools to have a dropdown on hover in your menu
HTML:
<header>
<a href="/url">
Hover to see dropdown
</a>
<div>
<section></section>
<section></section>
</div>
</header>
CSS:
header {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 50px;
}
header > a {
padding: 0 2em;
height: 50px;
display: grid;
place-content: center;
}
header > div {
display: hidden;
background-color: white;
}
a:hover + div {
display: inherit;
}
Something like this should work. It utilizes the :hover attribute in the navbar tab 'Dropdown' to reveal more content (in this case it'll be just some links).
HTML:
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
CSS:
.navbar {
overflow: hidden;
background-color: #333;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
You can find more information on the W3School website for more!
I am trying to design a search bar with an autocomplete dropdown like Google's. However, the dropdown does not come up as wide as the search bar
IT WORKS ON MICROSOFT EDGE BUT NOT ON GOOGLE CHROME
I have tried changing the width to auto and device-width but I see no change in autocomplete dropdown's width
.input-group-btn{
width:auto;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name = "viewport" content = "width=device-width, inital-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
body{
background:#202a3f;
}
.container{
margin-top:200px;
}
.glyphicon-search{
font-size:20px;
}
.btn-default{
background: orange;
width:100px;
padding:12.5px;
}
.form-control{
padding:25px;
font-size:20px;
}
.input-group-btn{
width:auto;
}
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
}
</style>
</head>
<body>
<div class="navbar" >
<a href="#home" >Home</a>
Favorites
<div class = "dropdown">
<button class="dropbtn">Genre
<i class = "fa fa-caret-down"></i>
</button>
<div class ="dropdown-content">
Drama
</div>
</div>
</div>
<div class="container">
<form action="/action_page.php">
<div class = "input-group">
<input type="text" class = "form-control" placeholder="Search" name="search">
<div class ="input-group-btn ">
<button type="submit" class = "btn btn-default">
<i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</body>
</html>
When I keep the width auto or device-width, the drop down is really small, however, if the width is some huge actual number like 1000px or 30000px, whole search bar shrinks in width and then the dropdown is as wide as the search bar.
How much i understand you problem is your want to increase the width of search input box and the autocomplete comes under 100% as with provided to your search input box.
first of all include the jquery.min.js for remove the jquery error showing in your console.
after that do some changes which i done in your css and html for resolve the issue.
body{
background:#202a3f;
}
.form {
float: left;
width: 100%;
}
.custom-layout{
position: relative;
float: left;
width: 100%;
border-collapse: separate;
}
.custom-layout button{
position: absolute;
right: 0;
float: left;
}
.container{
margin-top:200px;
}
.glyphicon-search{
font-size:20px;
}
.btn-default{
background: orange;
width:100px;
padding:12.5px;
}
.form-control {
padding:25px;
font-size:20px;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navbar" >
<a href="#home" >Home</a>
Favorites
<div class = "dropdown">
<button class="dropbtn">Genre
<i class = "fa fa-caret-down"></i>
</button>
<div class ="dropdown-content">
Drama
</div>
</div>
</div>
<div class="container">
<form action="/action_page.php" class="form">
<div class = "input-group custom-layout">
<input type="text" class = "form-control" placeholder="Search" name="search">
<div class ="input-group-btn">
<button type="submit" class = "btn btn-default">
<i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
I want to make all buttons in my navigation bar styled using percentages. This is so that it'll look the same in different resolutions. However, for some reason, when I apply the percentages to the same button, some of them provide a different result and looks smaller. I am extremely confused and really need help as it's my ICT project.
I've attempted to make the all the paddings the same percentage, and everything of the sort
HTML:
.topnav{
overflow: hidden;
background-color: #333;
font-family: courier new;
width: 100%;
max-height:100px;
}
.topnav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 3% 2%;
text-decoration: none;
display: flex;
margin: auto;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: auto;
}
.dropdown a {
padding: 3% 2%;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #1A93EE;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="topnav">
<div class="dropdown">
<button class="dropbtn">About MUN
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
What is MUN?
The STCMUN Team
MUN Procedures
</div>
</div>
<div class="dropdown">
<button class="dropbtn">The UN
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
What is the UN?
The UN Sustainable Goals
</div>
</div>
Current Events
International Affairs
Others
Contact Us
</div>
</div>
</div>
</div>
</div>
I want all the buttons to be of the same size and styled using percentages. I also want the navigation bar to only be one text line in height. Please help!
The most appropriate way to approach responsiveness is leveraging on the power of media queries. Through this approach, you could resize your navigation bar to look exactly as you want it to look like across different screens. Learn more about media queries on MDN
Tip
You could hide the content on the nav bar on small screens and introduce sidebar which should be togglable.
body,html {
margin: 0px;
padding: 0px;
}
.topnav{
overflow: hidden;
background-color: #333;
font-family: courier new;
width: 100%;
max-height:100px;
padding: 3% 2%;
}
.topnav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
text-decoration: none;
display: flex;
margin: auto;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: auto;
}
.dropdown a {
padding: 3% 2%;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #1A93EE;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<body>
<div class="topnav">
<div class="dropdown">
<button class="dropbtn">About MUN
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
What is MUN?
The STCMUN Team
MUN Procedures
</div>
</div>
<div class="dropdown">
<button class="dropbtn">The UN
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
What is the UN?
The UN Sustainable Goals
</div>
</div>
Current Events
International Affairs
Others
Contact Us
</div>
</div>
</div>
</div>
</div>
</body>
is it? if not, please draw the expected behavior so that I can better understand what you want
What is wrong with the code I wrote? Below is the snippet.
html {
background-image: url(back.png)
}
#main {
text-align: center;
}
#visible {
display: inline-block;
background-color: #000c21;
width: 80%;
color: #c4c5c6;
font-family: sans-serif;
font-size:20;
}
html,body,#main,#visible { height:100%; }
.topnav {
overflow: hidden;
background-color: #182b3a;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover,.dropdown:hover .dropbtn {
background-color: #1a3c56;
color: white;
}
.topnav a.active {
background-color: #1a3c56;
color: white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #182b3a;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown:hover .dropdown-content {
display: block;
}
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
herpiderp
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<div id=main>
<div id=visible>
herpiderp
</div>
</div>
</body>
</html>
My drop-down element steals my main div, why is that?
I need it to be a proper drop-down element, but if I find a way around it, I will never know why this occurs in the first place.
I am making a website for robotics and want to make a drop-down menu, but I am getting this weird effect. Can anyone help me?
Is it me or do you hav an open div here ? I think you forgot to close a div. Try this
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
herpiderp
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<div id="main">
<div id="visible">
herpiderp
</div>
</div>
Also as #Romel Indemne suggested u missed double quotes.
Remove the overflow: hidden; attribute in your .topnav class
html {
background-image: url(back.png)
}
#main {
text-align: center;
}
#visible {
display: inline-block;
background-color: #000c21;
width: 80%;
color: #c4c5c6;
font-family: sans-serif;
font-size: 20;
}
html,
body {
min-height: 100vh;
}
#main,
#visible {
height: 100%;
}
.topnav {
background-color: #182b3a;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: #1a3c56;
color: white;
}
.topnav a.active {
background-color: #1a3c56;
color: white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #182b3a;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 3;
}
.dropdown {
float: left;
position: relative;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
herpiderp
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<div id="main">
<div id="visible">
herpiderp
</div>
</div>
</div>
</div>