- This topic has 14 replies, 2 voices, and was last updated 2 years, 11 months ago by
David.
-
AuthorPosts
-
February 12, 2020 at 7:22 am #1163065
John Dowling
Hello.
I want to have a hamburger button to activate the off canvas menu overlay in both mobile and desktop versions. (I have the basic behaviour working by setting the mobile navigation breakpoint to 2000px.)
When the overlay is active I’d like an X to replace the three bars to close the overlay. In the same spot as the three bars. Right now it is a square and top right.My goal is exactly like this site: https://www.keeneland.com/
While experimenting I did click on “Set Overlay Defaults” so did I mess everything up?
February 12, 2020 at 7:30 am #1163072David
StaffCustomer SupportHi there,
go to Customizer > General and change the Icon Type to SVG – this should fix the icons not displaying correctly.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 12, 2020 at 7:36 am #1163082John Dowling
my only options in Customizer > General are “Cache dynamic CSS” and “smooth scroll”
Both unchecked for now.I have GP Premium 2.2.1
February 12, 2020 at 7:39 am #1163087John Dowling
actually 1.9.1
Just updated yesterdayFebruary 12, 2020 at 7:41 am #1163089John Dowling
Ok. Just updated the theme instead of just the plugin.
Icons working now.February 12, 2020 at 7:46 am #1163100John Dowling
So still have question about positioning.
1. Aligning the hamburger menu left.
2. Having the X appear where the three bars had beenFebruary 12, 2020 at 8:03 am #1163113David
StaffCustomer SupportAligning the ‘X’ directly over the Menu Toggle is tricky so lets sort out the desktop toggle position first.
1. change the mobile navigation breakpoint back to 768px
2. create a new blank Menu, with no items in it and assign this to the primary navigation. This will remove the normal desktop nav and just display the off canvas toggle.
3. You can now set the Primary Navigation location to float left or float right of the logo.Once thats done let me know.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 12, 2020 at 8:23 am #1163135John Dowling
Ok. I did that. In desktop mode it’s floating left. In mobile it’s centered for some reason
February 12, 2020 at 9:16 am #1163216David
StaffCustomer SupportNow add this CSS to the site :
.slideout-navigation.do-overlay .inside-navigation { max-width: 1370px !important; box-sizing: border-box; position: relative; } .slideout-navigation.do-overlay .slideout-exit{ position: absolute !important; left: 15px; text-align: left !important; }
For mobile what layout are you going for ?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 12, 2020 at 9:30 am #1163225John Dowling
Works great! Thanks.
I really appreciate this amazing service!The logo is now jammed all the way to the right. Is that because the menu is floated?
February 12, 2020 at 9:35 am #1163233David
StaffCustomer SupportSo do you want the log centered ?
And for mobile the same layout ? If so disable the Mobile Header in Customizer > Layout > Header.
Let me know after and ill provide the next couple of changes.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 12, 2020 at 11:17 am #1163351John Dowling
Ok I have turned of mobile header.
yes I would want to logo centered.
Right now, when page switches to mobile the menu is centered and has full width backgroundFebruary 12, 2020 at 12:38 pm #1163408David
StaffCustomer SupportAnd now add this CSS:
.inside-header { text-align: center; } #masthead .site-logo { float: none; } .main-navigation { position: absolute; left: 20px; top: 30px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 12, 2020 at 12:43 pm #1163414John Dowling
A million thanks!
February 12, 2020 at 1:38 pm #1163442David
StaffCustomer SupportYou’re welcome !
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.