How to hide hamburger menu and use desktop menu on mobile instead?

Hey everyone,

I just started using Squarespace free trial, and I am just starting with the design of my website. I am pretty happy with how the desktop site looks but not really with the mobile website.

What I want to do is keep using the desktop navigation menu on mobile, because on mobile the menu becomes a hamburger, but I just want to keep the text on the website because otherwise it looks kinda empty on mobile.

I added images on how I want it to be, you can see that it is just the regular menu instead of the hamburger.

Thanks!

Hi SeppeDP

What is your site url?

57 minutes ago, bangank36 said:

Hi SeppeDP

What is your site url?

 

https://oleander-springtail-xar7.squarespace.com/

password 1234

Please try this, Insert the snippet into Design->Custom Css

.header-title-logo img {
    max-height: 150px !important;
}
.header .header-title-nav-wrapper .header-nav {
    display: block !important;
}
.header .header-burger {
  display: none !important;
}

Yes, thanks a lot! Exactly what I needed.

26 minutes ago, bangank36 said:

display: none; !important;

Had to remove the ';' after the none though. Not sure if that's correct, but it gave me an error on that line.

26 minutes ago, SeppeDP said:

Yes, thanks a lot! Exactly what I needed.

Had to remove the ';' after the none though. Not sure if that's correct, but it gave me an error on that line.

You're right, my bad

@bangank36 is there a way to use this code but have it show the social icons as well? My menu is just made from the social links and I would like to keep it the same on both mobile and desktop? 

https://www.lydia-cottrell.com

On 12/15/2021 at 6:46 AM, lidyaaC said:

@bangank36 is there a way to use this code but have it show the social icons as well? My menu is just made from the social links and I would like to keep it the same on both mobile and desktop? 

https://www.lydia-cottrell.com

Hi @lidyaaC,

Have you solved it yet?

It looks fine at the moment

@bangank36 yes I worked it out! - Thank you! 

On 6/20/2020 at 11:34 AM, bangank36 said:

Please try this, Insert the snippet into Design->Custom Css

.header-title-logo img {
    max-height: 150px !important;
}
.header .header-title-nav-wrapper .header-nav {
    display: block !important;
}
.header .header-burger {
  display: none !important;
}

Hey guys,

I found this thread so helpful because I want to do the same!  Images attached for reference that I am trying to achieve - gracemargetsonstudio.com

36 minutes ago, GMS2 said:

Hey guys,

I found this thread so helpful because I want to do the same! I love the desktop version of my site but hate the social icons for mobile. I entered in the code and it got rid of the icons, but now need to just add in the same helvetica text words that are on desktop, but for mobile I want them to be bottom left hand side. Images attached for reference - gracemargetsonstudio.com

 

Update: I have now broken the code completely haha, any guidance very helpful

Mobile version I am trying to acheive:

On 1/19/2022 at 6:20 AM, GMS2 said:

Mobile version I am trying to acheive:

Can you add nav items? Currently we don't see any items on header

And you want

• Desktop: left logo - right nav items
• Mobile: Header: Left logo - Footer: Left nav items

Is this right?

Hello @tuanphan and @bangank36, similar to the original post I would like to get rid of the hamburger style menu on mobile and keep the desktop menu layout.

How would I do this? I am on a business plan.

My website is: https://www.david-wright.com/

Password: abc123

Thanks for your help!

On 5/30/2022 at 12:44 AM, dw1080 said:

Hello @tuanphan  similar to the original post I would like to get rid of the hamburger style menu on mobile and keep the desktop menu layout.

How would I do this? I am on a business plan.

My website is: https://www.david-wright.com/

Password: abc123

Thanks for your help!

Add to Design > Custom CSS

/* Desktop nav on mobile */
@media screen and (max-width:750px) {
#header #topNav {
    display: flex;
    justify-content: center !important;
    align-items: center;
    float: none !important;
}
div#mobileMenuLink {
    display: none;
}
}

On 6/20/2020 at 3:34 AM, Beyondspace said:

Please try this, Insert the snippet into Design->Custom Css

.header-title-logo img {
    max-height: 150px !important;
}
.header .header-title-nav-wrapper .header-nav {
    display: block !important;
}
.header .header-burger {
  display: none !important;
}

Hi @tuanphan and @Beyondspace, I am trying to do something similar for a clients site but can't seem to nail the code. I tried the code used here but am running into an issue where my navigation seems to be aligned so far to the right that it is off screen (as shown below). Any help would be much appreciated. Thank you! The site is ridge-landscape.com.

On 8/10/2023 at 1:13 AM, NatPeix said:

Hi @tuanphan and @Beyondspace, I am trying to do something similar for a clients site but can't seem to nail the code. I tried the code used here but am running into an issue where my navigation seems to be aligned so far to the right that it is off screen (as shown below). Any help would be much appreciated. Thank you! The site is ridge-landscape.com.

What is your site url? We can check easier.

In this case I think we need to reduce logo container width

16 hours ago, tuanphan said:

What is your site url? We can check easier.

In this case I think we need to reduce logo container width

My site URL is ridge-landscape.com

1 minute ago, NatPeix said:

My site URL is ridge-landscape.com

Or clementine-puma-h2jm.squarespace.com

On 8/12/2023 at 3:13 AM, NatPeix said:

My site URL is ridge-landscape.com

Use this new code instead

.header-title-logo img {
    max-height: 150px !important;
}
.header .header-title-nav-wrapper .header-nav {
    display: block !important;
}
.header .header-burger {
  display: none !important;
}
.header-nav {
    width: 60% !important;
    flex: 1 1 60% !important;
}
.header .header-title-nav-wrapper .header-title {
    flex: 1 0 40% !important;
}

11 hours ago, tuanphan said:

Use this new code instead

.header-title-logo img {
    max-height: 150px !important;
}
.header .header-title-nav-wrapper .header-nav {
    display: block !important;
}
.header .header-burger {
  display: none !important;
}
.header-nav {
    width: 60% !important;
    flex: 1 1 60% !important;
}
.header .header-title-nav-wrapper .header-title {
    flex: 1 0 40% !important;
}

 

Thank you so much! It worked