smallstepstherapy Posted May 14 Share Posted May 14 I added some css so that my navigation text wouldn't wrap, but now it is not in line with my shopping cart and logo. Does anyone know how to shift it up a few pixels? Thanks! Link to comment
DavidStewart Posted May 14 Share Posted May 14 Sure, Please send me the website url so that I can check and give you the code. Link to comment
smallstepstherapy Posted May 20 Author Share Posted May 20 https://smallstepstherapy.com/ I also included code to keep the nav text from wrapping. The problem with this is when the screen is smaller it crosses over the logo. Would you be able to help with that too? Thanks! Link to comment
tuanphan Posted May 22 Share Posted May 22 (edited) I think on some smaller screen, you can consider changing it to burger menu. If you need this, I can give the code Or break nav to 2 lines Edited May 22 by tuanphan 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
smallstepstherapy Posted May 22 Author Share Posted May 22 That would be great, thanks! Once it crosses over if it could just shift to a burger. Do you also have code to just shift up the text a bit? Link to comment
tuanphan Posted May 23 Share Posted May 23 17 hours ago, smallstepstherapy said: That would be great, thanks! Once it crosses over if it could just shift to a burger. Do you also have code to just shift up the text a bit? Try this CSS code @media screen and (max-width:1300px) and (min-width:1000px) { /* Force burger on desktop */ .header-burger { display: flex !important } .header--menu-open .header-menu { opacity: 1 !important; visibility: visible !important } .header-nav,.header-actions { visibility: hidden !important } .header-menu { left:unset; width: 25% } } 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
smallstepstherapy Posted May 23 Author Share Posted May 23 That is doing a few funky things to the nav. It goes between a burger very close to the logo and on the left to a regular nav and then back to a clean mobile burger nav. The website is updated with it if you want to take a look and see if there's another change I can make. I'm guessing the code is conflicting with code I currently am using to not allow wrapped text and a couple of font changes on the mobile nav. Link to comment
tuanphan Posted May 25 Share Posted May 25 On 5/23/2024 at 5:24 PM, tuanphan said: Try this CSS code @media screen and (max-width:1300px) and (min-width:1000px) { /* Force burger on desktop */ .header-burger { display: flex !important } .header--menu-open .header-menu { opacity: 1 !important; visibility: visible !important } .header-nav,.header-actions { visibility: hidden !important } .header-menu { left:unset; width: 25% } } Change this line .header-burger { display: flex !important; } to this .header-burger { display: flex !important; order: 3 !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
smallstepstherapy Posted May 28 Author Share Posted May 28 Thanks, unfortunately it's still not working. The burger menu doesn't fill the screen correctly and at another point it jumps back to a regular nav. Link to comment
smallstepstherapy Posted May 30 Author Share Posted May 30 Any thoughts on why the menu isn't opening all the way at some screen sizes? Thanks! Link to comment
tuanphan Posted June 1 Share Posted June 1 The code will work from 1000px to 1300px only, have you check these sizes yet? To increase burger menu width, adjust this code 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment