- This topic has 5 replies, 2 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
Hi
I’m trying to create a horizontal submenu, with items aligned right, like this:
| LOGO menu1 menu2 menu3| | subitem1 subitem2|where subitem1 and 2 appear when menu 1 is clicked.
I’ve tried the CSS on here
https://generatepress.com/forums/topic/submenu-dropdown-change-from-vertical-to-horizontal/I’ve also tried some other, simpler css, from stackoverflow but no joy.
I’ve tried a couple of menu plugins (mega menu etc) but they don’t seem to want to work, either.
I’ve got generatepress running (premium) with no other plugins at the moment.
Theme Version: 3.2.2
GP Premium Version 2.2.1Any thoughts?
The test site (just for a few elements, not the main server) is here:
http://robminto-test.site/Customer Support
Try this CSS:
.dropdown-click .main-navigation ul.toggled-on, .dropdown-click .main-navigation ul li.sfHover > ul.toggled-on { display: flex; }Hiya
Thanks, that’s pretty close. I was hoping to get the submenu covering the full container width, but that’s a start.
For me, the submenu was positioning too far to the right, so I added left: -150%; which helped.
.dropdown-click .main-navigation ul.toggled-on, .dropdown-click .main-navigation ul li.sfHover > ul.toggled-on { display: flex; left: -150%; margin-top: 20px }In terms of design, I was trying to get the submenu to stretch 1366px – the full container width, with elements lined up underneath, like this (see image attached.)
Change your CSS attached here: https://generatepress.com/forums/topic/trying-to-create-right-aligned-horizontal-submenu/#post-2420415 to:
@media (min-width: 769px) { .main-navigation .main-nav >ul >li,.inside-navigation.grid-container { position: initial; } .dropdown-click .main-navigation ul.toggled-on > li, .dropdown-click .main-navigation ul li.sfHover > ul >li.toggled-on { width: fit-content; } .dropdown-click .main-navigation ul.toggled-on, .dropdown-click .main-navigation ul li.sfHover > ul.toggled-on { display: flex; position: absolute; left: 0; width: 100%; justify-content: flex-end; } }Amazing! Thank you so much.
You are welcome 🙂
- You must be logged in to reply to this topic.
