Logo aligned left with hamburger menu and Secondary menu aligned right

[Ruben]

Hi there,

I’m trying to achieve something with the design of my header and menu. I thought it would be easier and it’s taking me forever trying different CSS codes here and there but no luck so far (my CSS knowledge is quite limited).

This is what I am trying to achieve:

On Desktop Version:

• A hamburger menu floating left all the time.
• The logo also on the left, next to the hamburger menu.
• A secondary menu floating right and containing Search and Cart icons.

Here’s a mockup: https://iili.io/26MaSt.jpg

On Mobile:

• Same hamburger menu floating left.
• Same logo to the left.
• Secondary menu with Search and Cart icons, the rest of items in slide-out menu.

Here’s the mobile mockup: https://iili.io/26MYlI.jpg

I have been able to relocate the Search and Cart icons in the Secondary menu using some code that I got from here in the support forum but I am having big trouble positioning everything where I want. Do you guys think there’s an easy way to achieve that layout?

Thanks a lot.

[David]

Hi there,

can you share a link to your site so i can see what you have so far?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ruben]

Hi David,

I am using Local by Flywheel for design and testing. I created a live link, I hope it works:

ffe1933889db.ngrok.io

When my logo is inline with the menus I cannot align it to the left.
On Mobile the secondary menu becomes a second hamburger menu.

[David]

Can you disable Autoptimize on the local site as its breaking the CSS.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ruben]

Yes, already disabled.

[Tom]

It looks like you’re using the old floats system – I think this would be easier if you switched to flexbox. Is that possible on this site?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ruben]

I just changed it to Flexbox in Customize > General > Structure.

Sorry, I know Flexbox is much better but I am a quite lost on how to use it properly.

[Tom]

Looks like the live URL expired – can you re-up it?

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ruben]

Yes, here’s the new link. I’ll try to keep it live.

139d8ce40c2f.ngrok.io

[David]

Sorry our time zones are all different so the link has expired again – could you update again… much appreciated.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ruben]

No problem. I figured it could happen 🙂

139d8ce40c2f.ngrok.io

[Tom]

Seems to have happened again – any chance you can throw the site up on a temporary staging server?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ruben]

Ok, I see it won’t work with a local site, sorry for the trouble.

I created a quick staging site on another website with a WPStaging. I hope this one is fine.

https://tallerescosme.com/staging-1/

[David]

Thanks for setting up the staging 🙂

So this is the base CSS you require to align those elements for destkop and mobile:

#masthead #site-navigation,
#masthead .mobile-menu-control-wrapper {
    margin-right: 10px;
}

@media (max-width: 768px) {
    .has-inline-mobile-toggle .inside-header {
        flex-wrap: nowrap;
    }
}

For the secondary navigation- how many menu items will there be ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ruben]

Hi David,

Thanks a lot, it worked perfectly. I really need to learn how flex works.

For the secondary navigation on mobile I left only the icons and added the text in the offcanvas menu as a Menu widget.

https://tallerescosme.com/staging-2/

Everything seems to work perfectly on desktop and mobile.

I know you guys get this a lot, but this support is out of this world. Thank you very much for your help.

[Author]

Posts