[Support request] Re Off canvas menu

[ammgbr]

Hello, is there a way to :

1) change the colour fo the off canvas menu toggle?

2) place the logo in the off canvas menu in the centre?

[David]

Hi there,

1. you can add this CSS to just change the menu toggle without affecting the menu colors:

#mobile-header .menu-toggle {
    color: #f00;
}

2. To add a logo, you can use a Block Element:

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

Add the image block with link if required and set the Hook to inside_slideout_navigation

[ammgbr]

Many thanks the CSS worked.

Re my second Q I think I used the wrong term, apologies. I was meaning how can I set the logo I have for my mobile primary navigation menu in the centre? It currently sits on the left

[David]

No problems … centring depends on what you mean 🙂
For example this CSS will centre the logo in the space around it:

#mobile-header .site-logo {
    margin-left: auto;
    margin-right: auto; 
}

If you want it in the center of the mobile header then you would need to do this:

#mobile-header {
    position: relative;
}
#mobile-header .menu-toggle {
    margin-left: auto;    
}
#mobile-header .site-logo {
    position: absolute; 
    left: 50%;
    margin-left: 0;
    transform: translatex(-50%) 
}
#mobile-header .site-logo img {
    height: auto;
}

But you will have to accept the logo will resize to fit the space available. Otherwise its going overlap the Menu Toggle.

[ammgbr]

I used the first CSS , it works exactly as wanted! Many thanks.

[David]

Glad to be of help!

[Author]

Posts