Sridhar Katakam

Genesis and WordPress Tutorials

Horizontal Submenu in Genesis

by 7 Comments

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

Screencast:

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;
    }
}

Screenshot of the menu in the backend:

Reference:

https://sridharkatakam.com/accessing-parentancestor-menu-item-hovering-submenu-items-genesis/

  • I have added a mega menu (horizontal menu) to one of my genesis sites, and I notice there is a problem with the hover tunnel zone, if the mouse is not guided straight down, then the submenu hovering disappears. I have read of several fixes for this, including increasing the hover zone with css, what would you suggest? Is this a good idea and how would implement it?

    Reply

    • This is the reason why horizontal submenus aren’t widely used.

      If the submenu only has links in a single row it can become difficult to reach the menu items.

      This is not so much of an issue if the submenu has several columns and is 100% wide. i.e., a large action area so it won’t keep getting closed.

      Can you provide the URL of the site?

      Reply

  • You were right, with one row there was a problem, but I expanded that item with another row, and yes, it seems to be working fine now, thank you for your insight!

    Reply

  • Hi Sridhar,

    thanks for this solution but I also have trouble with the hover area as Carin mentioned.
    Is there any fix for this issue without adding a second row? smartphonepiloten.de

    Thanks & best regards,
    Jannik

    Reply
    • >