Gradient instead of Background-Color in the "Offcanvas-Menu"

Hi Jenny,

You can try something like this for the gradient background:

.slideout-navigation.main-navigation {
    background-image: linear-gradient(red, yellow);
}

For the menu item height, go to Customizing > Layout > Off Canvas Panel, adjust the menu item height.

Is there a possibility to get more “Space” / Padding, for the complete Item?

Not sure I fully understand, are you trying to add more paddings to the entire off canvas menu item, if so, try this CSS:

#generate-slideout-menu .inside-navigation.grid-container.grid-parent {
    padding: 20px 30px;
}

Let me know if you need further assistance :)

That workes great - thanks a lot, Ying 🌻

I tried to get a 45degree gradient, but the CSS I found did not work. Have you got an Idea for it?

/* A gradient tilted 45 degrees,
starting blue and finishing red */
linear-gradient(45deg, blue, red);

> just a question. is there a possibility to get a little line on the left side? of the menu? I tried it with this. But somethings seems to be wrong. https://ibb.co/937WKBt

#generate-slideout-menu {
border-left-color: #ffffff;
}

> now I have just little Lines between - do you know a possibility to cancel them?
https://ibb.co/937WKBt

Hi Jenny,

Try playing around with this:

linear-gradient( 45deg, #306c88 33px,#728387 74%)

As for the line:

Try this. (change the color red)

nav#generate-slideout-menu {
    border-left: 5px solid red;
}

Dear Elvin,

that's great :) The gradient worked perfect.
I changed the red with the color #ba9f67 - red worked perfectly. But gold doesn't work.

Have you got an idea why?

Hi there,

which specific CSS is the gold not working ?

For example if i do this:

nav#generate-slideout-menu {
    border-left: 5px solid gold;
}

That works ...

I understand. Is it possible to use "non-solid-colors"? The Gold is a yellow :).
Than I can't see anything 🙈

This one would be nice. #ba9f67

If not, no trouble. It's even now much better than before :).

Yeah the = gold color is really yellow.
Do you want a transparent version of this: #ba9f67?

If so you can use an app like this to create an RGBA value:

https://cssgenerator.org/rgba-and-hex-color-generator.html

Eg.

rgba(186,159,103,0.7)