Jump to content

Need to move navigation text up a few pixels

Recommended Posts

  • Replies 7
  • Views 203
  • Created
  • Last Reply

Top Posters In This Topic

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.