[Resolved] Help creating a navigation – top bar layout

Home Forums Support Help creating a navigation – top bar layout

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #987626
    Roberto Enrique

    Recently I found a website with a navigation layout I would really like to reproduce in GP
    the website is this one:
    https://www.mecontroteshop.it/

    So far I’m trying to do it using the “navigation as header” option but the aligning options in the customizer are not sufficient.

    I would like a suggestion on how to accomplish a layout like this:

    General layout

    The header should be like:

    Example 1

    Regarding the icons, i don’t really know if is better to handle them using right aligned menu items or with custom coded icons.

    I really like the possibility of having the login information (which transform in user menu if logged), the search as dropdown and the minicart as drop-down as well.

    – – – – –

    Thanks in advance for any suggestion to acchieve this look.

    #987758
    David
    Staff
    Customer Support

    Hi there,

    so for the navigation alignment, tricky but we could try this.
    1. Set Navigation as header.
    2. Add a custom CSS Class of push-right to the Login menu item.
    3. Add this CSS:

    @media (min-width: 769px) {
        .navigation-branding {
            /* Equal total width of aligned right menu items */
            width: 146px;
        }
    
        .main-navigation:not(.slideout-navigation) .main-nav {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }
    
        .main-navigation:not(.slideout-navigation) .main-nav>ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }
    
        .main-navigation:not(.slideout-navigation) .main-nav ul>li:first-child,
        .main-navigation:not(.slideout-navigation) .main-nav ul>li.push-right {
            margin-left: auto;
        }
    }

    Note that you will need to set the navigation-branding width to match the total width of the elements you want aligned right.

    See example here:
    https://woo.assemblewp.com

    Check out the User Menus plugin this will allow you to dynamically display Login menus as well as change the label of the menu item to a logged in users name etc.

    #987837
    Roberto Enrique

    Thank you as always, this is a perfect starting point.

    #988022
    David
    Staff
    Customer Support

    Awesome – glad to be of help

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