Archived topic
Opening the “click” dropdown items to the right
3 replies · Started by Michael on February 1, 2022
Hi All,
I'm running into an issue with being able to opening the "click" dropdown items to the right.
I'm running the following in a multisite configuration:
- GeneratePress 3.1.0 as the parent
- GeneratePress Child theme
- GP Premium 2.1.1
I have created a standard primary menu with subitems and followed the instructions to open the "click" dropdown items to the right documentation but I can't seem to get it to work.
Below are the steps I followed:
- In the Customizer > Layout > Primary Navigation I have Navigation DropDown field set to Click - Menu Item.
- I copied the code from the documentation linked above and placed it into the Additional CSS field in the Customizer
- I flushed the cache but the CSS doesn't seem to have the desired effect
In the private window I have linked you to a 1-minute mp4 that illustrates the issue I'm having. Thank you for your input.
Best,
Mike
Hi Mike,
Can you change this CSS:
.dropdown-click .main-navigation ul ul ul,
.dropdown-click .secondary-navigation ul ul ul {
left: 100%;
top: 0;
position: absolute;
}
to:
.dropdown-click .main-navigation ul ul ul,
.dropdown-click .secondary-navigation ul ul ul {
left: 100% !important;
top: 0 !important;
position: absolute !important;
}
.dropdown-click nav ul ul ul {
background-color: #eeeeee;
}
As you are using SVG on the site, so this CSS won't work, it can be removed.
.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";
}If you'd like to change the arrow icon, try this snippet:
https://docs.generatepress.com/article/generate_svg_icon_element/
Perfect Ying! Thank you again for your help. Much appreciated.
No problem :)
