[Resolved] Off Panel Canvas outer opacity and menu location

Home Forums Support Off Panel Canvas outer opacity and menu location

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1394226
    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;
    }

    #1394258
    David
    Staff
    Customer Support

    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 🙂

    #1394311
    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?

    #1394544
    David
    Staff
    Customer Support

    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;
    }
    #1395654
    Edward

    Thanks, that worked perfect.

    #1395663
    Edward

    Resolved

    #1395903
    David
    Staff
    Customer Support
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.