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

    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.

    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:

    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.

    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.