Navigation/Header spacing help

Site URL: http://oakandbay.net

Hi.   I am having trouble getting the layout to do what I want.  We have a large logo in the center, and I want the navigation under the header, which is easy enough. However, what happens is that the navigation ends up as two rows, and I want it to be straight across, all four navigation links.  How can I increase the navigation width so it doesn't stack them?  Thanks!

Add to Design > Custom CSS

/* Nav one line */
.header-nav-list {
    flex-wrap: nowrap;
}

Thank you!! 

Hi Again - Turns out it is causing a glitch that makes the logo and navigation off-center a bit.  Is there a way to fix that while keeping the no wrap solution? Thx

On 5/7/2022 at 1:50 AM, FernDesigns said:

Hi Again - Turns out it is causing a glitch that makes the logo and navigation off-center a bit.  Is there a way to fix that while keeping the no wrap solution? Thx

It looks fine to me. Can you explain clearly?

Hi. See screen shot.  It is hard to tell, but the logo is off center a bit.  Perhaps when you looked I had taken the code away because it was too wonky.  It is less wonky now, but still off.

Thanks 🙂

On 5/17/2022 at 3:29 AM, FernDesigns said:

Hi. See screen shot.  It is hard to tell, but the logo is off center a bit.  Perhaps when you looked I had taken the code away because it was too wonky.  It is less wonky now, but still off.

Thanks 🙂

You mean Logo or Nav items off center?

This slipped through the cracks  😬

The site logo is slightly off center, from the rest of the content.  The navigation may also be off, I can not tell.  But for sure the logo.

Thank you!!

https://www.oakandbay.net/

You can see what I mean here, when the edit box comes up (see screenshot).

Hi Fern, 

Could be something on your end. Did you look at the website in a new incognito window, not the editor? It's showing up centered for me as well. I took a screenshot. I have a ruler plugin on my browser to check for stuff like that, and the distance is equal on both sides of the navigation (see screenshot, the grid ruler lines are very light). 

When I go into the editor on my squarespace, sometimes the spacing is off but it's fine when I look at it in an incognito window. 

I did look at it with an incognito window, and it was still off, but I will try again.  I was just playing with the code and haven't checked it yet.  Thank you for your reply!

What is your ruler plug in?  I need that!

If you are using the Chrome browser, it's just called Page Ruler. Here is the link: https://chrome.google.com/webstore/detail/page-ruler/jcbmcnpepaddcedmjdcmhbekjhbfnlff?hl=en

I'm sure they have similar plugins for other browsers. The spacing could also be a browser issue. I didn't look at your website on any other browser, just Chrome. I've had that happen when tweaking CSS in the past. Stuff will look great on one browser and funky on another.