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