Site logo

Archived topic

Re Off canvas menu

5 replies · Started by ammgbr on October 9, 2021

Viewing posts 1–6 of 6

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?

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

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

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.

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

Glad to be of help!

This archived topic is closed to new replies.