Jump to content

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

Recommended Posts

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!

Annotation 2020-06-20 100911.png

Link to comment

Hi SeppeDP

What is your site url?

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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;
}

image.thumb.png.a6859865f18f30cdf651c8ab7df27085.png

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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.

Link to comment
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 year later...
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?

image.png.71925b26a80e66a2ff7b4595e50eef1e.png

It looks fine at the moment

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 month later...
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;
}

image.thumb.png.a6859865f18f30cdf651c8ab7df27085.png

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

 

 

Screenshot 2022-01-18 at 19.01.33.png

Edited by GMS2
link didnt work
Link to comment
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

 

Screenshot 2022-01-18 at 19.00.10.png

Screenshot 2022-01-18 at 19.01.33.png

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

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

Mobile version I am trying to acheive:

Screenshot 2022-01-18 at 19.00.10 copy.png

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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
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;
}

image.thumb.png.a6859865f18f30cdf651c8ab7df27085.png

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.
image.thumb.png.6929ad096808b3d9bce0c0701c0d081c.png

Link to comment
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.
image.thumb.png.6929ad096808b3d9bce0c0701c0d081c.png

What is your site url? We can check easier.

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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 

Link to comment

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.