[Resolved] Mobile menu header

[_blank]

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.

[David]

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%);
}

[Author]

Posts