Mobile Menu Icon (double horizontal lines) > integrate into desktop view

Site URL: http://www.47woolshedroad.com.au

Hi there,

This may have been asked but I can't seem to find it, so I'm sorry if it has already been asked. 

Note this refers to my desktop view only, mobile view is perfect.

My website has 3 rows of navigation pages and I don't want to change the location of the logo (that is central). I am trying to decongest these rows by:

1) spread out all navigation pages so they are on 1 row only, and not 3 rows

OR

2) putting these navigation pages into the exact same format as mobile view (e.g. so I have 2 horizontal lines on the desktop view so you can click on each page

Thank you so much for your help.

Adam

It seems like your site is private. Could you either 1). make it password protected and then give us the password or 2). tell us which Squarespace template you are using so that we can look into this issue further?

Hi Caroline,

Password is 'Woolshed'

Also, this is an example of option 2 that I am trying to achieve. https://thecalilehotel.com/

Thanks,

Adam

I would personally not recommend to second option, because hiding your menu - especially on desktop views where people do not expect to have to look too hard for navigation - will make it harder for people to navigate your site.

Here is how you can achieve the first option. Copy & Paste the following code snippet into Design > CSS. This will force the menu to be one row on desktop views without breaking the rest of the layout. Because your menu has so many navigation items, making it one row is not possible on tablet devices without cutting off the text, so it will have to wrap at that point. Hope this helps!

Note for others: If your site uses a mega menu plugin, this code snippet is not guaranteed to be compatible with it.

/************ Make center navigation one row on desktop ***********/
@media(min-width: 1024px) {
  .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-list {
    justify-content: center;
    flex-wrap: nowrap;
    position: absolute;
    top: 94%;
    left: 50%;
    transform: translate(-50%);
  }
}
/************ Make center navigation one row on desktop ***********/

Hi Caroline,

Very helpful. Thank you!

Adam

Hi Caroline,

Hoping you could help me again...

I am looking for a specific font across my website that doesn't appear to be available through Squarespace's main avenues.

I am trying to get all my fonts across to 'Barlow Semicondensed Thin'.

If you could help that would be excellent.

Thanks Caroline.

Adam

On 3/17/2022 at 5:30 AM, Adambro said:

Hi Caroline,

Hoping you could help me again...

I am looking for a specific font across my website that doesn't appear to be available through Squarespace's main avenues.

I am trying to get all my fonts across to 'Barlow Semicondensed Thin'.

If you could help that would be excellent.

Thanks Caroline.

Adam

Hello again!

Luckily your font is available for free on Google Fonts here: https://fonts.google.com/specimen/Barlow+Semi+Condensed?query=Barlow

You can use the very well-written instructions from this blog post by SquareMuse which outlines how to upload custom Google Fonts to Squarespace sites: https://squaremuse.com/blog/how-to-upload-custom-fonts-squarespace

I've used these instructions in the past and the instructions are very easy to follow. Hope this helps!