Horizontal Submenu in Genesis

Looking to display submenu items horizontally when a menu item is hovered upon in Genesis?

We can set the .sub-menu to be 100% wide and anchored to the right so the submenu items appear full width with the first item in the submenu aligned at the left edge of the screen.

The trick to make the first item in the submenu align with the first item in the main navigation is to give it a padding equal to viewport width minus half of the wrap width. This can be done via

padding-left: calc(50vw - (1280px/2) )

where 1280px is the width of the wrap.

Tested in Genesis Sample 2.3.0 with a nav menu assigned to “After Header Menu” (or Primary Navigation) theme location. Should work with a few adjustments in any Genesis theme.

Add the following in child theme’s style.css:

@media only screen and (min-width: 1024px) {
    .genesis-nav-menu li a:hover {
        text-decoration: none;
    }

    .genesis-nav-menu > li:hover > a,
    .genesis-nav-menu > li > a:hover {
        color: #106ccc;
    }

    .genesis-nav-menu .sub-menu {
        right: 0;
        width: 100%;
        padding-left: calc(50vw - (1280px/2) ); /* where 1280px is the width of the wrap */
        border-top: none;
        background-color: #106ccc;
        font-size: 0.001px; /* to get rid of the horizontal gap between menu items */
    }

    .genesis-nav-menu .sub-menu a {
        border: none;
        color: #fff;
        background-color: transparent;
    }

    .genesis-nav-menu .sub-menu a:hover {
        background-color: #0c539d;
    }
}
This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.