- This topic has 9 replies, 3 voices, and was last updated 5 months, 2 weeks ago by
Leo.
-
AuthorPosts
-
August 10, 2020 at 7:12 pm #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?
August 10, 2020 at 9:06 pm #1396400Leo
StaffCustomer SupportHi 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/August 11, 2020 at 6:25 am #1397025Mark
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
August 11, 2020 at 7:17 am #1397091David
StaffCustomer SupportHi 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/August 11, 2020 at 7:50 am #1397281Mark
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 awayAugust 11, 2020 at 7:59 am #1397298David
StaffCustomer SupportOk 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/August 11, 2020 at 8:23 am #1397334Mark
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:
August 11, 2020 at 8:56 am #1397404Leo
StaffCustomer SupportEdit 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/August 11, 2020 at 10:40 am #1397542Mark
Thank you. I will mark this as resolved an open up seperate tickets per question. Thanks
August 11, 2020 at 10:59 am #1397567Leo
StaffCustomer SupportNo problem 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.