Navigation Dropdown

The Navigation Dropdown option can be found in Appearance > Customize > Layout > Primary Navigation.

This option allows you to choose how your navigation dropdown menu is initiated.

Hover

The hover option makes it so your dropdown menu appears when you hover over the parent menu item.

Click – Menu Item

This option makes it so you have to click the entire menu item in order for the dropdown menu to appear. This disables the parent menu item link, as clicking only opens the dropdown menu.

Click – Arrow

This option makes it so you have to click the dropdown menu arrow in order to open the dropdown menu. This option is good if you want to keep the parent menu item link.

Dropdown Direction

Starting in GeneratePress 2.2, you can now change the direction of the sub-menu when you’re using a regular hover dropdown type.

It’s possible to change the speed and transition of the dropdown menu when you hover over the parent menu item.

.main-navigation:not(.toggled) ul ul {
    transition: opacity 0ms linear;
}

.dropdown-hover .main-navigation:not(.toggled) ul li:hover > ul {
    transition-delay: 0ms;
}

Opening the “click” dropdown items to the right

By default, sub-menus that appear on hover are opened to the right. However, sub-menus that appear on click open vertically.

To make them open to the right just like the hover dropdowns, you can use this CSS:

.dropdown-click .main-navigation ul ul ul, 
.dropdown-click .secondary-navigation ul ul ul {
    left: 100%;
    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";
}

Open sub-menus to the left

In some cases you might need the dropdown menu to open to the left, especially if your navigation is floating right and you don’t have enough space at the right side of the screen for them to open.

You can do this with some CSS:

.main-navigation:not(.toggled) ul ul {
    left: auto;
    right: 0;
}

.dropdown-hover .main-navigation:not(.toggled) ul ul li:hover>ul {
    left: auto;
    right: 100%;
}

.main-navigation .main-nav ul ul li.menu-item-has-children > a {
    padding-left: 0;
    padding-right: 20px;
}

.main-navigation ul ul .menu-item-has-children .dropdown-menu-toggle {
    float: left;
    padding-left: 20px;
    padding-right: 15px;
}

.main-navigation .children .dropdown-menu-toggle:before, 
.main-navigation .sub-menu .dropdown-menu-toggle:before {
    content: "\f104";
}

Opening specific sub-menus to the left

If you don’t want to open all sub-menus to the left (above), you can apply this to specific sub-menus only.

First add open-left to the Custom Classes field for the far right menu item.

Then add this CSS:

.dropdown-hover .main-navigation:not(.toggled) ul .open-left ul {
    left: auto;
    right: 0;
}

.dropdown-hover .main-navigation:not(.toggled) ul .open-left li:hover>ul {
    left: auto;
    right: 100%;
}

.main-navigation .main-nav ul .open-left ul li.menu-item-has-children > a {
    padding-left: 0;
    padding-right: 20px;
}

.main-navigation ul .open-left ul .menu-item-has-children .dropdown-menu-toggle {
    float: left;
    padding-left: 20px;
    padding-right: 15px;
}

.main-navigation .open-left .children .dropdown-menu-toggle:before, 
.main-navigation .open-left .sub-menu .dropdown-menu-toggle:before {
    content: "\f104";
}

If you are using the SVG icon type, then this CSS is also needed:

.dropdown-hover .open-left .sub-menu .dropdown-menu-toggle .gp-icon svg {
    transform: rotate(90deg);
}