[Resolved] How to get horizontal Main and SubMenus and in the centre of the screen?

[kaburok]

Hi,
I was looking for a solution in the whole form, but unfortunately nothing was helping, My css and html programming skills are very low. But even I have the GB-Premium I could not solve the issue.
Well The inspiration came from Apple Website Mac.com. I would like to have just horzinatl menus and sub menus, this I could arrange, but just for the second menu thanks you css in one of the forums but I would like to
1- get Second Sub-Menu horizontal as well?
2- get the Main and all the submenus in full width AND centralized in the Middle of the page!

See link:

Hope to get this solved soon.

The css I have used:
/*horizontal sub-menu */
body .sf-menu > li {
position: static;
}
body .main-navigation ul.menu > li > ul {
width: 100%;
}
body .main-navigation ul.menu > li > ul > li {
width: auto;
}
body .main-navigation ul.menu > li > ul > li ul {
left: 0;
top: 100%;
}

/* enter aligning*/
.main-navigation ul ul {
width: 200px;
text-align: center;
}

[kaburok]

Ive got an email that Leo has replied but when I open the link I see just my created post with no reply?

[Tom]

Hi there,

Perhaps this will do it:

.sub-menu li {
    float: none;
    display: inline-block;
}

Let me know 🙂

[kaburok]

Hi Tom,

Great, one problem is solved. No the submenu is in the centre of the page.
But still I need to get the second submenu horizontal and in the centre of the page.

Thanks in advance 🙂

[Leo]

This should take care of both:

body .sf-menu > li,
body .sf-menu > li > ul > li{
	position: static;
}

body .main-navigation ul.menu > li > ul,
body .main-navigation ul.menu > li > ul > li > ul {
	width: 100%;
}

body .main-navigation ul.menu > li > ul > li,
body .main-navigation ul.menu > li > ul > li > ul > li {
	width: auto;
}

body .main-navigation ul.menu > li > ul > li ul {
	left: 0;
	top: 100%;
}
.sub-menu li {
    float: none;
    display: inline-block;
}

[kaburok]

Hi,

Waw it works thanks, but just found out that the submenu categories are not directly aligned under those from the main-manu, it looks like that the main.menu is not really in the centre. Its obviously because of the logo in the navigation task. Plus the search navigation size is full width and cover even the logo by the activation.

you can see it under the link posted above.
well, I still need your help.

thanks

[Tom]

Try adding this CSS:

@media (min-width: 769px) {
    .navigation-logo {
        position: absolute;
    }
}

[kaburok]

Yes, thanks to you both. Great support! 🙂

[Tom]

Glad we could help 🙂

[Author]

Posts