- This topic has 15 replies, 3 voices, and was last updated 4 months, 2 weeks ago by
David.
-
AuthorPosts
-
October 12, 2020 at 7:50 am #1485021
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.
October 12, 2020 at 8:29 am #1485095David
StaffCustomer SupportHi 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/October 13, 2020 at 7:36 am #1486749Ruben
Hi 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 #1486767David
StaffCustomer SupportCan 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/October 13, 2020 at 7:55 am #1486916Ruben
Yes, already disabled.
October 13, 2020 at 10:01 am #1487118Tom
Lead 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?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 13, 2020 at 10:18 am #1487141Ruben
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 #1487580Tom
Lead DeveloperLead DeveloperLooks 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-developmentOctober 13, 2020 at 4:00 pm #1487582Ruben
Yes, here’s the new link. I’ll try to keep it live.
October 14, 2020 at 12:49 am #1488006David
StaffCustomer SupportSorry 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/October 14, 2020 at 3:27 am #1488233Ruben
No problem. I figured it could happen π
October 14, 2020 at 10:11 am #1488952Tom
Lead DeveloperLead DeveloperSeems 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-developmentOctober 14, 2020 at 12:59 pm #1489192Ruben
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.
October 15, 2020 at 1:10 am #1489827David
StaffCustomer 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 ?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 15, 2020 at 10:42 am #1490844Ruben
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.
-
AuthorPosts
- You must be logged in to reply to this topic.