I'd like to create a horizontal menu with auto(100%) width.
MY CSS
.horizontal {
width: 100%;
}
.horizontal ul {
display: table;
width: 100%
}
.horizontal li {
display: table-cell;
}
.horizontal li a {
height: 30px;
display: block;
border: 1px solid #aaa;
text-align: center;
padding: 4px;
margin: 0 2px;
background: #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
MY HTML
<div class="horizontal">
<ul>
<li>Long Item</li>
<li>Short Item</li>
<li>Really Long Item</li>
<li>Nav Item</li>
<li>Some Other Link</li>
</ul>
</div>
My problem is that I would like that the "tabs" (a elements) have the same size maintaining 100% of width
It would be possible to do so? How could I do this? Thanks
Give li width in percentage.
.horizontal li {
display: table-cell;
width:20%; // because you have 5 anchors.
}
You can do this by simply adding something like this:
li{width:400px;}
If you have or will have more li's on the page, you can either give them a class, give the ul a class and use:
ul.header > li{width:400px;}
or just use:
.horizontal > ul > li{width:400px;}
Not sure if you are searching for the following, but u can try the following:
.horizontal ul {
height: 40px;
padding: 0 100px;
font-weight: 500;
line-height: 40px;
text-transform: uppercase;
text-align: justify;
background: #222;
}
.horizontal ul li{
display: inline-block;
}
.navigation ul li a {
text-decoration: none;
color: #fff;
}
Related
I'm having problems with my navbar. The process of making one is already done, but when I hover over my nav and my subnav appears, all the text below it moves down.
How do I fix this?
Here is a code snippet which demonstrates the problem, hover over TAKKEN to see the issue:
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Here is some text below the nav.
Image showing the problem
Try giving a fixed width to the li elements.
Check this:
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal > li {
float: left;
width: 6rem;
}
.horizontal li ul{
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: inline-block;
}
.horizontal li a{
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color:#FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
}
.horizontal li a:hover {
background-color: darkorange;
color:#a2becf
}
.horizontal li:first-child a { border-left:0; }
.horizontal li:last-child a { border-right:0; }
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
There appear to be 2 style-related problems with your nav.
Elements are being shifted to the side when you hover over TAKKEN.
This is happening because the text KAPOENEN and KAWELLEN is longer and therefore wider than TAKKEN. The quickest fix would be to define a specific width for each of the items in your nav.
Any text below the nav moves down as soon as one of the subnavs open.
To solve this problem, you need to give your nav an absolute position, and add a placeholder div to just above it in your HTML.
Run the code snippet below to see a demonstration of both points. I've marked all my changes in the CSS using comments.
/* New code */
#placeholder {
height: 100px;
}
nav {
position: absolute;
top: 5px;
}
/* End new code */
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
/* New code */
width: 80px;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
<div id="placeholder"></div>
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Here is some text under the nav.
I would like to convert the Help link to a drop-down on hover. Do I have to convert this to an un-ordered list or can I use the existing structure. Thanks in advance.
<div class="navbar-project">
Details
Forms
Documents
Help
</div>
CSS
.navbar-project {
width: 100%;
background-color: #fff;
overflow: auto;
margin-top: 25px;
margin-bottom: 25px;
}
.navbar-project a {
float: left;
padding: 12px;
color: #000;
text-decoration: none;
font-size: 20px;
width: 25%; /* Four links of equal widths */
text-align: center;
border-bottom: 3px solid white;
}
.navbar-project a:hover {
border-bottom: 3px solid black;
}
.navbar-project a.active {
background-color: #fff;
border-bottom: 3px solid red;
}
#media screen and (max-width: 500px) {
.navbar-project a {
float: none;
display: block;
width: 100%;
text-align: left;
}
}
the best way to handle the dropdowns is to put them inside ul, you can adopt the below code in your existing code
<nav role="navigation">
<ul>
<li>Button One</li>
<li>Button Two
<ul class="dropdown">
<li>Submenu-1</li>
<li>Submenu-2</li>
<li>Submenu-3</li>
</ul>
</li>
<li>Button Three</li>
</ul>
</nav>
and your css
li {
display: block;
transition-duration: 0.5s;
}
li:hover {
cursor: pointer;
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
You just need turn the Help item in a ul, create the li items and than use the display: none; to hide it, after that you can use hover in the ul and specify that you want the li items to appear using display: block;.
.navbar-project {
width: 100%;
background-color: #fff;
overflow: auto;
margin-top: 25px;
margin-bottom: 25px;
}
.navbar-project a {
float: left;
padding: 12px;
color: #000;
text-decoration: none;
font-size: 20px;
width: 25%; /* Four links of equal widths */
text-align: center;
border-bottom: 3px solid white;
}
.navbar-project a:hover {
border-bottom: 3px solid black;
}
.navbar-project a.active {
background-color: #fff;
border-bottom: 3px solid red;
}
.navbar-project ul{
display: flex;
flex-direction: column;
}
.navbar-project ul li{
display: none;
}
.navbar-project ul:hover li{
display: block;
}
#media screen and (max-width: 500px) {
.navbar-project a {
float: none;
display: block;
width: 100%;
text-align: left;
}
}
<div class="navbar-project">
Details
Forms
Documents
<ul>Help
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
Note: I believe that for the sake of semantics it's good to always use ul or
ol in your nav menu as Kai explained in the other comment, so you just
need create another list inside the first one as I demonstraded.
Edit: I did some modifications and this time the width of 25% is working, this is the example
So I have this issue where my Navbar splits itself based on the specified padding. Easier to see what I mean below.
As you can see I have an extra blank menu item which after some time I was able to narrow down to it being caused by the padding.
Above is with 0 padding. How can I keep the Navbar height along with fixing the menu?
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 0;
}
Specifically:
padding: 20px; (image1) padding: 0px; (image 2)
Snippet
#menu {
display: flex;
margin: 0;
width: 1080px;
margin-top: 5%;
list-style-type: none;
background: linear-gradient(#3E3E3E, #2B2B2B);
overflow: hidden;
}
li {
flex: 1;
border-right: 1px solid #232323;
}
li:last-child {
border: none;
}
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 0;
}
li a:hover {
background: linear-gradient(#404040, #3E3E3E);
}
<nav>
<ul id="menu">
<li class="active">HOME</li>
<li>GALLERY</li>
<li>ART</li>
<li>CONTACT</li>
</ul>
</nav>
Want was your problem? (My assumption)
First check this CODEPEN
You were assigning padding property to li a:hover, instead of li a.
As it's possible to achieve the desired result by adding padding to li a and other way is by assigning line-height to either li/#menu.
#menu {
display: flex;
margin: 0;
width: 1080px;
margin-top: 5%;
list-style-type: none;
background: linear-gradient(#3E3E3E, #2B2B2B);
overflow: hidden;
}
li {
flex: 1;
border-right: 1px solid #232323;
}
li:last-child {
border: none;
}
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 20px;
}
li a:hover {
background: linear-gradient(#404040, #3E3E3E);
}
<nav>
<ul id="menu">
<li class="active">HOME</li>
<li>GALLERY</li>
<li>ART</li>
<li>CONTACT</li>
</ul>
</nav>
I have a menu that works really well but the submenu items overlap when there are too long. I tried setting the line-height to 24px which made the text ok but then the hover background color stuff was too small. Here's the code:
.nav ul {
list-style: none;
background-color: #5FD6D6; /*nav background */
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: black; /* font color */
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #BFEFEF; /* hover color */
}
.nav a.active {
background-color: #ED1C24; /*selected color */
color: white;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: 1em;
}
#media screen and (min-width: 650px) {
.nav li {
width: 150px;
border-bottom: none;
height: 100px;
line-height: 100px;
font-size: 2em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav">
<ul>
<li>Home
</li>
<li>Tutorials
<ul>
<li>Tutorial #1##
</li>
<li>Tutorial #2
</li>
<li>Tutorial #3
</li>
</ul>
</li>
<li><a class="active" href="#">About</a>
</li>
<li>Newsletter
<ul>
<li>News #1
</li>
<li>News #2###
</li>
<li>News #3
</li>
</ul>
</li>
</ul>
</div>
There are already some working answers, but if you'd like the child navigation items to increase in width as needed (as opposed to increase in height), I'd suggest removing an explicit width from .nav li (inside the media query), and adding it instead as a min-width to .nav > ul > li (also inside the media query).
(On a personal level, I find it much more readable if navigation items increase in width as needed and stick to a single line, instead of breaking to a new line and increasing in height.)
So those two declaration blocks would go from:
#media screen and (min-width: 650px) {
.nav li {
width: 150px;
border-bottom: none;
height: 100px;
line-height: 100px;
font-size: 2em;
display: inline-block;
margin-right: -4px;
}
.nav > ul > li {
text-align: center;
}
}
To:
#media screen and (min-width: 650px) {
.nav li {
border-bottom: none;
height: 100px;
line-height: 100px;
font-size: 2em;
display: inline-block;
}
.nav > ul > li {
text-align: center;
min-width: 150px; /* new */
margin-right: -4px; /* moved */
}
}
Note that I also moved the negative margin-right between the declaration blocks, as this seemed to be causing some issues with the child navigation items' backgrounds. Here's a JSFiddle to demonstrate the code in action.
Hope this helps! Let me know if you have any questions.
You can remove the "height", that worked for me:
.nav li {
width: 150px;
border-bottom: none;
/*height: 100px;*/
line-height: 100px;
font-size: 2em;
display: inline-block;
margin-right: -4px;
}
I don't like setting line-height that big except for special cases.
In your case, instead of having that big I believe it's more appropriate to use padding.
So to do that:
First remove line-height and height on .nav li, then it will now look like this.
.nav li {
width: 150px;
border-bottom: none;
font-size: 2em;
display: inline-block;
margin-right: -4px;
}
Then in your .nav a add a padding :
.nav a {
text-decoration: none;
color: black;
display: block;
transition: .3s background-color;
padding: 1em 0;
}
This way, your list are more flexible than having a fixed height.
Working example
.nav ul {
list-style: none;
background-color: #5FD6D6; /*nav background */
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: black; /* font color */
display: block;
transition: .3s background-color;
padding: 1em 0;
}
.nav a:hover {
background-color: #BFEFEF; /* hover color */
}
.nav a.active {
background-color: #ED1C24; /*selected color */
color: white;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: 1em;
}
#media screen and (min-width: 650px) {
.nav li {
width: 150px;
border-bottom: none;
font-size: 2em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav">
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Tutorial #1##</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li><a class="active" href="#">About</a></li>
<li>Newsletter
<ul>
<li>News #1</li>
<li>News #2###</li>
<li>News #3</li>
</ul>
</li>
</ul>
</div>
I've coded a css dropdown menu and cant seem to get the name "LOGOS" to stay within the green box when I hover over the word "Illustration". I've made the word 5em so I can see it. Cant get it to stay in the box...no control of it's position. Can you help?
Thanks,
T.
<div id="nav-bar-sm-cont">
<ul id="sm-nav">
<li id="home">HOME</li>
<li id="about">PROFILE</li>
<li id="illustration">ILLUSTRATION
<ul>
<li id="logos">LOGOS</li>
</ul>
</li>
<li id="billboards">BILLBOARDS</li>
<li id="six-mo">6 MO BREAKFAST</li>
<li id="cal">ARTSHOW</li>
<li id="church">CHURCH</li>
<li id="contact">CONTACT</li>
<li id="cat-ill">CAT ILLUSTRATION</li>
<li id="contact-cat">CONTACT CAT</li>
</ul>
</div>
<!--end nav bar sm container -->
/* START small NAV bar **************************/
#nav-bar-sm-cont { position: absolute;
width: 1000px;
height: 100px;
}
#sm-nav li { position: relative;
top: 30px;
left: 35px;
font-size: .6em;
line-height: 250%;
letter-spacing: 0.3em;
list-style-type: none;
float: left;
}
#sm-nav a:link{ text-decoration:none;
color:silver;
background-color:transparent;
padding: 5px 5px;
}
#sm-nav a:visited {text-decoration:none;
color: #9781B7;
padding: 5px 5px;
background-color: transparent;
}
#sm-nav a:hover {text-decoration:none;
color: #fff;
background-color:#a7d6d5;
padding: 5px 5px;
}
#sm-nav a:active {text-decoration:none;
color:#fff;
background-color: green;
padding: 5px 5px;
}
/*start drop down************************************/
#sm-nav li ul { position:relative;
list-style-type: none;
display: none;
}
#sm-nav li:hover ul { position: absolute;
background: green;
padding: 5px 5px;
display:block;
font-size: 5em;
width: 103px;
height: 10px;
}
/*end drop down*****************************************/
/* END small NAV BAR *****************************/
The problem is that your CSS for the li is affecting both the parent li and the child. To fix that just change:
#sm-nav li {
to
#sm-nav > li {
Now that CSS will only affect the parent li and you're free to adjust the CSS for the child however you want like this:
#sm-nav li:hover ul li { }
JSFiddle