Need to move navigation text up a few pixels

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!

Sure, Please send me the website url so that I can check and give you the code. 

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!

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

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?

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%
    }
}

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.

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;
    }

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.

Any thoughts on why the menu isn't opening all the way at some screen sizes?

Thanks!

The code will work from 1000px to 1300px only, have you check these sizes yet?

To increase burger menu width, adjust this code

Got it, thank you!