Jump to content

Help with Code to undo forced mobile menu in Desktop

Recommended Posts

Posted

Hi! 

I really hope this is the right place...I just started on Squarespace about three weeks ago. I don't know anything about coding, so I bought a template off a seller on Etsy. I have run into a problem on my website now, due to her custom code, however, she hasn't been able to fix it herself. Essentially, I like how my website looks currently, the problem is that the shopping cart will not show on Desktop mode. It works perfectly fine on Mobile. The woman who did the code said that this could be due to her having a forced mobile menu on desktop, and I could try removing the burger button...I don't know how to do that! I'm too nervous that I will break my website, and I put about three weeks of work into it. 

Can someone help me with the code? I wouldn't mind the forced mobile menu staying on the Desktop .... as long as the shopping cart can show and work properly, otherwise I also wouldn't mind that being removed to put a normal desktop navigation bar in the header, so the shopping cart can work without the burger menu. 
 

If that makes sense...
I will copy/paste the code below (as long as that's ok! I think this little part is the section she means...if not, I can always post the full code below.) 

 

{
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
  /* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}


Thank you!! 

Posted

Hey there!

If you want to remove the code that hides the desktop menu and shows the mobile menu on desktop, erase all of the code that you provided above (make sure you don't accidentally erase something else or possibly erase a curly bracket). If you are still too nervous to do this, just copy all of the code in your Custom CSS and paste it into a Word Doc or Notepad so that you have a backup if something goes wrong. I could probably help a lot more if you included all of the code in your Custom CSS editor, that way I can just erase what needs to be erased and send the modified code to you!

Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

Posted

Hello! 

Thank you so much for your reply! So, I tried what you said, with removing the section I posted above. And that does indeed work, however, it removes some of the font across my entire website... I don't really understand why! Also, I don't know how to edit the labels in the header once they appear. Is there a way to keep the burger menu on desktop, but have the shopping cart icon show? I don't mind the current setup, as long as the cart works. But, I don't know if that's more complicated. I can post the full code below, (Luckily I did make a copy of it the other day!) : 

 

// Move Over Button //

.sqs-block-button .sqs-block-button-element--medium {
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

.sqs-block-button .sqs-block-button-element--medium:hover {
  margin-left: 50px;
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

// Move Over Button //

.sqs-block-button .sqs-block-button-element--medium {
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

.sqs-block-button .sqs-block-button-element--medium:hover {
  margin-left: 50px;
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

// Move Over Hyperlinks //

p a {
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

p a:hover {
  margin-left: 20px;
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

// Remove Hyphens //

p, h1, h2, h3 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
}


/* Medium Button Styling */
.sqs-block-button-element--medium {
 width: 70% !important;
}

  /* Read More Blog Link */
.blog-more-link {
padding: 20px 20px;

background: #b0824d; /*background color */
color: white !important; /*font color*/
}

.blog-more-link:hover{
background: #b99973; /*background colour on hover */
}
.blog-more-link:after {
  content: b0824d !important;
}


/***********************/
/* Testimonials Slider */
/***********************/
#block-yui_3_17_2_1_1635624735293_33184 .summary-thumbnail {
  overflow: visible !important;
  border: none;
}
#block-yui_3_17_2_1_1635624735293_33184 .summary-item-list {
  pointer-events: none;
}

#block-yui_3_17_2_1_1635624735293_33184 .summary-thumbnail-outer-container {
  height: 150px !important;
  width: 150px !important;
  margin: 0 auto;
}
#block-yui_3_17_2_1_1635624735293_33184 .summary-title {
  margin-top: 30px !important;
  font-size: 1rem !important;
  font-family: poppins;
  text-align: center !important;
  pointer-events: none;
}
#block-yui_3_17_2_1_1635624735293_33184 .summary-excerpt {
  margin-top: 30px !important;
}
#block-yui_3_17_2_1_1635624735293_33184 .summary-excerpt p {
  font-size: 24px !important;
  line-height: 1.6em !important;
  text-align: center !important;
}
#block-yui_3_17_2_1_1635624735293_33184 .sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
  color: #A36830 !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
}
#block-yui_3_17_2_1_1635624735293_33184 .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
  font-weight: 700 !important;
  font-size: 1.5rem !important;
}
#block-yui_3_17_2_1_1635624735293_33184 .sqs-gallery-design-carousel .sqs-gallery-controls {
  width: 100%;
  padding-right: 30px;
}

