Archived topic

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

8 replies · Started by kaburok on September 9, 2017

Viewing posts 1–9 of 9

September 9, 2017 at 6:49 am #382270

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;
}

September 9, 2017 at 8:19 am #382337

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

September 9, 2017 at 10:42 am #382399

Hi there,

Perhaps this will do it:

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

Let me know :)

September 9, 2017 at 3:59 pm #382503

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 :)

September 9, 2017 at 4:26 pm #382512

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;
}

September 9, 2017 at 4:52 pm #382519

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

September 10, 2017 at 12:31 am #382607

Try adding this CSS:

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

September 10, 2017 at 4:03 am #382660

Yes, thanks to you both. Great support! :)

September 10, 2017 at 9:22 am #382803

Glad we could help :)

This archived topic is closed to new replies.

Start building better websites today.