I'd like to have my navigation menu on my site span the width evenly. Here is an example of what I'm trying to accomplish, notice how the links are spaced evenly and stretch the entire width of the navigation bar.
I'm not exactly sure what code to use to accomplish this. I tried margin:auto but that didn't seem to work.
Here is the CSS that I have:
.mainNav{
height:30px;
padding-bottom:0px;
margin:0 !important;
position: relative;
border-top: 1px #d5d5d5 solid;
border-bottom: 1px #d5d5d5 solid;
}
.mainNav a {
font-size:16px;
-webkit-transition:none;
-moz-transition:none;
-o-transition:none;
transition:none;
position: relative;
}
.mainNav ul {
list-style-type: none;
list-style-image: none;
}
.mainNav li {
float:left;
margin: 0 auto;
position: relative;
list-style-type: none;
list-style-image: none;
}
.mainNav li a {
text-transform:uppercase;
padding:0 0 0 36px;
display:block;
padding-bottom:13px;
}
.mainNav li ul {
display: none;
margin:0 !important;
}
.mainNav li:hover > ul, .mainNav li.hover > ul {
display: block;
position: absolute;
top: 35px;
left: 0;
z-index: 1000;
width: 180px;
}
.mainNav li > ul {
height:auto;
width: auto;
background: #fff;
border:1px solid #efefef;
padding:0;
}
.mainNav li > ul li {
width:180px;
padding: 0;
position: relative;
height:35px;
border-bottom:1px solid #efefef;
}
.mainNav li > ul li:last-child{
border-bottom:none;
}
.mainNav li > ul li a {
text-transform:none;
height:22px;
padding: 5px 10px 0px 15px;
text-align: left;
font-size: 13px;
line-height:25px;
color:#333;
}
.mainNav li > ul li a:hover {
border:none;
}
.mainNav li ul li:hover > ul, .mainNav li ul li.hover > ul {
display: block;
position: absolute;
top:0;
left: 180px;
z-index: 0;
width: 180px;
}
If you turn off javascript and reload that wordpress theme that you want to replicate, you'll notice that the styling breaks.
That is because the margin's set on the list items to space them out evenly, is calculated using javascript and then applied.
You could write a javascript solution to style your list items or a quick fix would be to hard code the widths of the list items, e.g:
Change your current block of CSS:
.mainNav li a {
text-transform:uppercase;
padding:0 0 0 36px;
display:block;
padding-bottom:13px;
}
To the following:
.mainNav li a {
text-transform:uppercase;
text-align: center; /*added*/
width: 117px; /*added*/
padding:0; /*edited*/
display:block;
/*padding-bottom:13px;*/ /*removed*/
}
It looks fixed to me. Screenshot of your site in firefox, with applied styles seen in firebug:
Related
I have created my first master page so bear with me if this is a dumb question. One of my menu drop down lists within the master page is longer than the viewable page, so some of the items in the drop down list are cut off at the bottom of the page. How can I make the drop down list have the ability to scroll through it so I can see the entire list.
nav{
top:0;
left:0;
position:fixed;
width:100%;
background-color:rgba(0,0,0,0.6);
}
nav ul{
float:left;
padding:0;
margin:0;
position:relative;
list-style:none;
}
nav ul li{
display:inline-block;
float:left;
position:relative;
}
nav a{
display:block;
padding:3px 10px;
color:white;
font-size:17px;
font-weight:bold;
text-decoration:none;
font-family:Arial;
}
nav a:hover{
background-color:white;
color:gray;
}nav ul ul{
display:none;
position:absolute;
width:450px;
top:26px;
}
nav ul li:hover>ul{
display:inherit;
}
nav ul ul li{
float:none;
display:list-item;
position:relative;
background-color:rgba(0,0,0,0.6);
}
nav ul ul ul li{
position:relative;
left:450px;
top:-26px;
}
.toggle, [id^=drop]{
display:none;
}
#media all and (max-width:600px){
.menu{
display:none;
}
.toggle{
display:block;
color:white;
background-color:rgba(0,0,0,0.6);
text-decoration:none;
padding:20px;
}
.toggle:hover{
background-color:white;
color:dimgray;
}
#logo{
display:block;
float:none;
}
[id^=drop]:checked+ul{
display:block;
}
nav ul li{
display:block;
width:100%
}
nav ul ul{
float:none;
position:static;
}
nav ul ul ul{
float:none;
position:absolute;
}
}
One option would be to set via CSS a maximum height of the container (max-height : number [%, PX, VH] ) of dropdown and specify an overflow / scrolling (overflow-y : [ scroll|auto ] )to get to the bottom of the items. For example:
.nav ul { max-height:100%; overflow-y: auto; }
You can adjust Max-Height with %, PX, VH .. or whatever suites your specific project's use case.
Another option could be to introduce Columns in the dropdown as described here:
How to fix a dropdown menu that extends past bottom of page
I figured it out. To have a scroll bar in the sub menu drop list I needed to add nav ul ul ul and alter the nav ul ul ul li see below;
top: 0;
left: 0;
position: fixed;
width: 100%;
background-color: rgba(0,0,0,0.6);
}
nav ul {
float: left;
padding: 0;
margin: 0;
position: relative;
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
position: relative;
}
nav a {
display: block;
padding: 3px 15px;
color: white;
font-size: 17px;
font-weight: bold;
text-decoration: none;
font-family: Arial;
}
nav a:hover {
background-color: white;
color: gray;
}
nav ul ul {
display: none;
position: absolute;
width: 300px;
top: 26px;
}
nav ul li:hover > ul {
display: inherit;
}
nav ul ul li {
float: none;
display: list-item;
position: relative;
background-color: rgba(0,0,0,0.6);
}
nav ul ul ul {
display: none;
position: absolute;
left: 300px;
top: 0px;
max-height: 1000%;
overflow-y: auto;
}
nav ul ul ul li {
float: none;
display: list-item;
position: relative;
}
.toggle, [id^=drop] {
display: none;
}
#media all and (max-width:600px) {
.menu {
display: none;
}
.toggle {
display: block;
color: white;
background-color: rgba(0,0,0,0.6);
text-decoration: none;
padding: 20px;
}
.toggle:hover {
background-color: white;
color: dimgray;
}
#logo {
display: block;
float: none;
}
[id^=drop]:checked + ul {
display: block;
}
nav ul li {
display: block;
width: 100%
}
nav ul ul {
float: none;
position: static;
}
nav ul ul ul {
float: none;
position: absolute;
}
}```
Hi I am having trouble shifting a menu list on my wordpress site to the left. It appears as if there is a margin so when the list contains so many items it appears right offset and no longer centred. The site in question is www.cabinboys.ca the menu I'm talking about is right below the cabinboys image filled with two letter items. If any one could look at my css and see if they could figure out how to shift the list items to the left that would be much appreciated thanks.
/* =Menu
----------------------------------------------- */
#menu {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
margin-bottom: 25px;
padding: 10px;
text-align: right;
width: 800px;
}
#menu img {
margin-bottom: 10px;
}
#menu a {
color: #666;
font-family: 'Oswald', Helvetica, Arial, sans-serif;
font-size: 18px;
margin: 0 10px;
text-decoration: none;
text-transform: uppercase;
}
#menu a:hover {
color: #36bcab;
}
#menu ul {
list-style: none;
margin: 0;
padding-left: 30;
}
#menu li {
float: right;
position: relative;
}
#menu ul ul {
display: none;
float: right;
position: absolute;
right: 0;
z-index: 99999;
}
#menu ul ul ul {
right: 100%;
top: 0;
}
#menu ul ul a {
background: #e9e9e9;
border-bottom: 1px solid #e1e1e1;
display: block;
font-size: 14px;
height: auto;
line-height: 1em;
margin: 0 ;
padding: .8em .5em .8em 1em;
width: 130px;
}
#menu ul ul li:last-of-type a {
border-bottom: none;
}
#menu li:hover > a,
#menu ul ul :hover > a {
color: #36bcab;
}
#menu ul ul a:hover {
background: #36bcab;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul li.current_page_item > a,
#menu ul li.current_page_ancestor > a,
#menu ul li.current-menu-item > a {
color: #111;
}
#menu ul:after {
clear: both;
content: ' ';
display: block;
}
You should add a couple of properties to make it work:
#menu-header-menu {
display:table;
margin:0 auto;
padding:0;
}
Nevertheless it's interesting that you say that the shift happened when the number if items in the menu increased, I don't see in the CSS any code that could differentiate the display depending on the number of items. Could you confirm that I understood the situation?
I am not exactly sure how to ask this question. I am new to responsive design and understand the flow down, but I don't want to use the flow down on my menu. It is broken into 3 sizes and the mobile size, I don't want sub-menus and need it at 100% width. How do I block the information from the previous id and class selectors.
/*------------menu */
nav {font-family: "BenchNine", "PT Sans Narrow", Arial, Helvetica, sans-serif;
text-transform: uppercase;
width:960px;
height: 43px;
margin: 0px auto 0px auto;
/*background:#0084FC;*/
border:0px solid #FFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
z-index:10;
}
/*nav ul {list-style: none;margin: 0;padding: 0 5px; } */
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {margin: 0;padding: 0 5px;list-style: none;position: relative;display: inline-table; z-index:1;}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li span { width:425px;}
nav ul li {
float: left; position: relative; padding: 0px; top:0px;border-top:0px solid #0082f8;
}
nav ul li:hover {
background: #025287;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {font-size: 20px; color: #B3DBFF; display: block; padding: 54px 10px 6px 10px; margin-bottom: 0px; z-index: 10; position: relative; font-weight:bold; text-transform:uppercase;}
nav ul ul {
background: #0082f8; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 0px solid #0082f8;
border-bottom: 0px solid #0082f8;
position: relative;
}
nav ul ul li a {
padding: 10px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #025287; color:#fff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
This is the css for the menu in the responsive css file.
#media only screen and (max-width: 767px) {
nav {width:100%;background:none;height:auto;margin: 0px auto 15px auto;}
nav ul li {float: none;background:#000;text-align:center;padding-bottom:0px;margin-top:5px;}
nav ul li span {clear:}
nav ul li:hover {background: url('../images/menu-bg-act_mob2.png') repeat-x;}
nav ul li a{margin-bottom : 0px;}
nav ul li a{margin-bottom : 0px;}
Your question is not very clear, but it sounds like you need to override some existing style declarations.
You should be able to do this by making more specific declarations.
E.g.:
html nav { margin: 20px } will override nav { margin: 10px }.
Check out Andy Clarke's CSS Specificity Wars for more on the subject.
I am unable to get rid of a gap between my nav bar and my submenu dropdown menu. You can view the issue here.
My css is here:
nav#nav{
float: left;
font: 14px/16px 'MuseoSlab500Regular', arial, helvetica, sans-serif;
margin-right: auto;
z-index: 99999;
/*background-image: url(../images/2blkbg.png);*/
/*background-repeat: repeat-x;*/
padding-left: 30px;
/*background-position: left bottom;*/
background-color: #000;
height: 53px;
display: block;
position: relative;
margin-top: 15px;
margin-bottom: 15px;
}
#nav ul{
list-style: none;
margin: 0;
padding: 0;
}
#nav ul li{
float: left;
margin-right: 0;
margin-bottom: 0;
padding-top: 0;
padding-right: 49px;
padding-bottom: 0;
padding-left: 0;
}
#nav ul a,#nav li.current-menu-ancestor a{
display: block;
height:83px;
line-height: 53px;
border-top-width: 0px;
border-top-style: solid;
border-top-color: #fff;
}
#nav ul .current_page_item a, #nav ul .current-menu-item a, #nav ul > .current-menu-parent a{
color:#a0ce4e;
text-decoration:none;
border-color:#a0ce4e;
}
#nav ul li{
position: relative;
}
#nav ul ul{
display: none;
position: absolute;
top: 0px;
left: 0;
width: 170px;
background: #edebeb;
z-index: 100000;
border-top: 3px solid #a0ce4e;
z-index: 99999;
}
#nav ul li:hover ul{
display: block;
}
#nav ul li ul li{
display: block;
float: none;
margin: 0;
padding: 0;
background-image: url(../images/blkbg.png);
background-repeat: repeat-x;
}
#wrapper #nav ul li ul li a{
background: url(../images/subnav_sep.jpg) repeat-x bottom left;
border: 0;
height: 30px;
text-indent: 20px;
font: 13px/30px 'PTSansRegular', Arial, Helvetica, sans-serif;
color: #333333 !important;
}
#wrapper #nav ul li ul li a:hover,#wrapper #nav ul li ul li.current-menu-item a{
background-color:rgba(255,255,255,0.5);
}
#nav ul ul ul{
display:none !important;
}
#nav ul ul li:hover ul{
display:block !important;
top:-3px;left:170px;
}
#nav select{
max-width:100%;
display:none;
}
#nav > li > a,#nav li.current-menu-ancestor a {
height:83px;
line-height:83px;
}
#nav ul ul {
top:86px;
}
Set the top and that will remove the excess of gap:
#nav ul ul {
top:86px;
}
Good you posted the url, since problem is not in the css you included. The problem is in this class:
#nav ul ul {
top:86px;
}
This top-offset should be set to 53px, the same height as your menu bar (nav#nav):
#nav ul ul {
top:53px;
}
This css-class actually is not in your css-stylesheet, but in your page itself. It is included in the <head></head>.
I wanted to create a css dropdown for my blogger blog. But I Faced many difficulties because I am not a CSS professional and my blogger template is not designed by me. I tried many things but nothing worked for me.
I am giving you the code, please identify errors in it. Thanks...
My HTML Structure of Navigation Links:
<div id='mainmenu'>
<ul>
<li class='first current_page_item'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href='http://www.technodoze.com/search/label/Physics' title='Amazing Articles about Physics'>Physics</a></li>
<li><a href='http://www.technodoze.com/search/label/Amazing' title='Amazing'>Amazing Stuff</a>
The code for drop down element where problem really is:
<ul>
<li><a href='http://www.technodoze.com/search/label/Amazing' title='Amazing'>Amazing Stuff</a></li>
<li><a href='http://www.technodoze.com/2011/09/write-for-us.html' title='Write For Us'>Write For Us</a></li>
</ul>
From here it is normal code:
</li>
<li><a href='http://www.technodoze.com/search/label/Videos' title='Videos'>Videos</a></li>
<li><a href='http://www.technodoze.com/search/label/Downloads' title='Free Downloads'>Download</a></li>
<li><a href='http://www.technodoze.com/search/label/Biggest%20In%20The%20World' title='SG Biggest'>Biggest In The World</a></li>
<li><a href='http://www.technodoze.com/2010/01/author-of-blog.html' title='About Me'>About Me</a></li>
</ul>
</div>
See URL where this navigation linking is applied:
www.technodoze.com
Now my CSS:
#mainmenu a {
text-decoration:none;
display:block;
margin:0;
float:left;
background: none;
padding: 9px 15px;
text-transform:uppercase;
color: #CCCCCC;
font-size: 11px;
}
#mainmenu li a:hover,
#mainmenu li a:focus,
#mainmenu a.mainMenuParentBtnFocused{
/*background-color: #1e1e1e;*/
background: url(http://1.bp.blogspot.com/_lxBSX0YJV58/SwQlF623qJI/AAAAAAAAAlc/h7AiX8sx00g/s1600/mainnav-hover.gif) repeat-x left top #666666;
color:#fff;
}
#mainmenu , #mainmenu ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}
#mainmenu ul {
/*border around submenu goes here*/
background: none;
left:0;
}
#mainmenu li {
/*great place to use a background image as a divider*/
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif);
background-repeat:no-repeat;
background-position: 100% 0px;
cursor: pointer;
float: left;
margin: 0 0px 0 0px;
padding: 0 2px 0 1px;
height: 30px;
display: inline;
}
#mainmenu {
overflow: hidden;
font-size: 12px;
float: left;
width: 738px;
display: inline;
height: 30px;
}
All is well till here... (The Upper CSS code is Just for the #mainmenu ul li which is infact going fine.)
The problem starts here...
#mainmenu li ul {
display: none;
margin:0;
padding 0;
position:absolute;
left:0;
}
#mainmenu li:hover > ul {
display: block;
float:none;
position:absolute;
}
#mainmenu li:hover ul li {
display: block;
}
#mainmenu li ul li {
list-style-type: none;
margin:0;
display: block;
padding:0;
}
I tried to create a drop-down but the child element [ #mainmenu ul li ul ] is not in the form of drop-down and is embedded on the side.
.
(This is currently applied on website you can view it by going to www.technodoze.com and mouseover on Amazing Stuff navigation link.)
I am sure the rare mistake is in the last piece of CSS code but I showed you the whole scenario in case this problem has arisen due to float of #mainmenu ul or any other upper element...
I will be thankful to the person helping me...
Thanks
Updated: 27 sep, 11:00 GMT, Reason: One more problem
I have changed my code now to :
#mainmenu {
overflow: hidden;
font-size: 12px;
float: left;
width: 738px;
display: inline;
height: 30px;
}
#mainmenu ul li ul li a {
background-color:#333333;
}
#mainmenu ul li ul .first_li {
-moz-border-top-left-radius: 7px;
-khtml-border-top-left-radius: 7px;
-webkit-border-top-left-radius: 7px;
border-top-left-radius: 7px;
-moz-border-top-right-radius: 7px;
-khtml-border-top-right-radius: 7px;
-webkit-border-top-right-radius: 7px;
border-top-right-radius: 7px;
}
#mainmenu ul li ul .last_li {
-moz-border-bottom-left-radius: 7px;
-khtml-border-bottom-left-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
border-bottom-left-radius: 7px;
-moz-border-bottom-right-radius: 7px;
-khtml-border-bottom-right-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
border-bottom-right-radius: 7px;
}
#mainmenu ul li ul {
-moz-box-shadow: 4px 4px 2px #888;
-webkit-box-shadow: 4px 4px 2px #888;
box-shadow: 4px 4px 2px #888;
-khtml-box-shadow: 4px 4px 2px #888;
border-color: #F1F1F1;
-moz-outline-color: #F1F1F1;
}
#mainmenu a {
text-decoration:none;
display:block;
}
#mainmenu a {
margin:0;
float:left;
background: none;
padding: 9px 15px;
text-transform:uppercase;
color: #CCCCCC;
font-size: 11px;
}
#mainmenu li a:hover, #mainmenu li a:hover ul li,
#mainmenu li a:focus, #mainmenu li a:focus ul li, #mainmenu li:hover > a,
#mainmenu a.mainMenuParentBtnFocused{
/*background-color: #1e1e1e;*/
background: url(http://1.bp.blogspot.com/_lxBSX0YJV58/SwQlF623qJI/AAAAAAAAAlc/h7AiX8sx00g/s1600/mainnav-hover.gif) repeat-x left top #666666;
color:#fff;
}
#mainmenu , #mainmenu > ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}
#mainmenu ul {
/*border around submenu goes here*/
background: none;
left:0;
}
#mainmenu > li {
/*great place to use a background image as a divider*/
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif);
background-repeat:no-repeat;
background-position: 100% 0px;
cursor: pointer;
float: left;
margin: 0 0px 0 0px;
padding: 0 2px 0 1px;
height: 30px;
display: inline;
}
#mainmenu li ul {
display: none;
margin:0;
padding 0;
position:absolute;
left:0;
}
#mainmenu li:hover > ul {
display: block;
float:none;
position:absolute;
top:159px;
left:235px;
}
#mainmenu li:hover ul li {
display: block;
}
#mainmenu li ul li {
list-style-type: none;
margin:0;
display: block;
padding:0;
}
Now the only problem left is that I am getting whitespace in the second order li having address [#mainmenu ul li ul li]
You can see by going to this link www.technodoze.com
Please suggest some solution.
Thanks
Change :
#mainmenu li {
/*great place to use a background image as a divider*/
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif);
background-repeat:no-repeat;
background-position: 100% 0px;
cursor: pointer;
float: left;
margin: 0 0px 0 0px;
padding: 0 2px 0 1px;
height: 30px;
display: inline;
}
TO:
#mainmenu > li {
/*great place to use a background image as a divider*/
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif);
background-repeat:no-repeat;
background-position: 100% 0px;
cursor: pointer;
float: left;
margin: 0 0px 0 0px;
padding: 0 2px 0 1px;
height: 30px;
display: inline;
}
And add some new things in :
#mainmenu li:hover > ul {
display: block;
float:none;
position:absolute;
top:30px; /*new line*/
left:140px; /*new line*/
}
DEMO
Try this Drop down menu http://www.lwis.net/free-css-drop-down-menu/