/* Testimonials Slider */
/***********************/
#block-c1452639f1ecbd178bd5 .summary-thumbnail {
  overflow: visible !important;
  border: none;
}
#block-c1452639f1ecbd178bd5 .summary-item-list {
  pointer-events: none;
}

#block-c1452639f1ecbd178bd5 .summary-thumbnail-outer-container {
  height: 150px !important;
  width: 150px !important;
  margin: 0 auto;
}
#block-c1452639f1ecbd178bd5 .summary-title {
  margin-top: 30px !important;
  font-size: 1rem !important;
  font-family: poppins;
  text-align: center !important;
  pointer-events: none;
}
#block-c1452639f1ecbd178bd5 .summary-excerpt {
  margin-top: 30px !important;
}
#block-c1452639f1ecbd178bd5 .summary-excerpt p {
  font-size: 24px !important;
  line-height: 1.6em !important;
  text-align: center !important;
}
#block-c1452639f1ecbd178bd5 .sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
  color: #A36830 !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
}
#block-c1452639f1ecbd178bd5 .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
  font-weight: 700 !important;
  font-size: 1.5rem !important;
}
#block-c1452639f1ecbd178bd5 .sqs-gallery-design-carousel .sqs-gallery-controls {
  width: 100%;
  padding-right: 30px;
}

// Solid Underline Form // 

.field-list .field-element{
    border-color: #cdd4cc !important;
    border-bottom: solid 1px #a36830 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    background-color: #ffffff !important;
  }
  .field-list select:focus{
    outline-color:  #cdd4cc !important;
  }
  .field-list .section{
    border-color: #cdd4cc !important;
  }

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) 
{
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
  /* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

@font-face {

    font-family: 'script';

       src: url('https://static1.squarespace.com/static/61a48696766fd36658dc8003/t/61aba729d189d475b3cd7db2/1638639402020/Reman.ttf');

  }

h4 {font-family: 'script';}

// 3 Images Per Row On Mobile - 7.1 Version //

@media only screen and (max-width: 640px) {
  .sqs-layout .sqs-gallery-design-grid-slide {
    width: 33.3% !important;
  }
}

Posted

Try this code and see if it works. I removed the CSS rule that hides the header action buttons, which includes the shopping cart.

// Move Over Button //

.sqs-block-button .sqs-block-button-element--medium {
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

.sqs-block-button .sqs-block-button-element--medium:hover {
  margin-left: 50px;
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

// Move Over Button //

.sqs-block-button .sqs-block-button-element--medium {
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

.sqs-block-button .sqs-block-button-element--medium:hover {
  margin-left: 50px;
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

// Move Over Hyperlinks //

p a {
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

p a:hover {
  margin-left: 20px;
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

// Remove Hyphens //

p, h1, h2, h3 {
  -webkit-hyphens: manual !important;
  -moz-hyphens: manual !important;
  -ms-hyphens: manual !important;
  hyphens: manual !important;
}


/* Medium Button Styling */
.sqs-block-button-element--medium {
  width: 70% !important;
}

/* Read More Blog Link */
.blog-more-link {
  padding: 20px 20px;

  background: #b0824d; /*background color */
  color: white !important; /*font color*/
}

.blog-more-link:hover{
  background: #b99973; /*background colour on hover */
}
.blog-more-link:after {
  content: b0824d !important;
}


/***********************/
/* Testimonials Slider */
/***********************/
#block-yui_3_17_2_1_1635624735293_33184 .summary-thumbnail {
  overflow: visible !important;
  border: none;
}
#block-yui_3_17_2_1_1635624735293_33184 .summary-item-list {
  pointer-events: none;
}

