[Resolved] submenu dropdown change from vertical to horizontal

[cliqous]

how to make the submenu appear on a horizontal arrangement and not in a vertical arrangement?

please visit website sample http://www.samoo.com/.
when you hover your mouse pointer on “SERVICES” it will
show the list which are arranged side by side, not on top of each other.
that is the submenu format that i want to achieve.

[Roberto Enrique]

That could be a nice feature.

[Tom]

Good idea – I should be able to whip up some CSS in the morning.

Stay tuned! 🙂

[Roberto Enrique]

awesome 🙂

[Tom]

Give this a go: https://gist.github.com/generatepress/fc710ced4501566999fc

[Ben Foo]

Hi Tom,

I’m new to CSS. Where do I place the CSS that you have created above in, to make my menu horizontal instead of vertical?
And: do I use the revision or the original one? Thank you for your help in this.

Best Regards,
Ben Foo

[Roberto Enrique]

Try this:

https://wordpress.org/plugins/simple-css/

then copy+paste this:

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

body .main-navigation ul.menu > li > ul {
	width: 100%;
        left: 0 !important;
}

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

body .main-navigation ul.menu > li > ul > li ul {
	left: 0;
	top: 100%;
}

• This reply was modified 7 years, 1 month ago by Tom.

[Ben Foo]

Fantastic!
Thanks Roberto and Tom!
Anyway, if I want to revert to a vertical menu, I’ll just need to delete the particular CSS ive saved in simple CSS and press “Save CSS” right?

Best Regards,
Ben

[Roberto Enrique]

Exactly!

[Ben Foo]

Thanks Roberto! Sorry for the late reply though.

[Ben Foo]

Hi Tom,

The submenu dropdown is changed from vertical to horizontal. It was working fine, until a while ago when the submenu gets broken up. You cannot see the whole submenu but have to scroll to the left or right if you want to see the whole thing.
How do i remedy in such a way that i can see the whole submenu without scrolling to the left or right?
Thanks again.

Best Regards,
Ben

[Tom]

Edited the code – should be working again 🙂

[Miha]

Hi there,

first of all I really apriciate all your efford supportwise.

I would like to knew how could I arange thic code to made horizontal alignment of submenu with option to add some pictures?

Like on this page:
https://dewesoft.com/

Kind regards.

Miha Oblak

[Tom]

You’ll likely need a mega menu plugin in order to add pictures to your sub-menus.

[Miha]

The text alignment under the sub menu by default is on left, how could I change it on center?

Take care.

[Author]

Posts