ColoradoTinting Posted October 19, 2022 Posted October 19, 2022 (edited) Hello everyone, After searching through the forums for a solution I wasn't able to find any solutions to my problem. What I am looking for would be either to make the nav go into the hamburger as soon as the last item in my nav starts to get cut off or just to have the Hamburger menu visible the entire time. I have been trying to find solutions for either option but no css i have found online is working for me. I do not want the nav to stack either when the window size is reduced and i have also attached a picture of when the nav gets cut off. Website: https://coloradotinting.com/ as of right now the only code in there is for the nav not to wrap which is: nav.site-navigation { white-space: nowrap; } The codes that I have tried are below: @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* Hide header button */ .header-actions { display: none; } /* show burger */ .header-burger { display: flex; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } } @media screen and (max-width: 5000px) { /* Display burger icon at all widths */ .header .header-burger { display: flex; order: 0 !important; } /* Make burger menu visible at all widths */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } /* Center logo in mobile device */ .header-title { text-align: center !important; } /* Hide primary navigation menu */ .header .header-title-nav-wrapper .header-nav { display: none; } } Thank you for the help. Edited October 19, 2022 by ColoradoTinting
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment