[Resolved] Shortcode for Mobile Hamburger Menu

[Sars]

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

[David]

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.

[Sars]

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

[David]

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/

[Sars]

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

[Sars]

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?

[David]

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

[Sars]

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

[David]

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.

[Sars]

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

[Tom]

Hi there,

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

[Sars]

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

[David]

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.

[Sars]

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

[David]

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;
}

[Author]

Posts