Archived topic
Site Title centered, Menu (Hamburger) left, Different menu (login) right.
9 replies · Started by Reed on April 7, 2020
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