Hello there,
Can someone see why I cannot center my text in the Main Navigation div? I have the div itself centered, but text-align:center; does not work for the UL menu.
State Inspired T-Shirt Designs | ActiveState Designs
I know it’s easy but I can’t seem to figure it out.
Thanks,
Lorne
The ul looks centered but the list items are floated so sit to the left in the centred nav. It only looks a few pixels out though.
You can’t really center floats so you you could use inline-block instead.
#header .main_navi {
text-align:center;
}
#header .main_navi li,
#header .main_navi a{display:inline-block;float:none}
* html #header .main_navi li,
* html #header .main_navi a{display:inline}/* ie6 fix*/
*+html #header .main_navi li,
*+html #header .main_navi a{display:inline}/* ie7 fix*/
It may affect nested lists though so you may need to cancel/reinstate some styles on the nested sublist.
Ok so I added your code, but still didn’t work 
I think it has to do with my id: “#header .hybrid_dropnavi” That is where all the ul and li behaviors are being called in. So I added your code you gave me to the .main_navi as well as the #header .hybrid_dropnavi ul li and #header .hybrid_dropnavi ul li a. Still not working.
Basically I want this to work right so the menu is centered and when the menu is added or changed and I don’t have to adjust it every time. I think my menu width at 50% might backfire in the future when the menu grows.
So I am sort of tacking on a new question; Is the #header .main_navi css correct to allow my div to grow in width and stay centered?
My current question remains; How can I get the menu text to be centered in the parent Div?
/*LR Navi*/
#header .LR_navi {padding:10px 0;position:relative;left:-380px;top:-35px;}
#header .LR_navi a {font-size:0.9em;padding-top:10px;}
/*Main Category Navi || Hybrid navi*/
#header .main_navi {clear:both;position: relative;top: 65px;width: 50%;margin-right: auto;margin-left: auto;padding-top:10px;}
#header .main_navi li,
#header .main_navi a{display:inline-block;float:none}
* html #header .main_navi li,
* html #header .main_navi a{display:inline}/* ie6 fix*/
*+html #header .main_navi li,
*+html #header .main_navi a{display:inline}/* ie7 fix*/
#header .hybrid_navi ul.categories, #header .hybrid_navi ul.pages {margin-left:10px;}
/*Secondary Navi*/
#header .secondary_navi {padding-top:10px;}
/*Hybrid Navigation Drop Downs*/
#header .hybrid_dropnavi ul {position:relative;font-family:Arial, Helvetica, sans-serif;font-size:16px;}/*for IE7*/
#header .hybrid_dropnavi ul, #header .hybrid_dropnavi ul ul {z-index:900;}
#header .hybrid_dropnavi ul li {display:inline-block;float:none;}
#header .hybrid_dropnavi ul li.drop {background:none;}
#header .hybrid_dropnavi ul li a {display:inline-block;float:none;padding:10px 20px;}
#header .hybrid_dropnavi ul li:first-child a {padding-left:0;}
#header .hybrid_dropnavi ul ul {position: absolute;top: 38px;left: 19px;padding: 5px;background: grey;-moz-box-shadow: inset 0 0 5px black;-webkit-box-shadow: inset 0 0 5px black;box-shadow: inset 0 0 5px black;}
#header .hybrid_dropnavi ul ul li, #header .hybrid_dropnavi ul ul li a {text-align:left;display:inline;list-style-type:none;float:none;border:0 none;}
#header .hybrid_dropnavi ul ul li a, #header .hybrid_dropnavi ul li:first-child ul a, #header .hybrid_dropnavi ul ul li:first-child a {padding:10px;text-decoration:none;color:#fff;}
#header .hybrid_dropnavi ul ul li a:focus, #header .hybrid_dropnavi ul ul li a:hover {text-decoration:none;color:#BE1F31;}
I hope that is not too confusing. Thanks in advance for your help.
Lorne
Sorry to post again, but one more glich I found with my menu…the submenu under “T-shirt Lines” seems to go away if you try to select an option to quickly. You have to wait for the entire submenu to show before you move the mouse, otherwise it disappears before you can select it.
Does that make sense?
Take a look: State Inspired T-Shirt Designs | ActiveState Designs
Thanks!
Lorne
The code I gave you is working but you put it in the wrong place so your existing rules simply took over. Place the code at the end of your existing menu code.
With my code you can set the menu to 100% wide and will allow for any number of items to be added.
#header .main_navi {
text-align:center;
width:100%;
}
#header .main_navi li,
#header .main_navi a{position:relative;display:inline-block;float:none}
* html #header .main_navi li,
* html #header .main_navi a{display:inline}/* ie6 fix*/
*+html #header .main_navi li,
*+html #header .main_navi a{display:inline}/* ie7 fix*/
The dropdown disappearing looks like a javascript issue but try moving it closer and making it slightly bigger.
#header .main_navi li ul{height:30px;line-height:30px;top:35px}
Your whole header code is very messy and could do with revision as you are tagetting all lists in the header with #header li (login for example) and then you are targetting others with #header .main_navi li which is silly because the rules cascade.
You don’t need those long path names and you should be specific so style each menu from the class that it holds and not from #header and make things easy for yourself.
Awesome, worked great thanks.
I’m sorry for the rookie question, but what do you suggest I do to clean up my code? It was from a template and seems to be messy.
If I delete all my main_navi code will that help clean it up?
By cascade do you mean there is a lot of duplicate information? Are there any tools I can use online to help clean this css up?
Thanks,
Lorne
In your header you have two uls and in your css you have these rules.
#header ul li {float:left;white-space:nowrap;}
#header ul li a {float:left;display:block;color:#FFF;padding:5px 0 5px 10px;}
#header ul li:first-child a {padding-left:0;}
They will apply to both uls but as both uls are styled differently to which one do they really refer? It just makes it more complicated than it needs to be. The login nav has a class already and could be styled from that and then the rules would not apply to the other ul.
.LR_navi li a {float:left;display:block;color:#FFF;padding:5px 0 5px 10px;}
etc...
Then that would allow you to style the main menu with less code. As it stands you have this:
[B]#header .hybrid_dropnavi ul[/B] {position:relative;font-family:Arial, Helvetica, sans-serif;font-size:16px;}/*for IE7*/
You could just use:
[B].menu [/B]{position:relative;font-family:Arial, Helvetica, sans-serif;font-size:16px;}/*for IE7*/
Simple is usually best (and is also quicker).
It’s quite awkward to change now because you would need to be careful with which rules apply to which menu.
yea that makes sense. I may try to tackle it in the future. But for now I need to focus on getting my store up 100% with all products. I appreciate the help and feedback.
Lorne