Archived topic

Logo aligned left with hamburger menu and Secondary menu aligned right

15 replies · Started by Ruben on October 12, 2020

Viewing posts 1–15 of 16

October 12, 2020 at 7:50 am #1485021

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.

October 12, 2020 at 8:29 am #1485095

Hi there,

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

October 13, 2020 at 7:36 am #1486749

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.

October 13, 2020 at 7:43 am #1486767

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

October 13, 2020 at 7:55 am #1486916

Yes, already disabled.

October 13, 2020 at 10:01 am #1487118

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?

October 13, 2020 at 10:18 am #1487141

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.

October 13, 2020 at 3:57 pm #1487580

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

Thanks!

October 13, 2020 at 4:00 pm #1487582

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

139d8ce40c2f.ngrok.io

October 14, 2020 at 12:49 am #1488006

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

October 14, 2020 at 3:27 am #1488233

No problem. I figured it could happen :)

139d8ce40c2f.ngrok.io

October 14, 2020 at 10:11 am #1488952

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

October 14, 2020 at 12:59 pm #1489192

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/

October 15, 2020 at 1:10 am #1489827

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 ?

October 15, 2020 at 10:42 am #1490844

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.

This archived topic is closed to new replies.

Start building better websites today.