[Resolved] Off Panel Canvas outer opacity and menu location

[Edward]

I was able to customize much of the appearance of the Off Canvas Panel for my mobile menu with existing threads thanks to David. Is there an option to drop the opacity of the outer Off Canvas Panel?

Here is the CSS I’ve used to change the background color of this Off Canvas Panel menu and its opacity. I have also moved the location of the menu down in order to appear just below the hamburger mobile menu icon. My next goal is to move the Off Canvas Panel menu to the right, directly beneath the hamburger mobile menu icon. I tried adding margin-left to the below code without success.
Thanks in advance, the support is greatly appreciated!

/* Overlay Background color */
#generate-slideout-menu.main-navigation {
margin-top: 160px;
background-color: #ffffff;
opacity: .8;
}

[David]

Hi there,

try this CSS:

.slideout-overlay {
    background-color: rgba(0,0,0,0.4);
}

This reduces the alpha/opacity to 0.4 from 0.8 – set it to what you like 🙂

[Edward]

Awesome, thanks David. That worked to alter the opacity of the outer Off Canvas Panel. Is there some way to move the menu items in the Off Canvas Panel to the right, more directly below the hamburger icon?

[David]

Would right aligning the menu items do the trick?
If so try this CSS:

#generate-slideout-menu .slideout-menu li,
.slideout-navigation button.slideout-exit {
    text-align: right;
}

[Edward]

Thanks, that worked perfect.

[Edward]

Resolved

[David]

Glad to hear that

[Author]

Posts