Jump to content

Navigation changes to two lines when the screen gets BIGGER

Recommended Posts

Posted

Site URL: http://transformfleet.com

Hey guys, I've see a couple posts in forum regarding the nav breaking to two lines when the screen/viewport gets smaller, however mine breaks when the screen gets bigger! At full browser resolution on a 16" MacBook Pro there's no issue. However, on my 27" 4K reference monitor at full browser resolution the last nav item appears on a second line.

I've attached two screen shots for reference.

Any ideas how to fix this?

Thanks,

Screen Shot 2022-02-18 at 4.30.17 PM.png

Screen Shot 2022-02-18 at 4.30.05 PM.png

  • Replies 2
  • Views 607
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Posted

Hello! Your could just specify that you don't want the navigation to wrap between a certain screen size. Try something like this (you might need to play around with the pixel sizes on your account):

@media(max-width: 1900px) and (min-width: 1000px) {
  .header-nav-list {
  	flex-wrap: nowrap !important;
  }
}

 

Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

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.