- This topic has 11 replies, 4 voices, and was last updated 4 years, 11 months ago by Tom.
-
AuthorPosts
-
March 11, 2019 at 5:12 pm #836102Bob
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”;
}March 12, 2019 at 4:32 am #836417DavidStaffCustomer SupportHi there,
in Customizer > Layout > Primary Navigation you can select Navigation Drop Down options, which includes two click options… Let em know
March 12, 2019 at 5:05 am #836444BobHi 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
March 12, 2019 at 5:54 am #836508DavidStaffCustomer SupportSorry 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
March 12, 2019 at 5:57 am #836509BobSorry David,
My fault, published the change now so you can see π
March 12, 2019 at 6:09 am #836518DavidStaffCustomer SupportAah 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 */ }
March 12, 2019 at 6:23 am #836543BobYou, Sir, are a genius! – no coffee required!
Thank you so much! Works great!
March 12, 2019 at 6:30 am #836547DavidStaffCustomer SupportGlad we got there in the end π
April 12, 2019 at 1:56 pm #867486BenI’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!
April 12, 2019 at 4:55 pm #867552TomLead DeveloperLead DeveloperCan you try replacing
.main-navigation
in his code with this:.main-navigation:not(.slideout-navigation)
?April 12, 2019 at 6:18 pm #867593BenPerfect, thank you Tom!
April 13, 2019 at 7:22 am #867963TomLead DeveloperLead DeveloperYou’re welcome π
-
AuthorPosts
- You must be logged in to reply to this topic.