Mobile nav not showing up

[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?

[Leo]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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:

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

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

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts