Jump to content

Disabling mobile menu on 7.1

Recommended Posts

19 hours ago, dongqtrung said:

Hi anh, I tried this and it perfectly forces the desktop menu on mobile, but the cart button appears twice on mobile view probably due to overlap between desktop and mobile menu, is there any way to tweak this code to keep just 1 cart button?

Can you share link to your site? We can check easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
On 5/12/2021 at 10:32 AM, tuanphan said:

Add to Design > Custom CSS

/* force desktop menu on mobile */
@media screen and (max-width:767px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
.header-nav {
    display: flex !important;
}
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
}
}

 

This code works perfect! But is there any way to change the size of the menu in tablet view only? The font becomes large on the tablet but is perfect size in mobile version.

Link to comment
On 10/9/2021 at 2:47 PM, NGO2045 said:

This code works perfect! But is there any way to change the size of the menu in tablet view only? The font becomes large on the tablet but is perfect size in mobile version.

Hi,

You mean overlay menu item size?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
On 5/12/2021 at 2:32 AM, tuanphan said:

Add to Design > Custom CSS

/* force desktop menu on mobile */
@media screen and (max-width:767px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
.header-nav {
    display: flex !important;
}
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
}
}

 

@tuanphan Hello! I'm looking for a similar solution - I want my desktop nav to stay the same through to ipad and mobile. I used the code above and it does work but my nav button falls off the left side of the page and doesn't inherit the mobile nav text sizing.

https://www.leechuts.com pass: letmein

Thanks for your help!

Link to comment
On 1/2/2022 at 11:48 PM, leechuts said:

@tuanphan Hello! I'm looking for a similar solution - I want my desktop nav to stay the same through to ipad and mobile. I used the code above and it does work but my nav button falls off the left side of the page and doesn't inherit the mobile nav text sizing.

https://www.leechuts.com pass: letmein

Thanks for your help!

Hi. Where is button? I see logo - contact item only

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
10 hours ago, tuanphan said:

Hi. Where is button? I see logo - contact item only

@tuanphan That's correct! There is only the logo button on the left "leechuts" and "contact" on the right.

I've used your code to get rid of the hamburger menu on mobile and just have the nav page remain at the top like on desktop, but the "contact" button falls off the right side of page.

849810126_ScreenShot2022-01-04at11_42_48AM.thumb.png.b0e9562766d1fa98ad4df3714d9f36e3.png

Link to comment
13 hours ago, leechuts said:

@tuanphan That's correct! There is only the logo button on the left "leechuts" and "contact" on the right.

I've used your code to get rid of the hamburger menu on mobile and just have the nav page remain at the top like on desktop, but the "contact" button falls off the right side of page.

849810126_ScreenShot2022-01-04at11_42_48AM.thumb.png.b0e9562766d1fa98ad4df3714d9f36e3.png

Don't remove any code in your current code. Add this CSS

/* logo max width */
.header-title {
    flex: 1 0 50% !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
8 hours ago, tuanphan said:

Don't remove any code in your current code. Add this CSS

/* logo max width */
.header-title {
    flex: 1 0 50% !important;
}

 

That did it! Thank you so much!

I always see you on these forums helping people out, thank you for sharing your knowledge with us! You're the GOAT!🙏

Link to comment
  • 2 weeks later...
  • 3 weeks later...

Hi, can someone assist me with removing the hamburger bar on the left side of my page for mobile view. I want to keep my logo in the middle.

 

my site is: www.brittnetta.com

Link to comment
On 2/3/2022 at 7:48 AM, brittany14 said:

Hi, can someone assist me with removing the hamburger bar on the left side of my page for mobile view. I want to keep my logo in the middle.

 

my site is: www.brittnetta.com

Add to Design > Custom CSS

.burger-inner {
    visibility: hidden;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...
On 9/14/2022 at 9:57 PM, JonandTaja said:

Hi Tuanphan

Are you able to help me disable the mobile view completely on my site?

helix-tunny-7hbw.squarespace.com

We just want the desktop view only. 

Thanks so much !

 

Hi. Header only or all main content?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
On 8/2/2021 at 10:54 AM, dongqtrung said:

Hi anh, I tried this and it perfectly forces the desktop menu on mobile, but the cart button appears twice on mobile view probably due to overlap between desktop and mobile menu, is there any way to tweak this code to keep just 1 cart button?

I have this same problem

Manifestharmony.net

 

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.