submenu dropdown change from vertical to horizontal

This topic has 21 replies, 7 voices, and was last updated 6 years, 9 months ago by David.

Viewing 15 posts - 1 through 15 (of 22 total)

1 2 →

Author

Posts
May 20, 2015 at 8:37 pm #109250

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.

May 20, 2015 at 10:18 pm #109261

Roberto Enrique

That could be a nice feature.

May 20, 2015 at 11:23 pm #109275

Tom
Lead Developer
Lead Developer

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

Stay tuned! 🙂

May 21, 2015 at 12:07 am #109295

Roberto Enrique

awesome 🙂

May 21, 2015 at 8:51 am #109377

Tom
Lead Developer
Lead Developer

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

April 7, 2016 at 1:59 am #184906

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

April 7, 2016 at 2:09 am #184907
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 9 years, 11 months ago by Tom.
April 8, 2016 at 2:18 am #185245

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

April 8, 2016 at 3:01 am #185259

Roberto Enrique

Exactly!

April 14, 2016 at 10:23 pm #186959

Ben Foo

Thanks Roberto! Sorry for the late reply though.

January 16, 2018 at 1:44 am #471982

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

January 16, 2018 at 9:47 am #472435

Tom
Lead Developer
Lead Developer

Edited the code – should be working again 🙂

May 29, 2019 at 11:00 pm #914977

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

May 30, 2019 at 8:05 am #915429

Tom
Lead Developer
Lead Developer

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

June 6, 2019 at 4:40 am #921445

Miha

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

Take care.
Author

Posts