I'm trying to figure out how to center this navbar that contains links and dropdown items. I'm able to get the links centered by themselves and the dropdown items centered by themselves but when attempting to get them all centered together they appear centered horizontally but not vertically. Currently they look like this left aligned. When i change the floats to none (and add flex as suggested) i get this one improperly centered.
.navbar {
overflow: hidden;
}
.navbar a {
float: left;
padding: 14px 16px;
background-color: #666666;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
padding: 14px 16px;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
float: none;
padding: 12px 16px;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navbar">
a
<div class="dropdown">
<button class="dropbtn">b</button>
<div class="dropdown-content">
1
2
</div>
</div>
<div class="dropdown">
<button class="dropbtn">c</button>
<div class="dropdown-content">
3
4
</div>
</div>
d
</div>
You can use flex for that matter...
.navbar {
overflow: hidden;
display: flex;
justify-content:center;
}
.navbar a {
float: left;
padding: 14px 16px;
background-color: #666666;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
padding: 14px 16px;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
float: none;
padding: 12px 16px;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navbar">
a
<div class="dropdown">
<button class="dropbtn">b</button>
<div class="dropdown-content">
1
2
</div>
</div>
<div class="dropdown">
<button class="dropbtn">c</button>
<div class="dropdown-content">
3
4
</div>
</div>
d
</div>
Related
I'm using masonry layout to get two columns with different height elements in each of them. In the first column I have a dropdown element, with 3 entries. When I hover over the dropdown, the content is displayed in the second column, not if the first one. I think this is because of the masonry layout I'm using. How can I update the code to make the dropdown display the content in the first column?
Here is the code:
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
width: 100%;
display: none;
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:hover .dropdown-content {
display: inline-block;
}
.masonry-wrapper {
column-count: 2;
width: 100%;
}
.item {
float: right;
width: 100%;
}
<body>
<div class="masonry-wrapper">
<div class="item">
<h1> Left item </h1>
</div>
<div class="dropdown">
<h1> Dropdown </h1>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="item">
<h1> Right item </h1>
</div>
</div>
</body>
May not be exactly what you want, but it does what you're asking for. Removed "position: absolute;" and changed "display: block;" to "display: inline-block;".
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
width: 100%;
display: none;
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:hover .dropdown-content {
display: inline-block;
}
.masonry-wrapper {
column-count: 2;
width: 100%;
}
.right-item {
float: right;
width: 100%;
}
<body>
<div class="masonry-wrapper">
<div class="dropdown">
<h1> Dropdown </h1>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="right-item">
<h1> Right item </h1>
</div>
</div>
</body>
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 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
Hi I have made a web page with a navigation bar. There is mouse hover drop down menu on a navigation bar. I have take the code for this navigation bar from w3school web site. The code is
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.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 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div style="display:flex">
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<div class="dropdown-content">
List 4
List 5
List 6
</div>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
Now the problem is that I want to add second column in front of first column in the drop down list.For this I add second div but all the stuff of the second div appears in place of first div and hides the content of first div. Please tell me that how can I place the second div in next to first div so that they appear parallel to each other.Please answer this question. I will be very thank full to you.
You can place it by wrapping the .dropdown-content div with a flexbox.
I have added .wrapper a class you can change it to whatever you like.
Here is the code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.wrapper {
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 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .wrapper{
display: flex;
justify-content: center;
}
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="wrapper">
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<div class="dropdown-content">
demo
demo
demo
</div>
</div>
</li>
</ul>
P.S. In the same way you can create multiple, side by side divs using flexbox. You can learn about flex here
I want to make a dropdown menu in CSS ... I already have a menu with "fixed" position(this first menu has to be fixed and nothing else)
but when I try to design my dropdown menu, items in it don't go to the position I want and always align to the first menu...
plz, tell how to do it correctly....
#menu {
overflow: hidden;
position: fixed;
top: 0;
width: 50%;
margin-left: 25%;
background-color: #333;
color: #f2f2f2;
}
.menu-content {
float: left;
display: block;
text-decoration: none;
padding: 25px 20px;
font-size: 17px;
}
#products {
padding-top: 25px;
font-size: 22px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropdown-btn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center ;
}
.dropdown:hover .dropdown-content {
display: block;
}
<body>
<div id="menu">
<div class="dropdown">
<button id="products" class="dropdown-btn menu-content"> <i class="fa fa-bars"></i> products </button>
<div class="dropdown-content">
<a> speaker </a>
</div>
</div>
</div
</body>
this is the result I get:
enter image description here
Just remove
#menu {
overflow: hidden; <--remove!!
}
and add
.dropdown:hover .dropdown-content {
display: block;
margin-top: 65px; <- Add
}
If you use overflow:hidden on your #menu your dropdownlist will never show up, because your list will be limited by the external div, since it's nested in.
Also, use margin-top to add some distance between each item.
a way to fix it is to change the positioning from absolute to relative. also add a way to position it
.dropdown-content {
display: none;
position: absolute;<-- change to relative-->
background-color: #f9f9f9;
min-width: 160px;
z-index: 1;