[Resolved] Styling slide-out off-canvas menu

Home Forums Support Styling slide-out off-canvas menu

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #985578
    Jake

    Hello,

    I’m wanting to style my slide-out off-canvas menu to look similar to this: https://conversion-rate-experts.com/. I have sub-sub menu items and currently, the design is slightly too simple and doesn’t look too great.

    I haven’t styled it at all so it’s the default style.

    Would this be a relatively simple CSS fix or can I customise this elsewhere?

    Thanks in advance.

    #985610
    David
    Staff
    Customer Support

    Hi there,

    shouldn’t be too difficult with some CSS – heres the basics to add the rules and toggle background:

    #generate-slideout-menu .slideout-menu li {
        border-top: 1px solid #ccc;
    }
    
    #generate-slideout-menu .slideout-menu li:last-child {
        border-bottom: 1px solid #ccc;
    }
    
    .slideout-navigation .menu-item-has-children .dropdown-menu-toggle {
        background-color: #ccc;
        padding-left: 20px;
    }
    
    #generate-slideout-menu .inside-navigation {
        padding-left: 10px;
        padding-right: 10px;
    }
    #985661
    Jake

    Hi David,

    Thanks for the prompt response!

    It’s looking good – just a few things to clean up. As you can see in the dropdown menuhere, the text is overlapping the dropdown button. Can I also remove the shadow background and add some space between the X and the menu?

    It would be great to have a background colour when the dropdown menu is selected (like the example).

    Many thanks 🙂

    #985681
    David
    Staff
    Customer Support

    So this CSS to fix the overlapping dropdown toggle:

    .slideout-navigation.main-navigation .main-nav ul li a {
        display: grid;
        grid-template-columns: auto 54px;
    }

    Space between eXit and menu:

    .slideout-navigation .main-nav {
        margin-top: 40px;
    }

    Submenu backgrounds can be changed in Customizer > Colors > Off Canvas Panel > Sub Menu

    Make Slideout overlay transparent:

    .slideout-overlay {
        background-color: rgba(0,0,0,0);
    }
    #985874
    Jake

    Perfect!

    One last thing – there’s a shadow at the bottom of the sub menu: https://stridedigital.com/ (under PPC).

    How do I remove this?

    #985876
    Jake

    Sorry, could I style the typography of the current page by boldening it too? So if I’m on services, it boldens that page in the menu.

    Doesn’t seem to be a setting for this.

    Many thanks!

    #985877
    David
    Staff
    Customer Support

    Try this for removing the shadow:

    .main-navigation ul ul {
        box-shadow: unset;
    }

    This for boldening the current page:

    .main-navigation .main-nav ul li[class*="current-menu-"] > a {
        font-weight: 900;
    }
    #985886
    Jake

    Boldening seems to only work for the sub-menus. How do I apply to the main menu too?

    #985892
    David
    Staff
    Customer Support
    #985901
    Jake

    Spot on! Really appreciate it, David.

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