Moving/Adjusting Navigation Bar in Harris

Site URL: https://www.principalconstructionllc.com/

Hello, I have a couple of difficulties regarding the navigation.

My first issue was that on different size monitors, the navigation appears differently due to SquareSpace moving the navigation bar to fit the screen. (pictured shows navigation bar adding a second line just for "contact us"). I tried to shrink the font but then on larger monitors it appears small and out of the way.

I was wondering if I could get some help either:

1. Changing the navigation bar so that the font will auto-fit with the size of the screen. Or
2. Moving the navigation bar under my header so the navigation bar will use the length of the screen and wont need to be shortened.

Any help is greatly appreciated. Let me know if anything needs to clarified.

Thanks,

Feel free to check solution for option 2: Add the snippet below into custom css code

@media screen and (max-width: 768px) {
  #block-yui_3_17_2_1_1591890364287_14552 h2 {
    line-height: 0.9em;
  }
}
@media screen and (min-width: 768px) {
  #header {
    display: block;
  }
  #header [data-nc-container="right"] {
    text-align: center;
    display: block;
    position: relative;
    top: -20px;
  }
}

Great! Thank You!

I am having an issue that on the iPad width the logo is shown twice (not on mobile though) and the navigation is shown as well as the hamburger. Can anyone help me with that? Besides that the code worked perfectly thank you :)

Site URL is: https://okra-purple-xrgn.squarespace.com PW woya 

Thank you for helping :)

9 hours ago, monachi said:

Site URL is: https://okra-purple-xrgn.squarespace.com PW woya 

Thank you for helping 🙂

Please change this to 769px

10 hours ago, bangank36 said:

Please change this to 769px

Genius, thank you so much!