[Resolved] Need sub menu on click as it looks on hover?

[Bob]

Hi GP peeps,

I have been searching the forum but cannot seem to find an answer to my needs.

I have a pretty standard menu, with sub menus I want to display on click to the right. When in hover mode, it is absolutely perfect, but on-click with the CSS code below causes the sub menu to be shifted right with blank spaces to the left and the background seems to be transparent (the menu items only appearing once I hover over them).

Is there a way to get the on-click to look exactly like it does on hover please?

The code I tried is below, but as mentioned above, I don’t appear to be doing something right.

Appreciate any help you can give me 🙂

Thanks & kind regards

Bob

.dropdown-click .main-navigation ul ul ul,
.dropdown-click .secondary-navigation ul ul ul {
left: 100% !important;
top: 0;
position: absolute;
}
.dropdown-click .main-navigation ul ul .dropdown-menu-toggle:before,
.dropdown-click .secondary-navigation ul ul .dropdown-menu-toggle:before,
.dropdown-click .main-navigation ul ul .menu-item-has-children.sfHover>a .dropdown-menu-toggle:before {
content: “\f105”;
}

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

in Customizer > Layout > Primary Navigation you can select Navigation Drop Down options, which includes two click options… Let em know

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Bob]

Hi David,

Yes I found those thank you, however I may not have explained it properly. When Hover is selected, the sub menu flies out to the right showing the subs with no spaces on the main section of the dropdown.

But IF I select either of the other options, the main dropdown has gaps where the sub items are meant to be and although it shifts them to the right, the background appears to be transparent (despite being correct in colour settings) and they seem invisible until hovered over?

I’m puzzled – Have attached link to example of what I get when I use the CSS. Hope this helps explain it.

Thanks….. Bob

https://drive.google.com/file/d/1WDcxJh9Eh3o8CuKwPA9X0Bdd2WhVnoTQ/view?usp=sharing

[David]

Sorry i am having one of those days lol – i made a screen recording to show you what i am currently seeing…

https://www.useloom.com/share/40f346799b5b4479b36a4e9bde9863ab

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Bob]

Sorry David,

My fault, published the change now so you can see 🙂

[David]

Aah ok – need more coffee. Try this CSS:

.dropdown-click .main-navigation ul ul ul, .dropdown-click .secondary-navigation ul ul ul {
    left: 100% !important;
    top: 0 !important;
    position: absolute !important;
    background-color: #777; /* change color */
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Bob]

You, Sir, are a genius! – no coffee required!

Thank you so much! Works great!

[David]

Glad we got there in the end 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ben]

I’m using the CSS that David provided above, and it works well on the main menu. However it also appears to break the slideout menu… It stops you from opening a sub-menu within a sub-menu. Is it possible to restrict the above CSS so that it only has any effect on the main menu, and not the slideout menu?

Thanks!

[Tom]

Can you try replacing .main-navigation in his code with this: .main-navigation:not(.slideout-navigation)?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ben]

Perfect, thank you Tom!

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts