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

[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

[David]

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.

[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

[David]

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

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

[Reed]

Got it, thanks.

And how do I create the layout as you mentioned?

[David]

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

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

[David]

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;
}

[Reed]

Perfect thanks!

[David]

You’re welcome

[Author]

Posts