- This topic has 12 replies, 3 voices, and was last updated 3 years ago by
David.
-
AuthorPosts
-
January 29, 2020 at 5:50 am #1148097
Peter
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 #1148457Leo
StaffCustomer 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 π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 30, 2020 at 6:16 am #1149220Peter
Hi 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 #1149828Leo
StaffCustomer 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 π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 31, 2020 at 1:53 am #1150060Peter
Hi 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 #1150189David
StaffCustomer 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
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 31, 2020 at 6:25 am #1150261Peter
Hi 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 #1150263Peter
Oh 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 #1150598David
StaffCustomer 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 ….
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 31, 2020 at 9:32 am #1150619Peter
You 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 #1150642David
StaffCustomer SupportTry this CSS:
.nav-search-enabled .main-navigation .menu-toggle, .main-navigation .mobile-bar-items { transform: translateY(-150%); width: auto; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 31, 2020 at 10:40 am #1150700Peter
You are a legend!
Thanks a million David!
You have a fantastic weekend!
Cheers, Pete
February 1, 2020 at 4:44 am #1151196David
StaffCustomer SupportGlad to be of help
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.