Site logo

Archived topic

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

9 replies · Started by Reed on April 7, 2020

Viewing posts 1–10 of 10

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

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.

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

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

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

Got it, thanks.

And how do I create the layout as you mentioned?

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

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.

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

Perfect thanks!

You're welcome

This archived topic is closed to new replies.