Centered horizontal menu - is it possible?

[Korvell]

Seriously - isn't it possible to center a horizontal menu somehow? I've been messing with CSS for days trying to figure out how to center the menu line in my template and am stuck.

This is a test setup with the template: http://terapitest.ooz.dk/

The only way I can make it work at the moment is to manually add space to the left of the menu line, but that will of course be messed up when adding/removing menu items.

Does anyone have ideas/suggestions how to do it? Is it possible at all? I actually don't recall having seen any centered horizontal menus in any CMSimple template.

- Korvell

[cmb]

Seriously - isn't it possible to center a horizontal menu somehow?

Yes, it is. You have to do the following:

Code: Select all

#nav ul {
    text-align: center;
    /* float: left; */
}
li {
    display: inline-block;
    /* float: left; */
}

The biggest problem with this approach: it is likely going to fail in older browsers. The only browsers still in somewhat widespread use that can't handle it are probably IE 6 and IE 7. However, even Microsoft has dropped support for IE 6 recently, and the usage of IE 7 is pretty low (some say < 1%; others claim it to be higher [sorry, I can't find the reference I found yesterday]).

However, that is not really a problem, IMHO. Every user who has to use such old browser (for whatever strange reason), should be aware that there may be problems on many websites nowadays. They should know how to disable CSS altogether--and then the site will (or at least should) be usable.

[Korvell]

Thanks Christoph. I just can't seem to get that to work.
To avoid any misunderstanding, this is what I would like:
[ external image ]

[cmb]

To avoid any misunderstanding, this is what I would like:

Yes, that is what I thought.

Just try the following templates/terapi/includes/nav1.css, which has exactly the desired result (tested in Chrome 36):

Code: Select all

#navcontainer {
	height: 28px;
}

#nav, #nav ul {
    text-align: center;
	text-transform:uppercase;
	list-style: none;
	line-height: 1;
	font-weight: normal;
	padding: 0;
	margin: 0;
	text-align: center;
}

#nav a {
	display: block;			/* make sure menu block is all full height */
	color: #fff;			/* color of menu text */
	text-decoration: none;
	padding: 0 8px;		    /* space around each menu item */
	line-height: 27px;		/* hight of menu lines block */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;		/* text size of menu item text */
	font-weight: normal;
}

.menulevel1 a {
/*	background-color: #888;	/* background color of inactive menu items */

	margin-right: 1px;		/* space between each block of main menu item */
	-webkit-transition: background-color 0.2s linear;
	-moz-transition: background-color 0.2s linear;
	transition: background-color 0.2s linear;
}

.menulevel2 a {
	width: 170px !important;	/* length of submenu level 2 block */
}

.menulevel3 a {
	width: 170px !important;	/* length of submenu level 3 block */
}

.menulevel1 a:hover {
	background-color: #f00		/* background color of hovered menu level 1 item */
}

/* makes the menu horizontal */
#nav li {
	/*float: left;*/
	text-align: left;
	padding: 0;
	display: inline-block;
}

/* hide unselected level 1 submenus */
#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 13.4em;
	font-weight: normal;
	margin: 0;
}

#nav ul ul {
	z-index: 2 !important;
	width: 299px;
	padding-top: 4px;		/* space between menu level 1 and 2 */
}

#nav li ul ul {
	margin: -32px 0 0 180px; /* position of submenu level 3 relative to level 2 */
}

/* hide unselected level 2 submenus */
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto; 
	min-height: 0;
}

[Korvell]

Wow that works - Txh so much!
Now I just need to make adjustments so that submenus show correctly because now they are quite messed up...

As always I'm impressed by the quality of support

- Korvell

[cmb]

Now I just need to make adjustments so that submenus show correctly because now they are quite messed up...

Um, that might be really tricky. I just tried a bit, but didn't succeed. Perhaps there are some ideas on http://www.cssplay.co.uk/menus/.

If you don't need the dropdown menu, the basic solution would be extremly simple. template.htm:

Code: Select all

        <div id="nav"><?php echo toc(1,1), toc(2,2), toc(3,3);?></div>

stylesheet.css:

Code: Select all

#nav ul {
    text-align: center;
}
#nav li {
    display: inline-block;
    margin: 0 1em;
}

[Korvell]

I managed to get the menu working by messing around with various css codes. Now it works like I want. But I couldn't have done it without your help
http://terapitest.ooz.dk/
Only minor issue is that the submenus of the last menu "Test" extends the "window" of the site. But that's a minor problem.

[cmb]

I managed to get the menu working by messing around with various css codes.

That's really nice! Will you keep http://terapitest.ooz.dk/ available? It is a nice case study of a horizontally centered drop-down menu.

Only minor issue is that the submenus of the last menu "Test" extends the "window" of the site.

It would be possible to place the 3rd level menus of the last toplevel item to the left of the 2nd level ones:

Code: Select all

#nav li.nave ul ul {
    margin-left: -180px;
}

(needs some fine tuning, though)

[Korvell]

Nice touch - Thx
I'll let the test site stay for a while and keep polishing the template.

[svasti]

Maybe I come a bit late into this discussion. I also had the problem of a centered menu and finally got it to work.
The example is here
Also did a mini1 version with centered drop-down menu, just for fun, it's only on my localhost.

Your example has come out quite nice, especially that the last 3rd level goes to the left. However, if I understand correctly, this is not automatic but you have to give the class .nave manually? An automatic solution would be interesting for responsive layouts.

svasti