[Resolved] Vertical navigation sub menu items

Home Forums Support [Resolved] Vertical navigation sub menu items

Home Forums Support Vertical navigation sub menu items

  • This topic has 5 replies, 2 voices, and was last updated 1 month ago by Elvin.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2051559
    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.

    #2051569
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

    #2051697
    Michael

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

    What about the gold border?

    #2051708
    Elvin
    Staff
    Customer Support

    Try adding this for the left gold border for submenus:

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

    A wise man once said:
    "Have you cleared your cache?"

    #2052426
    Michael

    Great, thanks!

    #2053976
    Elvin
    Staff
    Customer Support

    No problem. 😀

    A wise man once said:
    "Have you cleared your cache?"

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.