I've done something to my website with custom CSS & lost the social links on the mobile menu. Can anyone help? The links are there on the bottom left of the mobile menu however they are hidden with a dark square?
photo attached and social links circled in blue
I've tried for hours to tinker with the site styles with no luck either
thanks very much if you can help
Danny
I have used the following code in CUSTOM CSS:
@media only screen and (max-width: 767px) { #block-2205357a92763470b09e {
display: none;
}
}
@media only screen and (max-width: 767px) { #block-679045001e3b48e3f2df {
display: none;
}
}
@media only screen and (max-width: 767px) { #block-355ff33b2dcd33f16237 {
display: none;
}
}
@media only screen and (max-width: 767px) { #block-yui_3_17_2_1_1706910118805_8504 {
display: none;
}
}
@media only screen and (max-width: 767px) { #block-f7875dc49fd277900e86 {
display: none;
}
}
@media only screen and (max-width: 767px) { #block-4f590f4581facd7888e6 {
display: none;
}
}
@media only screen and (max-width: 767px) { #block-d2b1b4256dc5b15e737b {
display: none;
}
}
@media only screen and (max-width: 767px) { #block-a1c3c22158ce736086fa {
display: none;
}
}
@media only screen and (max-width: 767px) { #block-946e567ce772aafec4b1 {
display: none;
}
}
@media only screen and (min-width:640px) {
.header-actions-action--social .icon--fill:nth-of-type(4) {
svg {
display:none;
}
background-image: url(https://static1.squarespace.com/static/62b48f8d9ab01b0e774f4bdb/t/65b9d2f3c3d16f65c0f44db5/1706676979215/Whatsapp+business+corrected+pink+for+site+header+96+x+96.png);
background-size: 100%;
background-repeat: no-repeat;
}
}
.header-menu-actions-action:nth-of-type(4) {
svg {
display:none;
}
background-image: url(https://static1.squarespace.com/static/62b48f8d9ab01b0e774f4bdb/t/65b9dc6648f188483b5314ce/1706679398632/Whatsapp+business+pink+for+mobile+96+x+96.png);
background-size: 100%;
background-repeat: no-repeat;
}
.sqs-svg-icon--list a:nth-of-type(4) {
svg {
display:none;
}
background-image: url(https://static1.squarespace.com/static/62b48f8d9ab01b0e774f4bdb/t/65b9dee0fbfe7578c05f3630/1706680032691/Whatsapp+business+white+96+x+96.png);
background-size: 100%;
background-repeat: no-repeat;
}
.sqs-svg-icon--list a:nth-of-type(1) {
svg {
display:none;
}
background-image: url(https://static1.squarespace.com/static/62b48f8d9ab01b0e774f4bdb/t/65ba73ac5ee37a0ba29612c0/1706718126934/facebook.png);
background-size: 100%;
background-repeat: no-repeat;
}
.sqs-svg-icon--list a:nth-of-type(2) {
svg {
display:none;
}
background-image: url(https://static1.squarespace.com/static/62b48f8d9ab01b0e774f4bdb/t/65ba74bc381e0b40427ddc8a/1706718398962/instagram.png);
background-size: 100%;
background-repeat: no-repeat;
}
.sqs-svg-icon--list a:nth-of-type(3) {
svg {
display:none;
}
background-image: url(https://static1.squarespace.com/static/62b48f8d9ab01b0e774f4bdb/t/65ba769885c10d43cd02f781/1706718875495/youtube.png);
background-size: 100%;
background-repeat: no-repeat;
}
@media only screen and (min-width:640px) {
.header-actions-action--social .icon--fill:nth-of-type(1) {
svg {
display:none;
}
background-image: url(https://static1.squarespace.com/static/62b48f8d9ab01b0e774f4bdb/t/65ba73ac5ee37a0ba29612c0/1706718126934/facebook.png);
background-size: 100%;
background-repeat: no-repeat;
}
}
@media only screen and (min-width:640px) {
.header-actions-action--social .icon--fill:nth-of-type(2) {
svg {
display:none;
}
background-image: url(https://static1.squarespace.com/static/62b48f8d9ab01b0e774f4bdb/t/65ba74bc381e0b40427ddc8a/1706718398962/instagram.png);
background-size: 100%;
background-repeat: no-repeat;
}
}
@media only screen and (min-width:640px) {
.header-actions-action--social .icon--fill:nth-of-type(3) {
svg {
display:none;
}
background-image: url(https://static1.squarespace.com/static/62b48f8d9ab01b0e774f4bdb/t/65ba769885c10d43cd02f781/1706718875495/youtube.png);
background-size: 100%;
background-repeat: no-repeat;
}
}
body header#header a.icon {
background-color: rgba(0,0,0,0.5) !important;
}
@media screen and (max-width:767px) {
.floating {
right: 0px !important;
}
}
@media screen and (min-width: 768px) {
.vertical-line {
background: #FFFFFF;
width: 1px;
height: 200px;
margin: 0 auto;
}
}
a {
text-decoration: none !important;
}
// CHANGE IMAGE OPACITY ON HOVER
#block-7b4e26a3d885c70d994d img {
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease; }
#block-7b4e26a3d885c70d994d:hover img {
background: #000000 !important;
opacity: 0.85;
z-index: 0;
}
#block-yui_3_17_2_1_1707137695036_70327 img {
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease; }
#block-yui_3_17_2_1_1707137695036_70327:hover img {
background: #000000 !important;
opacity: 0.85;
z-index: 0;
}
#block-7b4e26a3d885c70d994d img {
background-color: rgba(0,0,0,0.9)
!important;
border-radius: 22%;
}
#block-yui_3_17_2_1_1707137695036_70327 img {
background-color: rgba(0,0,0,0.9) !important;
border-radius: 22%;
}
// CHANGE IMAGE ON HOVER
div#block-yui_3_17_2_1_1707137695036_45497 a:hover img {
opacity: .7;
}
div#block-yui_3_17_2_1_1707137695036_45497 a img {
transition: all ease-in-out 0.5s;
opacity: 1;
}
div#block-yui_3_17_2_1_1707137695036_45497 a {
background-image: url(https://static1.squarespace.com/static/62b48f8d9ab01b0e774f4bdb/t/65ca0c4110f5ea02e008fc6f/1707740236562/phone+3.png);
background-size: cover;
display: block;
}
I have used the following code injection CSS:
<!-- Styles your button (this is a black square with white text -->
<style>
.back-to-top {
background-color: #000000;
color: #FFFFFF;
opacity: .1;
transition: opacity .9s ease-in-out;
z-index: 999;
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
height: 50px;
box-sizing: border-box;
border-radius: 0%;
}
a.back-to-top {
font-weight: 1000;
letter-spacing: 2px;
font-size: 14px;
text-transform: uppercase;
text-align: center;
line-height: 1.6;
padding-left: 2px;
padding-top: 14px;
}
.back-to-top.show {
opacity: 1;
}
</style>
<!-- Adds the back to top link to your website -->
<a href="#top" id="back-to-top" class="back-to-top" style="display: inline;">Top</a>
<!-- Fades in the button when you scroll down -->
<script>
var link = document.getElementById("back-to-top");
var amountScrolled = 250;
function addClass(el, className) {
if (el.classList) {
el.classList.add(className);
} else {
el.className += ' ' + className;
}
}
function removeClass(el, className) {
if (el.classList)
el.classList.remove(className);
else
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
window.addEventListener('scroll', function(e) {
if ( window.scrollY > amountScrolled ) {
addClass(link, 'show');
} else {
removeClass(link, 'show');
}
});
</script>
<style>
html {
scroll-behavior:smooth
}
p, body header#header, h1, h2, h3, h4 {
a {
transition: 0.8s !important;
&:hover {
color: rgba(175,175,175,0.3) !important;
transition: 0.8s;
}
}
}
fadein img{
opacity:0.5;
transition: 1s ease;
}
.fadein img:hover{
opacity:1;
transition: 1s ease;
}
goosbumps reacted to a post in a topic:
I've done something to my website with custom CSS & lost the social links on the mobile menu. Can anyone help?
thanks for your suggestion/time.. I fully appreciate your effort in trying to help .. in the end the fix was missing a closing </style> tag at the end of your CSS in your Footer
Ziggy reacted to a post in a topic:
Images change on mobile scroll
