[Resolved] Position, appearance and behaviour of Off Canvas button

[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?

[David]

Hi there,

go to Customizer > General and change the Icon Type to SVG – this should fix the icons not displaying correctly.

[John 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

[John Dowling]

actually 1.9.1
Just updated yesterday

[John Dowling]

Ok. Just updated the theme instead of just the plugin.
Icons working now.

[John Dowling]

So still have question about positioning.
1. Aligning the hamburger menu left.
2. Having the X appear where the three bars had been

[David]

Aligning 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.

[John Dowling]

Ok. I did that. In desktop mode it’s floating left. In mobile it’s centered for some reason

[David]

Now 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 ?

[John 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?

[David]

So 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.

[John 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 background

[David]

And now add this CSS:

.inside-header {
    text-align: center;
}

#masthead .site-logo {
    float: none;
}

.main-navigation {
    position: absolute;
    left: 20px;
    top: 30px;
}

[John Dowling]

A million thanks!

[David]

You’re welcome !

[Author]

Posts