[Resolved] Opening the “click” dropdown items to the right

[Michael]

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

[Ying]

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/

[Michael]

Perfect Ying! Thank you again for your help. Much appreciated.

[Ying]

No problem 🙂

[Author]

Posts