[Resolved] Site Title centered, Menu (Hamburger) left, Different menu (login) right.

Home Forums Support Site Title centered, Menu (Hamburger) left, Different menu (login) right.

  • This topic has 9 replies, 2 voices, and was last updated 12 months ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1230778
    Reed

    Hi guys,

    I am looking to make my current site draft (https://toolkit.frugalflyer.ca) look more like this (https://www.keepproductive.com/), whereby the site title is aligned with the navigation.

    The other challenge is I would actually like to remove the search bar, and replace it with a different menu (LOGIN+REGISTER).

    Also I should mention that ideally I need the solution to facilitate swapping the site title for a logo, as this will likely be done at some point in the future.

    Thanks in advance for your help.

    Reed

    #1231218
    David
    Staff
    Customer Support

    Hi there,

    If you can do the following then i can provide some CSS:

    1. in Customizer > Layout > Primary Navigation – can you set the Navigation to Float right – this will place it inside the Header.

    2. You can use a Hook Element to insert your Login button.
    We want that in the Navigation too – so select the inside_navigation hook

    Once there in place i can provide the CSS required for that layout.

    #1233549
    Reed

    Thanks David.

    I tried two different ways of adding buttons:

    <button type="button" href="#">Login</button>
    <a href="#">Register</a>

    Does it matter which one? I think the class inherits customizer styling better?

    Thanks,
    Reed

    #1233879
    David
    Staff
    Customer Support

    Either is good – if you include the button class in the anchor it will inherit the customizer styling:

    <a href="#" class="button">Register</a>

    #1234096
    Reed

    Got it, thanks.

    And how do I create the layout as you mentioned?

    #1234469
    David
    Staff
    Customer Support

    Can you set the Header and Primary Navigation to Full Width. And where do the the Toolkit and Legal menus go ?

    #1234517
    Reed

    Done

    Those menus stay as is – slideout.
    So hamburger on left. Login button on right. Vertically aligned with site title or logo in the middle.

    #1234999
    David
    Staff
    Customer Support

    Ok:

    1. Create a new Menu with no menu items – and assign this to the Primary Menu – this will remove the Toolkit and Legal menus from the desktop view.

    2. Then add this CSS:

    .site-branding {
        position: absolute;
        top: 20px;
        left: 50%;
        -webkit-transform: translatex(-50%);
                transform: translatex(-50%);
    }
    .main-navigation {
        width: 100%;
    }
    .inside-navigation {
        display: flex;
        flex-direction: row-reverse;
    }
    .main-nav, button.menu-toggle {
        margin-right: auto;
    }
    button.menu-toggle {
        order: 5;
        width: auto !important;
    }
    #1235468
    Reed

    Perfect thanks!

    #1236336
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.