Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Disabling mobile menu on 7.1


deirdrep

Question

I have created a 2 page website in 7.1. I want to disable the mobile breakpoint of 991px and just keep the regular menu bar visible as there is only 1 button to a contact page on there. Does someone have the CSS code to disable the mobile menu in 7.1 since there isn't an option to set it to 0px in the style editor?

Link to comment

Recommended Posts

  • 2

Hey @deirdrep - sorry this answer is a bit late but I am just now hopping back into the forums! Anywho, if you still need the code, this button will keep it active on all breakpoints and hide that hamburger for ya. Hope it helps! And let me know how those margins/paddings look after you try it; depending upon the size of the text in your button we might need to finesse this fit a little... keep me posted! 🙂

 

.header-burger {display: none!important} .header-actions .btn, .header-actions .header-actions-action--cta {display:flex!important; visibility:visible; margin:auto!important; order: 2!important;}

 

Code queen and CSS behind InsideTheSquare.co

😃 Free CSS tutorials: insidethesquare.co/tutorials-for-squarespace
🥳 Free 7.1 training course: itssevenone.com/training
👍 CSS Cheat Sheet - codes for 7 & 7.1: insidethesquare.co/css
📚 CSS for Squarespace course: customcodeacademy.com

Link to comment
  • 0

This worked for me to remove the hamburger from the mobile site...but is there anyway to add navigation menu with page titles? i.e. for mobile version...

|                SITE TITLE               |
|   Page 1    Page 2   Page 3  |

|     [Home Page Content]    |

 

Site is RanchoSylva.com

 

@inside_the_square any ideas?

Edited by LanaRanchOgA
Link to comment
  • 0
On 2/11/2020 at 6:22 PM, LanaRanchOgA said:

This worked for me to remove the hamburger from the mobile site...but is there anyway to add navigation menu with page titles? i.e. for mobile version...

|                SITE TITLE               |
|   Page 1    Page 2   Page 3  |

|     [Home Page Content]    |

 

Site is RanchoSylva.com

 

@inside_the_square any ideas?

Also looking for an answer to this question

Link to comment
  • 0
On 6/4/2020 at 2:25 PM, itsmollyjones said:

@inside_the_square i applied this to my site, the hamburger nav was hidden however it is also hiding the link that was original in the nav.

I noticed on your original post that you mention it may have to do with the margins and padding. Could you elaborate? 

My site isnt yet published, hower I can send over screen grabs if you would like! 

Have you solved yet? If no, you can share url, we can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

If your logo is centered, and you use the code that the great and powerful @inside_the_square has bestowed upon us, then it will be slightly off center. No worries, here is the fix.

 

.header-title-logo {padding: 0px 0px 0px 0px !important}

 

That's what worked for me anyways but I'm not a CSS wizard.

 

Edited by WillPruitt
Link to comment
  • 0
On 6/8/2020 at 8:52 AM, tuanphan said:

Have you solved yet? If no, you can share url, we can check easier.

Do you have the code available to disable the mobile style from the whole website? I.E. I want my website to look the same on a phone as it does on a computer.

Link to comment
  • 0
On 5/8/2021 at 3:44 AM, meagangonzales said:

Do you have the code available to disable the mobile style from the whole website? I.E. I want my website to look the same on a phone as it does on a computer.

Do you use SS 7.0 or 7.1?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 5/10/2021 at 8:35 PM, meagangonzales said:

7.1

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
4 hours ago, 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;
}
}

 

Thank you! Is this code just for the header? I will link all of my pages. I would like the whole website to be disabled, but I will do the most I can if it's not possible.

https://www.viprec.com/

Link to comment
  • 0
On 5/12/2021 at 8:14 PM, meagangonzales said:

Thank you! Is this code just for the header? I will link all of my pages. I would like the whole website to be disabled, but I will do the most I can if it's not possible.

https://www.viprec.com/

The code for header.

With entire site, complex.

Can you describe in detail the desired layout on all pages? We will try to help as much as we can

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
8 hours ago, tuanphan said:

The code for header.

With entire site, complex.

Can you describe in detail the desired layout on all pages? We will try to help as much as we can

I will message you on a private forum so I can go into further detail. 

 

Link to comment
  • 0
On 5/14/2021 at 7:57 PM, meagangonzales said:

I will message you on a private forum so I can go into further detail. 

 

Okay. When you're done sent, let me know. I will check

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
12 hours ago, vjtk said:

tuanphan, question: I want to force desktop menu on ipad only, but not iphone. Can you help me with code for this? 

Each case will need a different code. Can you share link to your site?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 7/26/2021 at 8:38 AM, vjtk said:

Try adidng to Design > Custom CSS

/* Force desktop nav on tablet - version 2 */
@media screen and (min-width:768px) and (max-width:991px) {
.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;
    width: 70% !important;
}
.header-title {
    flex: 50% !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
14 hours ago, tuanphan said:

Try adidng to Design > Custom CSS

/* Force desktop nav on tablet - version 2 */
@media screen and (min-width:768px) and (max-width:991px) {
.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;
    width: 70% !important;
}
.header-title {
    flex: 50% !important;
}
}

 

I added the code but it did not change the hamburger menu on iPad. 

Link to comment
  • 0
On 5/12/2021 at 3:32 PM, 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;
}
}

 

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?

Link to comment
  • 0
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.

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...