[Resolved] Mobile nav not showing up

Home Forums Support Mobile nav not showing up

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1396361
    Mark

    On desktop, I have an 80px padding on left and right side for my nav AND sticky header, which is working how I want to.

    However, on mobile, it is applying the same 80px padding and I want to use the mobile nav header. I have mobile header enabled and off canvas panel enabled but I do not see a menu on my mobile site.

    I also want to add some padding on the left and right side of header on mobile. How can I do this?

    #1396400
    Leo
    Staff
    Customer Support

    Hi there,

    I’m seeing this CSS in Additional CSS field that is hiding the mobile toggle:

    .main-navigation .inside-navigation .menu .slideout-toggle, button.menu-toggle, .slideout-overlay {
        display: none !important;
    }

    Can you remove that first?

    #1397025
    Mark

    Hello, thanks for your help. I’m using the GP Volume theme which added a lot of this custom css.

    I removed the CSS line and the menu is showing up now. However, I want to right align the menu button, left align my logo and make it smaller. Also want to have save some padding on the right and left so it’s not completely on each edge.

    Also, when I open then menu it looks strange because it’s not aligned to the right. And the close button is just floating next to the the menu. How can I make the close icon replace the hamburger icon when menu is open?

    I think I may have messed up some settings or using it incorrectly. Can the off canvas panel and mobile header be used together? I essentially just want my mobile header to be sticky and click the menu button to slide out menu. Similar to joyable.com on mobile

    #1397091
    David
    Staff
    Customer Support

    Hi there,

    to start with we need to remove this Additional CSS from the Customizer:

    /* SLIDE OUT NAVIGATION */
    
    .main-navigation.offside {
        overflow: visible;
    }
    
    .main-navigation .inside-navigation .menu .slideout-toggle, button.menu-toggle {
        display: none !important;
    }
    .slideout-overlay {
    	background-color: rgba(255,255,255,0.6);
    }
    .slideout-overlay .slideout-exit {
    	display: none;
    }
    /* 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);
    }

    Then in Dashboard > Appearance > Elements delete this hook: Slideout Header

    This should get the site back to default behaviour. Once done let us know and we can take a look at any other changes needed

    #1397281
    Mark

    Thanks for the quick response. I removed that additional CSS and it’s slightly better. Things I would like to fix:
    -Make logo smaller
    -Reduce padding on sides on top nav
    -The open menu width is very narrow
    -The close button is really far away

    #1397298
    David
    Staff
    Customer Support

    Ok so this CSS is affecting desktop and mobile padding:

    .inside-navigation {
        padding: 0px 80px;
    }

    Change it to this so it doesn’t affect the mobile nav:

    .main-navigation:not(.slideout-navigation) .inside-navigation {
        padding: 0px 80px;
    }
    #1397334
    Mark

    Hello, I changed the code but padding is still applied on mobile. How can I add a custom padding on mobile nav (regular+sticky) and a custom padding on desktop (regular+sticky). I’d like to keep my desktop padding at 80px left and right. For mobile, I would like padding to be much less like 20px. I have sticky nav applied so I would like this padding to reflect on both the navs on the perspective breakpoints.

    How can I reduce the logo size in the mobile header?

    And is there a way to make the mobile nav open to full screen? I have the overlay option selected but it’s not behaving like I thought. I would like it to look like this:

    #1397404
    Leo
    Staff
    Customer Support

    Edit David’s CSS to this:

    .main-navigation:not(.mobile-header-navigation) .inside-navigation {
        padding: 0px 80px;
    }

    And please open a new topic for the separate question and keep one question per topic.

    Looks like the original topic is already resolved here.

    #1397542
    Mark

    Thank you. I will mark this as resolved an open up seperate tickets per question. Thanks

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