WebsiteBaker Support (2.8.x) > Templates, Menus & Design

Solution how to center a horizontal Show_Menu2 menu (all css 2)

(1/2) > >>

Boudi:
Hi there,

On several topics I read there were problems regarding centering a horizontal menu but no solutions.

I did some testing on the SM2 menu of the ALL CSS 2 template and found the solution.

Go to the css and find:


--- Code: ---#nav {
height: 1.68em;
background: #666;
border-top: 0;
border-bottom: 1px solid #000;
padding:0;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 81%;
text-transform: uppercase;
width: auto;
--- End code ---


Change it into:


--- Code: ---#nav {
height: 34px;
float:right;
position:relative;
        left:-50%;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 11px;
width: auto;
left:50%;
--- End code ---

There are 2 real changes (forget the other ones. They're just personal changes):

In #nav put this code:

float:right;
position:relative;   
left:-50%;

In #nav ul put this code:

left:50%;

If you use submenu's then just put in the 2nd Child menu under #nav .menu li ul the following:
left:-25%;

With the submenu's it's just playing with the "left" css style.

Hope this helps for you.

Boudi

Argos:
I didn't try, and just out of curiousity: isn't it also possible to just add a container DIV around the nav, with style "text-align: center"? Or with style "margin: 0 auto"?

Boudi:

--- Quote ---isn't it also possible to just add a container DIV around the nav, with style "text-align: center"? Or with style "margin: 0 auto"?
--- End quote ---

First I thought it was indeed that simple but it isn't. I already tried your solutions too but the <div> solutions don't work. They will be overwritten by the css. Besides that you have to deal with the submenu's too when you center the whole thing because they have seperate css calls.

I have a working example [here] (still in testmodus). As you see it's fully centered and the submenu's are too. (even tested with sub-submenu's and that worked great)

Boudi

Argos:
Nice work! I actually never thought about centering a menu, but it looks nice for a change. How would it look to center the text within the LI's as well? Nice, or a bit messy?

Boudi:
Thnq :)

I'm not sure to center the text too. I think I leave it this way but may be I'm thinking different this afternoon *lol*  :lol:

Well I acutally build the (external) webshop first. The menu of this shop is centered. After that the client wanted the website build with the same style as the webshop. So I had to center the menu too. So this website and webshop are completely 2 different scripts (WB and Cubecart) but overall they share the same look :)

Navigation

[0] Message Index

[#] Next page