- This topic has 7 replies, 3 voices, and was last updated 4 years, 10 months ago by Leo.
-
AuthorPosts
-
June 27, 2019 at 4:59 am #942716Joe
Hello,
I added the split header/nav with logo in the center. I have it looking perfect in desktop view, but mobile doesn’t look too good with the split header/nav. How can I change the mobile view only to NOT have the split header/nav and display header to left and menu on right?
Thank you in advance for your help.
June 27, 2019 at 6:10 am #942771DavidStaffCustomer SupportHi there,
in the code there is a large section followed by a smaller piece of code wrapped in a @media query. For the large piece of code wrap it in a media query:
@media (min-width: 769px) { /* CSS in here */ }
This will apply that code only to desktop views.
June 27, 2019 at 6:20 am #942780JoeThanks. I added that as you displayed, but the mobile is still centered. My apologies but my CSS is a little rusty. Do I need to replace /* CSS in here */ with CSS? If so, can you please share the code?
June 27, 2019 at 6:30 am #942791DavidStaffCustomer SupportSo lets use this CSS:
@media (min-width: 1024px) { .inside-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-widget { order: 10; overflow: visible; } .nav-float-right .header-widget { top: auto; } .nav-float-right .header-widget .widget { padding-bottom: 0; } .site-branding, .site-logo { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 200; } #mobile-header .mobile-bar-items { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; margin-left: auto; } #site-navigation { float: none; width: 100%; } .main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav>ul { display: -webkit-box; display: -ms-flexbox; display: flex; } .main-navigation .menu-item-separator { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .main-navigation .menu-item-separator a { font-size: 0; background: transparent !important; } .slideout-navigation .menu-item-separator, .main-navigation.toggled .menu-item-separator { display: none !important; } }
I have set the breakpoint higher as the menu items overlap the logo before mobile break is reached. Add the CSS in place of your current CSS then in Customizer > Layout > Primary Navigation set your Mobile Breakpoint to 1023px.
June 27, 2019 at 6:39 am #942804JoePerfect! Thank you so much!
June 27, 2019 at 7:27 am #942982DavidStaffCustomer SupportYou’re welcome
June 27, 2019 at 7:55 am #943000JoeOne more thing…how can I make the mobile menu hamburger icon bigger? I found css to do it, but I don’t think it works with my current css you advised. Thanks again.
June 27, 2019 at 9:27 am #943076LeoStaffCustomer SupportCan you try this?
.menu-toggle { font-size: 25px; }
-
AuthorPosts
- You must be logged in to reply to this topic.