Disabling mobile menu on 7.1

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?

Can you share link to your site?

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

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?

@inside_the_square

Worked a treat. Gold star for you.

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

@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! 

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.

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.

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.

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?

On 5/9/2021 at 8:05 AM, tuanphan said:

Do you use SS 7.0 or 7.1?

7.1

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

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/

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

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. 

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

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

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?

Quote

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

sure, it's https://www.roofingcontractorokc.com/

On 7/26/2021 at 8:38 AM, vjtk said:

sure, it's https://www.roofingcontractorokc.com/

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

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. 

On 7/28/2021 at 5:57 AM, vjtk said:

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

What is your site url?

1 hour ago, tuanphan said:

What is your site url?

Already gave that above

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?