Archived topic
Trying to create right-aligned horizontal submenu
5 replies · Started by Robert on November 17, 2022
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.1
Any thoughts?
The test site (just for a few elements, not the main server) is here:
http://robminto-test.site/
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 :)
