[Resolved] When click-on Mobile menu , content was sliding

[Bruce Wayne]

is there anyway to click-on Mobile menu and the content still there and not sliding.

[Ying]

Hi Bruce,

I just checked your website on my phone, it seems all normal, nothing is sliding.
Can you specify the issue here? Thanks!

[Bruce Wayne]

if you see here from below link , the page content was sliding down after i click menu
can we sticky all content there without sliding ?

[Ying]

Oh I see what you mean, then off canvas panel will be what you are looking for.
https://docs.generatepress.com/article/off-canvas-panel-overview/

Let me know 🙂

[Bruce Wayne]

sound great , how to add facebook icon like this

https://docs.generatepress.com/wp-content/uploads/2019/03/overlay-1024×647.png

[Bruce Wayne]

also how to center text menu ?

[Elvin]

Hi,

The image you’ve linked doesn’t seem to work.

But if what you meant with it is to add the icons inside the off-canvas panel, you can use the Off canvas panel widget area which is also within the page Ying linked.
https://docs.generatepress.com/article/off-canvas-panel-overview/#off-canvas-panel-widget-area

A wise man once said:
"Have you cleared your cache?"

[Bruce Wayne]

https://docs.generatepress.com/wp-content/uploads/2019/03/overlay-1024×647.png

[Bruce Wayne]

ok then check this link picture below

how to

– LOGO at the top
– center the text menu
– adding icon below like left side

thanks.

[Elvin]

If you want to fully replicate this off canvas menu, go to Appearance > Customize > Layout > Off Canvas Panel and set the “Style” to “Overlay”.

You then go to Appearance > Customize > Color > Off Canvas Panel and play around with the colors.

– LOGO at the top

You can add this PHP snippet:

add_action( 'generate_inside_slideout_navigation', function() {
		generate_construct_logo();
} );

And then add this CSS:

.slideout-navigation .site-logo {
    width: 110px;
    margin: 20px auto;
    text-align: center;
}

– center the text menu

Things will be automatically centered when off canvas style is set to “Overlay”.

– adding icon below like left side

You can add your icons through the widget area on Appearance > Widgets. The widget area within the off canvas is labeled “Off Canvas Panel widget area”.
https://share.getcloudapp.com/YEuQn7PP

https://docs.generatepress.com/article/off-canvas-panel-overview/#off-canvas-panel-widget-area

A wise man once said:
"Have you cleared your cache?"

[Bruce Wayne]

where can i add this

You can add this PHP snippet:

add_action( ‘generate_inside_slideout_navigation’, function() {
generate_construct_logo();
} );

[Elvin]

Here’s how to add PHP snippets:
https://docs.generatepress.com/article/adding-php/

As mentioned in the documentation, you can either use a child theme’s functions.php or the Code Snippet plugin.

A wise man once said:
"Have you cleared your cache?"

[Bruce Wayne]

can you check my dummy site here.
it’s show logo now but look like it’s not at the center
also for the text menu not at the center.

about adding facebook icon , i try to searching any widget relate with the icon but i dont see anything there. can you advise ?

thanks.

[David]

Hi there,

you can use this CSS to center the log and the menu items:

html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust:100%
}
#generate-slideout-menu,
#generate-slideout-menu ul li a{
    text-align: center;
}

Looks like you’re already using Font Awesome icons, so you can simply add a new menu item and sue the FA Icon for the label – see this doc:

https://docs.generatepress.com/article/adding-icons-to-menu-items/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Bruce Wayne]

not working , but fine i will add another widget for images
thanks David

[Author]

Posts