[Resolved] Help creating a navigation – top bar layout

[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:

The header should be like:

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.

[David]

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.

[Roberto Enrique]

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

[David]

Awesome – glad to be of help

[Author]

Posts