Fig_Design Posted July 4 Share Posted July 4 A site I'm working on has a centred navigation that's been giving me issues. It was stacking, so I added code to make it full width. I had to try various code options because most would send the header button off the side, but got it to work. Unfortunately, the nav is now really messed up on mobile. It displays the desktop nav plus a hamburger menu. I'd like it to only show the hamburger. But I need to be able to keep the full width on desktop without shifting the button location. Here's the site: https://tangerine-hypersphere-hh79.squarespace.com/?password=bike CSS I'm using: .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav { width: 100vw; display: block; position: absolute; bottom: -2vw; left: 50%; transform: translateX(-50%); } Thanks in advance! www.figdesign.co Link to comment
Solution tuanphan Posted July 6 Solution Share Posted July 6 Use this CSS code to fix problem on mobile. div.header-display-mobile .header-nav { display: none !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Fig_Design Posted July 6 Author Share Posted July 6 Thanks so much @tuanphan! www.figdesign.co Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment