Off Canvas Customizations

Hi Steve,

I’ve been in the additional CSS tab trying to add this background gradient to my off-canvas menu and can’t seem to figure it out. I’ve searched here and in the FB group and can’t seem to figure it out.

.slideout-widget {
background: linear-gradient(180deg, #001123 0%, #626060 100%);
}

Can you link us to the site in question? Also, can you provide a mockup image of how you want it to look like? So we have an idea for the CSS writeup.

I was also wondering if any of you had a handy CSS snippet that would enable one of the menu items for the off canvas to appear as a button by chance? Assuming it’s not yet possible to add one with an element/hook just yet.

It should be possible as long as you've assigned a unique class to it we can use to style it specifically. You can add classes to your menu items on Appearance > Menus. https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

I've added those details to the private info! Please let me know if you need credentials to proceed. Appreciate the help!

You can try this CSS:

#generate-slideout-menu .slideout-menu li:last-child {
    background-color: #2AC9C6;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0em;
    padding: 5px 0px;
    border-radius: 2px;
}

It'll look like this: https://share.getcloudapp.com/v1ubWoBe

This will keep working assuming the "Bid now" Button is always the last menu item. :)

Great! Anything on the background gradient for the off canvas menu by chance?

Great! Anything on the background gradient for the off canvas menu by chance?

Not sure what you mean. Do you want to apply a background gradient for the offcanvas menu?

If so, we can do it by custom CSS as well. How you do want it to appear?

You can use the nav#generate-slideout-menu selector for CSS if you want to do the writeup yourself. :)