[Resolved] Menu responding like text

[Gary]

Hi there,
I have a menu in a sidebar responding like text to, Customising > colors > Body.
It is not responding in the Customiser to menu controls or anything else.
I have disabled non-essential plugins and have run Health Check & Troubleshooting plugin and no conflicts showed up.
Any help with this is very much appreciated, thank you.

[David]

Hi there,

any chance i can see the page with the sidebar?
It should respond to the colors you set in either the primary or secondary navigation depending which one you assigned to the sidebar

[Gary]

Hi David, sorry about the delay.
The menu is in the sidebar and the page is: https://bit.ly/2Yn2AlQ

[Gary]

David, I have been trying to achieve an Off Canvas Sidebar with a 3rdParty Plugin, with considerable difficulty – I have just discovered GP Premium has exactly that and so I’ll uninstall the 3rdP plugin and start afresh with GPP.

[David]

Aah ok – makes sense. Docs here if you need em:

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

Let us know if you have any issues.

[Gary]

Hi David,
Is it possible to remove the large transparent black area that covers most of the page?
Is it possible to place the header above the menu?
Thank you for your help.

[Gary]

Hi David, Yes there is a couple of things . . .
Is it possible to remove the large transparent black area that covers most of the page and just keep the slide-in sidebar area?
Is it possible to place the header above the menu?
Thank you for your help.

Page: https://bit.ly/2Yn2AlQ

[Gary]

Page: https://bit.ly/2Yn2AlQ

[Gary]

Hi David, Yes there is a couple of things . . .
Is it possible to remove the large transparent black area that covers most of the page?
Is it possible to place the header above the menu?
Thank you for your help.

Page: https://bit.ly/2Yn2AlQ

[David]

Remove the background overlay with this CSS:

.slideout-overlay {
    background-color: transparent;
}

Customize > Layout > Primary Navigation –> Location: Below Header.

[Gary]

Thank you for the snippet, it works perfectly.

Apologies (very tired here), I meant to ask is it possible to centre the site logo and place the Site Title and Tag Line below?
and in the side panel to place the site logo above the menu?
Thanks.

[Tom]

Hi there,

Give this CSS a shot:

.site-branding-container {
    flex-direction: column;
}

.site-branding-container .site-logo {
    margin-bottom: 20px;
}

.slideout-navigation .inside-navigation {
    display: flex;
    flex-direction: column;
}

.slideout-navigation .widget_media_image,
button.slideout-exit {
    order: -1;
}

Depending on your browser compatibility needs, you may want to run that CSS through this tool: https://autoprefixer.github.io/

[Gary]

Hi there Tom,
I ran your code through the Autoprefixer and it works perfectly – thank you.
The site Tagline remains off center, is it possible to center it?
Gary.

[David]

The CSS Tom provided the first rule add the line i have commented here:

.site-branding-container {
    flex-direction: column;
    text-align: center; /* Add this property */
}

[Gary]

and of course it just works. Thanks David.

[Author]

Posts