- This topic has 15 replies, 3 voices, and was last updated 3 years, 6 months ago by David.
-
AuthorPosts
-
October 12, 2020 at 7:50 am #1485021Ruben
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 #1485095DavidStaffCustomer SupportHi 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 #1486749RubenHi David,
I am using Local by Flywheel for design and testing. I created a live link, I hope it works:
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 #1486767DavidStaffCustomer SupportCan you disable Autoptimize on the local site as its breaking the CSS.
October 13, 2020 at 7:55 am #1486916RubenYes, already disabled.
October 13, 2020 at 10:01 am #1487118TomLead DeveloperLead DeveloperIt 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 #1487141RubenI 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 #1487580TomLead DeveloperLead DeveloperLooks like the live URL expired – can you re-up it?
Thanks!
October 13, 2020 at 4:00 pm #1487582RubenYes, here’s the new link. I’ll try to keep it live.
October 14, 2020 at 12:49 am #1488006DavidStaffCustomer SupportSorry 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 #1488233RubenNo problem. I figured it could happen ๐
October 14, 2020 at 10:11 am #1488952TomLead DeveloperLead DeveloperSeems to have happened again – any chance you can throw the site up on a temporary staging server?
October 14, 2020 at 12:59 pm #1489192RubenOk, 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.
October 15, 2020 at 1:10 am #1489827DavidStaffCustomer SupportThanks 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 #1490844RubenHi 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.
-
AuthorPosts
- You must be logged in to reply to this topic.