January 15, 2018 by Sridhar Katakam Looking to display submenu items horizontally when a menu item is hovered upon in Genesis?
@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;
}
}
https://sridharkatakam.com/horizontal-submenu-genesis/
https://sridharkatakam.com/accessing-parentancestor-menu-item-hovering-submenu-items-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.
padding-left: calc(50vw - (1280px/2) )
where 1280px is the width of the wrap.
Menu Settings:
Display Location - After Header Menu