Open-Canvas Menu: Design

Hi there,

and Happy New Year!

Lets sort the colors first - go to Customizer > Colors Off Canvas. There you can change the background, text and hover colors. If you want to amend them to suit.

Once thats done i cant take a look at the CSS for the other styling changes.

Hi David,

I changed the background color to white and the text to black. And I am embarrassed for being too lazy to figure that out for myself. Sorry. And thanks.

Ok, you can now take a look at the CSS. Do you need access to the backend?

John

Hi John,

For the mouse hover bgcolor change with border radius, you can add this CSS:

.slideout-navigation.main-navigation .inside-navigation .main-nav ul li a {
    margin: 0 10px;
    border-radius: 5px;
}

.slideout-navigation.main-navigation .inside-navigation .main-nav ul li a:hover {
    background-color: rgba(216, 216, 216, 0.5);
    color: black;
}

Thanks, Elvin. To which CSS do I add that: Simple Custom CSS or Additional CSS?

John

Elvin,

Please see the menu (off-canvas navigation): http://www.understand-culture.com

Background in black. Navigation text in white. Navigation Text Hover in red/orange.

Choose Countries_Germany_Communication. When on that page, click on the menu. Not good.

I suspect it is due to some Additional CSS. Can you, please, correct, that? See below in Private Information admin login. Thanks !

John

Can you temporarily remove Elvins CSS.
I am still seeing a Black background off canvas - did you change the Colors > Off Canvas Panel --> Navigation Background ?

Hi David,

I did not add Elvin's CSS, because I was not sure where to place it, Simple Customer or Additional CSS.

Yes, I switched back to black background because I could not figure out the logic behind the settings, and using black helped me to some degree.

John

Hi John,

The CSS I've provided was when your site's off-canvas panel had white background.

The only thing left to do there to replicate what was on tesla's was the CSS I've provided because technically, the main difference was the hover animation which is the menu items having a gray background with border radius.

Now I'm not exactly sure why you changed the background to black when Tesla's site has white. Can you provide us a mockup image so we're clear as to what exactly do you want things to look like?

Here's how to add CSS - https://docs.generatepress.com/article/adding-css/

Hello Elvin,

I am still having problems. The source of the problems is that I do not quite understand the logic of the settings: Navigation Background ... Navigation Text ... Sub-Menu Background ... Sub-Menu Text ... Initial Color ... Hover Color ... Current Color.

I have tried all sorts of combinations to try to understand that logic. The only help in doing so was: Background Color black ... Text White ... Hover Blue. Please take a look: http://www.understand-culture.com. This is without your customer CSS.

As I mentioned initially I like Tesla's off-canvas menu look: http://www.tesla.com. I am aiming at:

-- Background White
-- Text Black
-- Hover light gray with rounded borders.

Please tell me what to do. Thanks for your patience, Elvin !

John

Here's an image w/ a label on what the color panel does for Off-canvas.
https://share.getcloudapp.com/4guZ9Y4L

You should the revert the BG color to white. Revert the text color to black as well.

Then add the CSS I've previously provided.

You write: "You should the revert the BG color to white. Revert the text color to black as well."

I've tried that several times, Elvin. However, the text color in the submenus for some strange reaso remains white, which means it is not visible. Could a CSS be causing a problem?

These are the settings which work:

Nav.Background: black blue blue
Nav.Text: white white white
Sub-Menu Back: black blue blue
Sub-MenuText: white white white

What we want is:

Nav.Background: white blue blue
Nav.Text: black black black
Sub-Menu Back: white blue blue
Sub-Menu Text: black black black

When I set the settings in that way the sub-menu text is in white, and thus not visible against a white background.

Very strange.

You can try replicating this setting.
https://share.getcloudapp.com/z8ukZXAk

If it still doesn't apply, you may want to check if you have cached CSS.

you can try regenerating CSS on Appearance > Customize > General if the Dynamic CSS Print Method is set to "External File".

Thanks, Elvin.

"You can try replicating this setting.
https://share.getcloudapp.com/z8ukZXAk"

I tried. It did not work.

"If it still doesn’t apply, you may want to check if you have cached CSS."
Cache dynamic CSS is checkmarked.

"you can try regenerating CSS on Appearance > Customize > General if the Dynamic CSS Print Method is set to “External File”."
Yes, it is set to External File.

Still the same problem. Text of submenus does not appear in black.

Can you update your GP Premium plugin to the latest version ?