off canvas menu centre and add logo on top

Hi Tony,

1. menu items in the centre

Try this CSS:

body #generate-slideout-menu .slideout-menu li {
    text-align: center;
}

2. add logo on top of menu

You can use a block element, add the logo image to the element, choose hook as element type, chooseinside_slideout_menu as hook as below screenshot.
https://www.screencast.com/t/OTRD0KCvpqFq

https://docs.generatepress.com/article/block-element-overview/

3. below menu items – add social media icons – youtube, instagram and pinterest.

You could also use a block element and GB buttons block (social icon available) to achieve this. choose hook as element type, choose after_slideout_menu as hook as below screenshot.
https://www.screencast.com/t/T3AHn8eIyP

For other questions not related to off-canvas menu, please open new topics for them. It works better for archive purposes, thanks for your understanding :)

hi Ying,

1. menu items in the centre

Try this CSS:

body #generate-slideout-menu .slideout-menu li {
text-align: center;
}

unfortunatley, the above didn't work. please log into temp link and have a look if you can.

2 and 3 worked, however, i need them all to be in the centre of the slideout menu.

Hi there,

This CSS should work - I'm not seeing it on your site at the moment - can you re-add it?

Can you also add the other elements to the slideout so we can see what needs to be added in order to center them?

Thanks!

hi Tom,

i've just added the above back on my website.

it works fine and has aligned the menu items to the centre.

but...

i need the logo to be smaller and i don't know how to make it smaller.
and also...the social icons need to be centre with the right padding in between.

hi Tom,

i just noticed that after i've added the hooks and css code, the logo on the sticky navigation, has moved from its original position which was left and now it's on the centre and the menu items have moved over to the left.

can you tell me how i can fix this?

logo to be smaller

Try this CSS, feel free to adjust the number.

#generate-slideout-menu .wp-block-image {
    height: auto;
    width: 50px;
    margin-left: auto;
    margin-right: auto;
}

To center social icons, try this CSS:

#generate-slideout-menu .gb-button-wrapper.gb-button-wrapper-1abbd599 {
    margin-left: auto;
    margin-right: auto;
}

For sticky navigation, it's because of another piece of CSS:

.main-navigation:not(.slideout-navigation) .main-nav, #mobile-header .menu-toggle {
    order: -1;
}

Change it to the below CSS should fix the issue:

.main-navigation:not(.slideout-navigation):not(#sticky-navigation) .main-nav, #mobile-header .menu-toggle {
    order: -1;
}

hi Ying,

thanks very much, all works now.

i'll need to sort out the padding on the social icons inside the off canvas menu, one of them is off centre, not sure why.

Looks like you've got the social icon padding sorted out.

Glad to see that and you are very welcome!

Nice site, I like the design :)

I managed to sort out the padding, forgot to let you know.

Thanks for the compliment on the site, much appreciated.

No worries :) Glad it works now!