[Resolved] Shortcode for Mobile Hamburger Menu

Home Forums Support Shortcode for Mobile Hamburger Menu

  • This topic has 22 replies, 4 voices, and was last updated 5 months ago by Elvin.
Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #1469942
    Sarathy

    Dear team,
    I am using a blank slate template. Is there any shortcode that I can use so that the hamburger menu alone shows in desktop and mobile?
    Thank you

    #1470308
    David
    Staff
    Customer Support

    Hi there,

    In customizer > layout > primary navigation – manually set the Mobile Menu Breakpoint to a high value e.g 6000px. This will keep whatever mobile menu have displayed at all times.

    #1470337
    Sarathy

    Thanks a lot David for the support. I did as you have adviced. But I am unable to see the Hamburger menu on desktop as well as mobile.

    Kindly help

    Thank You

    #1470348
    David
    Staff
    Customer Support

    Looks like you’re using a Page Builder that has a Blank Template that removes all of the Theme elements. Instead of using whatever blank template that is, set it to default.

    You can create a full width page instead by using the Page Builder Container:

    https://docs.generatepress.com/article/page-builder-container/

    And you can remove Theme Elements your don’t require using Disable Elements:

    https://docs.generatepress.com/article/disable-elements-overview/

    #1470366
    Sarathy

    Thanks again David!

    I have now manually set the Mobile Menu Breakpoint to a high value e.g 6000px
    Disabled blank template
    Used elements and Disabled navigation menus , footer, sidebar etc.
    Now i have got a full width site.
    But The hamburger menu is not yet there.

    Please help

    Thank you

    #1470372
    Sarathy

    Slideout Layout of generate press
    A simple modern design with a fixed side bar that opens a slideout area.

    This is the exact menubar that I am trying to get on the site David.

    Could you kindly help please on how to install it on the site?

    #1470413
    David
    Staff
    Customer Support

    Looks like you found the option in Customizer > Layout > Off Canvas Panel.
    Is it working correctly for you now ?

    #1470455
    Sarathy

    Yes David,
    I found out
    But there are 2 issues. One The menu is behind a dark background. I would like it to be transparent.

    Another option is: How to enable the slide out menu used in one of your beautiful layouts “Slideout
    A simple modern design with a fixed side bar that opens a slideout area.

    Thank You

    #1470642
    David
    Staff
    Customer Support

    To remove the overlay background – add this CSS:

    .slideout-overlay {
        background-color: rgba(0,0,0,0);
    }

    To use Slideout you would need to import that site using the Site Library:

    https://docs.generatepress.com/article/using-the-site-library/

    We do not recommend you do this on a live site – they really are for starting a new site with.

    #1470646
    Sarathy

    Hi David, Sure, I added the CSS. But THe menu is still not transparent. I do not want the slideout layout. I want the vertical menu that is seen on the slideout layout with all the blogpost snapshots, etc.

    Thank you

    #1470910
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Just to confirm, you want the layout seen here?: https://gpsites.co/slideout/

    #1471133
    Sarathy

    Hello Tom,
    Yes, I was able to bring the Slideout through David’s Help. I just have one question. How to Bring the icons like https://gpsites.co/slideout/ for the Posts?

    Thank you

    #1471466
    David
    Staff
    Customer Support

    You can import the Slider site – just skip the Step for Importing Content. I would suggest you do this on a staging site or after making a backup.

    #1471563
    Sarathy

    Thanks David,
    Yes, I now did that. But still not able to see the fullwidth 🙁

    #1471807
    David
    Staff
    Customer Support

    You need to remove this in Customizer > Additional CSS:

    .no-sidebar .inside-article > *, .no-sidebar #comments, .no-sidebar .nav-links {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
Viewing 15 posts - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.