[Support request] How to change style on mobile menu?

Home Forums Support How to change style on mobile menu?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1430441
    Sara

    Hello my mobile menu its showing half the screen, on a black background and with a transparent background covering website.

    I would like to change it to look like this website on textbox but, using same font style that I am using on desktop menu, remove the black background and leave pink one, show menu in all screen vertical and remove transparent background so, user can see website even with open menu.

    My website: https://www.shopbelleza.com/

    Thanks!

    #1430499
    David
    Staff
    Customer Support

    Hi there,

    your menu style is a ‘left over’ from an older site you imported.
    Go to Customizer > Additional CSS and remove:

    .slideout-header {
        background-color: #0b0521;
    }
    
    .slideout-header .slideout-exit {
        color: #fff;
        background-color: #ff3366;
    }
    
    .slideout-header .custom.slideout-toggle a {
        background-color: #ff3366;
    }
    
    #generate-slideout-menu .slideout-menu li {
        background-color: #0b0521;
    }

    And this ( note below code box scrolls ):

    /* SLIDE OUT NAVIGATION */
    
    .main-navigation.offside {
        overflow: visible;
    }
    
    /* style and position Custom Slideout toggle */
    
    .slideout-header .slideout-exit:before {
        font-family: GeneratePress;
    }
    
    .slideout-header {
        padding: 0 20px;
        line-height: 40px;
    }
    
    .custom.slideout-toggle a, .slideout-header .slideout-exit {
        width: 40px;
        text-align: center;
    	cursor: pointer;
    }
    
    .custom.slideout-toggle a {
        position: relative;
    }
    
    .slideout-header .slideout-exit {
        position: absolute;
    }
    
    .offside--right .slideout-header .custom.slideout-toggle a {
        left: -60px;
    }
    
    .offside--right .slideout-header .slideout-exit {
        left: -40px;
    }
    
    .offside--left .slideout-header .custom.slideout-toggle a {
        right: -245px;
    }
    
    .offside--left .slideout-header .slideout-exit {
        right: -40px;
    }
    
    .slideout-navigation.is-open .slideout-menu {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transition-delay: .35s !important;
        transition-delay: .2s !important;
    }
    
    .slideout-menu {
        -webkit-transform: translate3d(0, -140%, 0);
        transform: translate3d(0, -140%, 0);
        overflow: hidden;
    }
    
    .main-navigation.offside {
        height: auto;
    }
    
    .offside-js--interact .offside, .offside-js--interact .offside-sliding-element, .slideout-navigation.is-open .slideout-menu, .slideout-menu {
        -webkit-transition: all 500ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
        transition: all 500ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
    }
    
    /* PAGE HERO */
    /* single ppst hero meta */
    
    .hero-category a, .post-nav, .entry-meta .cat-links a {
        padding: 6px 12px;
        border-radius: 3px;
        font-size: 0.7em;
        text-transform: uppercase;
    }
    
    .hero-byline {
        font-size: 0.9em;
    }
    
    .hero-category, .entry-meta .cat-links {
        visibility: hidden;
    }
    
    .hero-category a, .entry-meta .cat-links a {
        visibility: visible;
        margin-bottom: 10px !important;
    }
    
    .entry-meta .cat-links:before {
        display: none;
    }
    
    .page-hero.overlay {
    	box-shadow: inset 0px 100px 83px -15px rgba(0,0,0,0.75);
    }
    #1431077
    Sara

    Hello David,

    I added code, it looks bigger but, still missing a few things that are black background still there, transparent curtain on website still there and menu is not fullwidth vertically like the one on website I mention it only shows half screen or less.

    #1431246
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You’ll want to remove the code that David highlighted here. You should find it in Customize > Additional CSS. If you remove the code he shared here (which already exists on your site), your mobile menu should go back to normal.

    #1431649
    Sara

    Hello David, sorry I miss understood you before, thanks for the clarification Tom 🙂

    I remove this code you mention and yes black background is gone and also it showing full width now vertically the menu.

    The only things left would be the following:

    1) Would like to show same font as on normal menu since shows too small

    2) Would like to remove transparent curtain on the right and show it fullwidth like shows on url on textbox.

    Thanks!

    #1431708
    David
    Staff
    Customer Support

    1. Go to Customizer > Typography > Off Canvas where you can change the font size and weight to match your primary navigation.

    2. I am not sure i understand – if you want to remove the Overlay ( curtain ) so you still see the site behind it – then add this CSS:

    .slideout-overlay {
        background-color: rgba(0,0,0,0);
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.