- This topic has 12 replies, 3 voices, and was last updated 4 years, 2 months ago by David.
-
AuthorPosts
-
January 29, 2020 at 5:50 am #1148097Peter
Hi Guys!
I have been trying to tweak the slideout menu a bit…
I want it to look similar to the one on the site below.
Please let me know if it was possible.
Cheers, Pete
January 29, 2020 at 10:14 am #1148457LeoStaffCustomer SupportHi Pete,
I think it’s a pretty cool idea so let’s give it a shot.
– Change the breakpoint to 2000:
https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width– Add this CSS:
body .main-navigation.toggled .main-nav li { display: inline-block !important; }
Adding CSS: https://docs.generatepress.com/article/adding-css/
Can you link me to your site in question with the method applied if you need further help with this?
Let me know π
January 30, 2020 at 6:16 am #1149220PeterHi Leo,
Thanks for getting back to me.
I have added the code to the css and changed the breakpoint.
What happened was, my header with the logo in the middle has disappeared and the menu still opens from the right hand side.
Here is a bypass link to my page…
Thanks a lot for your help!
Cheers, Pete
January 30, 2020 at 3:28 pm #1149828LeoStaffCustomer SupportSorry. My method doesn’t actually require the off-canvas panel.
Can you turn that off for now?
https://docs.generatepress.com/article/off-canvas-panel-overview/Let me know π
January 31, 2020 at 1:53 am #1150060PeterHi Leo,
I have just turned off the off-canvas.
Not much has changed apart from the menu now does not slide in from the right.
Cheers, Pete π
January 31, 2020 at 4:41 am #1150189DavidStaffCustomer SupportHi there,
if this is going to be for desktop and mobile, go to Customizer > Layout > Primary Navigation and set the Mobile Breakpoint to a real high number like 5000px. You should now have Menu toggle on desktop and mobile:
Then add this CSS:
.main-navigation:not(#mobile-header).toggled .main-nav>ul { position: static !important; } @media (min-width: 769px) { .main-navigation:not(#mobile-header).toggled .main-nav>ul { display: flex; justify-content: center; } .main-navigation.toggled .main-nav li { flex-basis: 20% !important; text-align: center !important; } }
That should get the basics done – let me know
January 31, 2020 at 6:25 am #1150261PeterHi David!
It has done the trick.
That is awesome!
Thanks a million for your and Leo’s time and help!
Happy days! π
January 31, 2020 at 6:25 am #1150263PeterOh one more thing…
The menu is working fine now, but the header is missing since I have added Leo’s code to the custom css.
P
January 31, 2020 at 9:17 am #1150598DavidStaffCustomer SupportThats because you have the Mobile Header enabled. If you disable that and only apply the code i provide then you can keep the site header ….
January 31, 2020 at 9:32 am #1150619PeterYou are a star David!
Thanks a lot!
Sorry for being a pain, but is it possible to move the header logo between the search and the menu icon like on this site?
Cheers, Pete
January 31, 2020 at 9:55 am #1150642DavidStaffCustomer SupportTry this CSS:
.nav-search-enabled .main-navigation .menu-toggle, .main-navigation .mobile-bar-items { transform: translateY(-150%); width: auto; }
January 31, 2020 at 10:40 am #1150700PeterYou are a legend!
Thanks a million David!
You have a fantastic weekend!
Cheers, Pete
February 1, 2020 at 4:44 am #1151196DavidStaffCustomer SupportGlad to be of help
-
AuthorPosts
- You must be logged in to reply to this topic.