[Resolved] Mobile menu header

Home Forums Support Mobile menu header

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1088155
    Abhishek

    I am using Volume design from site liabrary, since i liked it but i did not like its mobile header so i tried to customize like this – (i want to have a mobile header like this https://gpsites.co/split/ ) but i am unable to put menu in it.

    #1088589
    David
    Staff
    Customer Support

    Hi there,

    looks like you have removed the Navigation that was set for dispatch.
    So first off you can remove this Customizer > Additional CSS:

    /* SLIDE OUT NAVIGATION */
    
    .main-navigation.offside {
        overflow: visible;
    }
    
    .main-navigation .inside-navigation .menu .slideout-toggle, button.menu-toggle, .slideout-overlay {
        display: none !important;
    }
    
    /* 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 add this CSS:

    #mobile-header .menu-toggle {
        order: -1;
        margin-right: auto;
    }
    
    .site-logo.mobile-header-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.