[Resolved] Vertical navigation sub menu items

[Michael]

Hi, I am trying to use right side sub menu items with a vertical navigation.

I used the CSS from this post https://generatepress.com/forums/topic/submenu-customization-with-leftside-navigation/ as a starting point with one very minor modification that I commented out as I didn’t want the sub menu full height.

/* Navigation sub item slide out direction */
@media (min-width: 1025px) {
   .site-header {
        overflow: visible;
    }
	.site-header .main-navigation li a:before {
    content: "";
    position: absolute;
    width: 60px;
    height: 100%;
    top: 0;
    left: 100%;
	}
    .main-navigation:not(.toggled) ul li.sfHover>ul, .main-navigation:not(.toggled) ul li:hover>ul {
        left: 200px;
        display: flex;
        flex-flow: column nowrap;
        top: 0;
    }
    .main-navigation:not(.toggled) ul li.sfHover>ul:before, .main-navigation:not(.toggled) ul li:hover>ul:before {
        content: "";
        background-color: #000000;
        z-index: 0;
        position: absolute;
        top: -100vh;
        left: 0;
        width: 240px;
        /*height: 200vh; */
    }
	.gp-icon.icon-arrow {
	 	transform: rotateZ(270deg);
	  	top: 3px;
	  	position: relative;
	}
}

Issue one – is the submenu items at the top of menu i.e “About” and “Hair Bar” are very difficult to hover to the sub menu items. Whereas the main level items down the middle of the menu work properly.

Issue two – I would like a gold sub menu left border like the original site I’m converting (Find URL is up in top bar), when you hover to sub menu the gold border activates with the sub menu.

[Elvin]

Hi there,

Try adding this CSS so the hover area is larger to keep the hover state intact for a better UX w/ the shorter menu items.

.inside-header.grid-container {
    padding-left: 0;
    padding-right: 0;
}

.inside-navigation.grid-container {
    flex-direction: column;
}

nav#site-navigation,
div#primary-menu,
.main-nav li {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100%;
    text-align: center;
}

[Michael]

Thanks, that is a lot better for the hover issue!

What about the gold border?

[Elvin]

Try adding this for the left gold border for submenus:

ul.sub-menu {
    border-left: 2px solid var(--accent);;
}

[Michael]

Great, thanks!

[Elvin]

No problem. 😀

[Author]

Posts