Jump to content

Header & Footer Missing on Mobile?

Recommended Posts

Site URL: https://oldroadcraftspirits.com/

Hello, 

I am currently jumping into an existing site for a client and have run into the issue of the header and footer missing on mobile. I cannot seem to find the cause of this. Does anyone have any ideas?

 

UPDATE: 

found a solution for the footer. Add the following to the custom css

body #footer-sections {
  display: block !important;
}



Here is my custom css 

/* Header */
// TIKTOK ICON
.header-actions-action--social [href*=tiktok] svg {
  display: none;
}

.header-actions-action--social [href*=tiktok]:hover {
  background: transparent !important;;
}
.header-actions-action--social [href*=tiktok]:after {
  content: "\e900";
  display: inline-block;
  font-family: 'icomoon';
  width: 80%;
  height: 80% ;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)   
  !important;
  position: absolute;
  color: #FFFFFF;
}

//on About page
#collection-617af5d0b1e5da2692cccdb3 .header-actions-action--social [href*=tiktok]:after {
    filter: invert(1);
    -webkit-filter: invert(1);
}

//on Barrel Program page
#collection-61f95e4b999f590aab590174 .header-actions-action--social [href*=tiktok]:after {
    filter: invert(1);
    -webkit-filter: invert(1);
}

//on Shop
#collection-620bccd06b51e371c543b62b .header-actions-action--social [href*=tiktok]:after {
    filter: invert(1);
    -webkit-filter: invert(1);
}

// LOGO -- 
//on About page
#collection-617af5d0b1e5da2692cccdb3 .header-title-logo {
    filter: invert(1);
    -webkit-filter: invert(1);
}

//on Barrel Program page
#collection-61f95e4b999f590aab590174 .header-title-logo {
    filter: invert(1);
    -webkit-filter: invert(1);
}

//on Shop
#collection-620bccd06b51e371c543b62b .header-title-logo {
    filter: invert(1);
    -webkit-filter: invert(1);
}


/* Footer */

//TIKTOK
.sqs-svg-icon--wrapper[href*=tiktok] .sqs-svg-icon--social {
  display: none;
}
.sqs-svg-icon--list:hover .sqs-svg-icon--wrapper[href*=tiktok] {
  background: transparent;
}
.sqs-svg-icon--wrapper[href*=tiktok] > div {
  display: none;
}
.sqs-svg-icon--wrapper[href*=tiktok]:after {
    content: "\e900";
    display: inline-block;
    font-family: 'icomoon';
    width: 100%;
    height: 100%;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    position: absolute;
    color: #FFFFFF;
}

//footer content wrapper block
#block-407672e083d341a2bb84{
  display:block;
}

@media screen and (min-width:640px) {
  #footerBlocksMiddle .col.sqs-col-4.span-4 {
    width: 33%;
}
      .footer  {
        display: block;
    }
}

 

Edited by irinaf
Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

2 hours ago, irinaf said:

Site URL: https://oldroadcraftspirits.com/

Hello, 

I am currently jumping into an existing site for a client and have run into the issue of the header and footer missing on mobile. I cannot seem to find the cause of this. Does anyone have any ideas?

 

UPDATE: 

found a solution for the footer. Add the following to the custom css

body #footer-sections {
  display: block !important;
}



Here is my custom css 

/* Header */
// TIKTOK ICON
.header-actions-action--social [href*=tiktok] svg {
  display: none;
}

.header-actions-action--social [href*=tiktok]:hover {
  background: transparent !important;;
}
.header-actions-action--social [href*=tiktok]:after {
  content: "\e900";
  display: inline-block;
  font-family: 'icomoon';
  width: 80%;
  height: 80% ;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)   
  !important;
  position: absolute;
  color: #FFFFFF;
}

//on About page
#collection-617af5d0b1e5da2692cccdb3 .header-actions-action--social [href*=tiktok]:after {
    filter: invert(1);
    -webkit-filter: invert(1);
}

//on Barrel Program page
#collection-61f95e4b999f590aab590174 .header-actions-action--social [href*=tiktok]:after {
    filter: invert(1);
    -webkit-filter: invert(1);
}

//on Shop
#collection-620bccd06b51e371c543b62b .header-actions-action--social [href*=tiktok]:after {
    filter: invert(1);
    -webkit-filter: invert(1);
}

// LOGO -- 
//on About page
#collection-617af5d0b1e5da2692cccdb3 .header-title-logo {
    filter: invert(1);
    -webkit-filter: invert(1);
}

//on Barrel Program page
#collection-61f95e4b999f590aab590174 .header-title-logo {
    filter: invert(1);
    -webkit-filter: invert(1);
}

//on Shop
#collection-620bccd06b51e371c543b62b .header-title-logo {
    filter: invert(1);
    -webkit-filter: invert(1);
}


/* Footer */

//TIKTOK
.sqs-svg-icon--wrapper[href*=tiktok] .sqs-svg-icon--social {
  display: none;
}
.sqs-svg-icon--list:hover .sqs-svg-icon--wrapper[href*=tiktok] {
  background: transparent;
}
.sqs-svg-icon--wrapper[href*=tiktok] > div {
  display: none;
}
.sqs-svg-icon--wrapper[href*=tiktok]:after {
    content: "\e900";
    display: inline-block;
    font-family: 'icomoon';
    width: 100%;
    height: 100%;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    position: absolute;
    color: #FFFFFF;
}

//footer content wrapper block
#block-407672e083d341a2bb84{
  display:block;
}

@media screen and (min-width:640px) {
  #footerBlocksMiddle .col.sqs-col-4.span-4 {
    width: 33%;
}
      .footer  {
        display: block;
    }
}

 

What is your site-wide password?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.