🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

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

Home Forums Support Position, appearance and behaviour of Off Canvas button

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #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?

    #1163072
    David
    Staff
    Customer Support

    Hi there,

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

    #1163082
    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

    #1163087
    John Dowling

    actually 1.9.1
    Just updated yesterday

    #1163089
    John Dowling

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

    #1163100
    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

    #1163113
    David
    Staff
    Customer Support

    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.

    #1163135
    John Dowling

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

    #1163216
    David
    Staff
    Customer Support

    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 ?

    #1163225
    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?

    #1163233
    David
    Staff
    Customer Support

    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.

    #1163351
    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

    #1163408
    David
    Staff
    Customer Support

    And now add this CSS:

    .inside-header {
        text-align: center;
    }
    
    #masthead .site-logo {
        float: none;
    }
    
    .main-navigation {
        position: absolute;
        left: 20px;
        top: 30px;
    }
    #1163414
    John Dowling

    A million thanks!

    #1163442
    David
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.