Site logo

Archived topic

Menu bar drop down arrows

5 replies · Started by Gary on January 12, 2017

Viewing posts 1–6 of 6

Is there a way to remove those unsightly down arrows from the menu, when you have sub menu items?

Hi Gary,

First add this CSS:

.menu-item-has-children .dropdown-menu-toggle {
    display: none;
}
.menu-item-has-children {
    padding-right: 20px; /*change this number*/
}

Then make sure the Left/Right Spacing number in Customizer > Layout > Primary Navigation is the same as the padding-right number above.

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

Let me know if this works.

Thanks, that almost works. Got rid of the arrows,but when you scroll over the menu items, the spacing looks wrong. I'm sure you'll see what I mean. http://belizedestinations.com/

Looks like you are using 19 in Left/Right Spacing in Customizer > Layout > Primary Navigation.
Therefore you need to change the padding-right to 19px in the code I provided above. Currently it's set to 39px.
Those two numbers need to be the same as I mentioned.

Let me know.

I put both the CSS and the left/right spacing at 27 and the scroll over colour is still cut off short wherever there's a drop down menu.

Try this code:

.menu-item-has-children .dropdown-menu-toggle {
    display: none;
}
.main-navigation .main-nav ul li.menu-item-has-children > a, 
.secondary-navigation .main-nav ul li.menu-item-has-children > a {
    padding-right: 20px; /*change this number*/
}
This archived topic is closed to new replies.