[Resolved] Custom Menu Layout

Home Forums Support Custom Menu Layout

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #1428157
    Fredrik

    Hello,

    I’m not sure where to look for documentation regarding this, so I feel I should ask.

    Trying to create a basic design sticky menu after abandoning mega menu plugins, the layout of the menu should look something like this: https://prnt.sc/uadygl

    Basically two issues to start with.

    1. The whole area (as specified in the image) header/nav should be sticky. E.g. logo should not be left behind.

    2. The logo/site title should center align over the primary nav.

    I feel like this is something more doable with GP after moving away from the mega menu. So any suggestion on how to best structure a menu like this would be helpful. Thx!

    #1428398
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Definitely going to take a little custom code to get there, I think.

    Can you add your site title/logo to the page so we can play with the CSS a little?

    #1428405
    Fredrik

    Hello Tom,

    Sure thing! I added the site title.

    Thx!

    #1429586
    Tom
    Lead Developer
    Lead Developer

    Can you also re-add the secondary navigation as you had it before? We’ll need to have both active in this case so we can have the menu items up above inline with your title, and then the menu items below it as well.

    #1429609
    Fredrik

    Hello Tom,

    I added the secondary navigation also 🙂

    I realized you could add the logo above the primary navigation, like so.

    .navigation-branding {
    		display: block;
    		width: 100%;	
    	}
    }

    But that’s only half a solution.

    #1429669
    Fredrik

    So I added,

    	#site-navigation + .secondary-navigation {
    		position: -webkit-sticky;
    		position: sticky;
    		left: 0;
    		right: 0;
    		top: 60px;
    	}
    }

    I figured you were going in this direction anyway.

    Now to align the “navigation search”, “cart”, “off-canvas menu” “main title” in the primary navigation. Thx.

    #1429894
    Tom
    Lead Developer
    Lead Developer

    Getting closer!

    Now we can center your navigation branding:

    .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    And re-order the items:

    #menu-poster-clan-menu {
        display: flex;
    }
    
    .slideout-toggle {
        order: 1;
    }
    
    .search-item {
        order: 2;
        margin-right: auto;
    }
    
    .wc-menu-item {
        order: 3;
    }
    #1429916
    Fredrik

    Great stuff! Thank you!

    One interesting thing happened on mobile:
    https://prnt.sc/ub4uyi

    Duplicates of the,

    .slideout-toggle
    
    .search-item
    
    .wc-menu-item
    #1429930
    Tom
    Lead Developer
    Lead Developer

    Try adding this as well:

    #site-navigation .mobile-bar-items, 
    #site-navigation .menu-toggle {
        display: none;
    }
    #1429952
    Fredrik

    Ah, I see. Fixed that.

    Another thing I didn’t notice at first. The hamburger menu end up in the middle of the search bar hiding the text you type in. https://prnt.sc/ub571j

    #1430997
    Tom
    Lead Developer
    Lead Developer

    That’s a tough one – what would you like the search icon to do when toggled? Move to the right? Have the search area drop down below the header?

    #1431081
    Fredrik

    I was thinking of a slide-out or pop down type of thingy like this:

    https://prnt.sc/ubnrz7

    If that’s not doable, add a hook in the nav and have something like this if possible:

    https://prnt.sc/ubo6sg

    Either way, it has to be something user-friendly that works.

    Also, every tried having post/products show up as suggestions dynamically while entering a search?
    Looking to add that as a future feature. To give you an idea try searching this site for instance: https://www.uniqlo.com/us/en/home/

    Thx 🙂

    #1431093
    Fredrik

    I realized a hook would probably not be a great experience on mobile.

    Just a simple overlay would be the best solution in this case. https://drive.google.com/file/d/1_YWwfcrZGeXrxFkRacyDfMm1pgL0l3xB/view

    #1431210
    Elvin
    Customer Support

    Hi,

    Were you able to achieve the preferred UI?

    If I may add more, you can add this CSS so the close button doesn’t block the search input area.

    @media (max-width:768px){
    .main-navigation li.close-search {
        position: absolute !important;
        right: 0;
    }
    }

    here’s a demo of how it will look like.
    https://share.getcloudapp.com/d5uEXLXA

    This will only apply on mobile. If you want it to stay at the left side, you can just remove “right:0;”.

    Also, every tried having post/products show up as suggestions dynamically while entering a search?
    Looking to add that as a future feature. To give you an idea try searching this site for instance: https://www.uniqlo.com/us/en/home/

    I believe you can already do this by installing some sort of an AJAX search plugin.
    You might wanna look more into it.:)

    Hope this helps.

    Cheers.

    #1431260
    Fredrik

    Hello Elvin,

    Thanks for your suggestion, one thing to note is that the problem is also on desktop.

    https://drive.google.com/file/d/1Hgi3KIIVJUaOzG60x7Mqptj2mHVc1GO-/view

    So when adding:

    .main-navigation li.close-search {
        position: absolute !important;
        right: 0;
    	}
    }

    It kind of fixes the problem, both on mobile and desktop. But on desktop, you want to keep the toggle on the left side because it’s more user-friendly and accessible.

    But doing so causes another problem. When the close button is aligned to the left it covers the text once again.

    https://drive.google.com/file/d/1O1FtXObyopIKR1uw5WErD0uvlf0R5PVi/view

    So I guess some more dev is needed to fix this. Definitely a tough one for something so light.

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