#block-yui_3_17_2_1_1635624735293_33184 .summary-thumbnail-outer-container {
  height: 150px !important;
  width: 150px !important;
  margin: 0 auto;
}
#block-yui_3_17_2_1_1635624735293_33184 .summary-title {
  margin-top: 30px !important;
  font-size: 1rem !important;
  font-family: poppins;
  text-align: center !important;
  pointer-events: none;
}
#block-yui_3_17_2_1_1635624735293_33184 .summary-excerpt {
  margin-top: 30px !important;
}
#block-yui_3_17_2_1_1635624735293_33184 .summary-excerpt p {
  font-size: 24px !important;
  line-height: 1.6em !important;
  text-align: center !important;
}
#block-yui_3_17_2_1_1635624735293_33184 .sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
  color: #A36830 !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
}
#block-yui_3_17_2_1_1635624735293_33184 .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
  font-weight: 700 !important;
  font-size: 1.5rem !important;
}
#block-yui_3_17_2_1_1635624735293_33184 .sqs-gallery-design-carousel .sqs-gallery-controls {
  width: 100%;
  padding-right: 30px;
}

/* Testimonials Slider */
/***********************/
#block-c1452639f1ecbd178bd5 .summary-thumbnail {
  overflow: visible !important;
  border: none;
}
#block-c1452639f1ecbd178bd5 .summary-item-list {
  pointer-events: none;
}

#block-c1452639f1ecbd178bd5 .summary-thumbnail-outer-container {
  height: 150px !important;
  width: 150px !important;
  margin: 0 auto;
}
#block-c1452639f1ecbd178bd5 .summary-title {
  margin-top: 30px !important;
  font-size: 1rem !important;
  font-family: poppins;
  text-align: center !important;
  pointer-events: none;
}
#block-c1452639f1ecbd178bd5 .summary-excerpt {
  margin-top: 30px !important;
}
#block-c1452639f1ecbd178bd5 .summary-excerpt p {
  font-size: 24px !important;
  line-height: 1.6em !important;
  text-align: center !important;
}
#block-c1452639f1ecbd178bd5 .sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
  color: #A36830 !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
}
#block-c1452639f1ecbd178bd5 .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
  font-weight: 700 !important;
  font-size: 1.5rem !important;
}
#block-c1452639f1ecbd178bd5 .sqs-gallery-design-carousel .sqs-gallery-controls {
  width: 100%;
  padding-right: 30px;
}

// Solid Underline Form // 

.field-list .field-element{
  border-color: #cdd4cc !important;
  border-bottom: solid 1px #a36830 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  background-color: #ffffff !important;
}
.field-list select:focus{
  outline-color:  #cdd4cc !important;
}
.field-list .section{
  border-color: #cdd4cc !important;
}

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) 
{
  /* hide navigation */
  .header-nav {
    display: none;
  }
  /* show burger */
  .header-burger {
    display: flex;
    margin-left: 20px;
  }
  /* Show overlay mobile menu */
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
}

@font-face {

  font-family: 'script';

  src: url('https://static1.squarespace.com/static/61a48696766fd36658dc8003/t/61aba729d189d475b3cd7db2/1638639402020/Reman.ttf');

}

h4 {font-family: 'script';}

// 3 Images Per Row On Mobile - 7.1 Version //

@media only screen and (max-width: 640px) {
  .sqs-layout .sqs-gallery-design-grid-slide {
    width: 33.3% !important;
  }
}

 

Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

Posted
Just now, aelfgifu944 said:

Ah, thank you so much!! That worked perfectly. 🙂 I really appreciate the assistance, I've been trying to figure this out for days!

No problem, glad I could help!

Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

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.