tuanphan

You mean need to add a spacing to top?

Hi, Button looks fine

You can wrap query code for above code @media screen and (min-width:768px) { .custom-page>div:first-child { padding-left: 0 !important; } .custom-page>div:last-child { padding-right: 0 !important; } }

That code for Product Block. With product detail page, it needs a different code. What is your site url? We can help easier

Which screen sizes? I tested some & it looks fine

No. Design > Custom CSS

What is password?

You can add all below code to Code Block, no need to add to Custom CSS or Code Injection <div class="container"> <div class="row"> <div class="col-sm-12"> <h2>Website &amp; Software Development</h2> <div class="tab-container"> <ul class="nav nav-tabs nav-tabs-left nav-centered" role="tablist"> <li role="presentation" class="active"> <a href="#web-dev" data-toggle="tab" role="tab"> Website Development </a> </li> <li role="presentation"> <a href="#graphic" data-toggle="tab" role="tab"> Graphic Design </a> </li> <li role="presentation"> <a href="#marketing" data-toggle="tab" role="tab"> Online Marketing </a> </li> <li role="presentation"> <a href="#business" data-toggle="tab" role="tab"> Business Solutions </a> </li> </ul> <div id="my_side_tabs" class="tab-content side-tabs side-tabs-left"> <div class="tab-pane fade in active" id="web-dev" role="tabpanel"> <div class="col-sm-6"> <h3>Custom Web Design</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <ul> <li>Responsive</li> <li>Search Engine Optimization (SEO)</li> <li>W3C Compliant</li> <li>Custom CMS</li> <li>Hosting</li> <li>Webmaster Services</li> <li>Content Writing</li> </ul> </div> <div class="col-sm-6"> <h3>eCommerce</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <ul> <li>Shopify</li> <li>WordPress</li> <li>Paypal</li> </ul> </div> <div class="col-sm-6"> </div> </div> <div class="tab-pane fade" id="graphic" role="tabpanel"> <div class="col-sm-6"> <h3>UI/UX Designs</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <ul> <li>Smartphone &amp; Tablet UI</li> <li>Responsive Website UI</li> </ul> </div> <div class="col-sm-6"> <h3>Logos</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> </div> <div class="tab-pane fade" id="marketing" role="tabpanel"> <div class="col-sm-6"> <h3>Online Advertising</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <ul> <li>Facebook</li> <li>Google AdWords</li> <li>YouTube Ads</li> <li>Custom Ads</li> </ul> </div> <div class="col-sm-6"> <h3>Social Media</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <ul> <li>Blogging</li> <li>Facebook</li> <li>Twitter</li> <li>LinkedIn</li> <li>Instagram</li> <li>Pinterest</li> </ul> </div> <div class="col-sm-6"> <h3>Fundraising</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> </div> <div class="tab-pane fade" id="business" role="tabpanel"> <div class="col-sm-6"> <h3>Consulting</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <ul> <li>Company Branding</li> <li>Website Security</li> <li>Computer IT &amp; Repair</li> <li>Data Storage</li> </ul> </div> <div class="col-sm-6"> <h3>Analytics &amp; Reporting</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> </div> </div> </div> </div> </div> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/> <link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85807/font-awesome.css"/> <style> .tab-container { background: #344152; padding: 0; border: solid 1px #444; height: 440px; overflow: hidden; width: 100%; } .nav-tabs.nav-tabs-left { float: left; border-right: 0; } .nav-tabs.nav-tabs-left li a { margin-right: 0; border-radius: 0; border-right: none; } .nav-tabs.nav-tabs-left { border-bottom: 0; max-width: 33%; } .nav-tabs.nav-tabs-left li { float: none; margin: 0; text-align: left; } .nav-tabs.nav-tabs-left li a, .nav-tabs.nav-tabs-right li a { background-color: #344152; color: #fff; } .nav-tabs.nav-tabs-left li a:hover, .nav-tabs.nav-tabs-right li a:hover { background-color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.9); color: #444; } .nav-tabs.nav-tabs-left li.active a, .nav-tabs.nav-tabs-right li.active a, .nav-tabs.nav-tabs-left li.active .glyphicon, .nav-tabs.nav-tabs-right li.active .glyphicon { color: #333; } .nav-tabs.nav-tabs-left li.active a:hover, .nav-tabs.nav-tabs-right li.active a:hover, .nav-tabs.nav-tabs-left li.active .glyphicon:hover, .nav-tabs.nav-tabs-right li.active .glyphicon:hover { color: #444; } .nav-tabs.nav-tabs-left li.active a, .nav-tabs.nav-tabs-right li.active a, .nav-tabs.nav-tabs-left li.active a:hover, .nav-tabs.nav-tabs-right li.active a:hover, .nav-tabs.nav-tabs-left li.active a:focus, .nav-tabs.nav-tabs-right li.active a:focus { background-color: #fff; } .nav-tabs.nav-tabs-left li:not(:last-of-type), .nav-tabs.nav-tabs-right li:not(:last-of-type) { margin-bottom: -1px; } .tab-content { background: #fff; height: 440px; overflow-y: scroll; } .tab-content.side-tabs .tab-pane { display: none; padding: 20px; overflow-y: auto; } .tab-content.side-tabs-left { margin-left: 45px; } .tab-content.side-tabs-left .tab-pane { border-radius: 0; } .tab-content.side-tabs-left .tab-pane.active { display: block; background-color: #fff; border-color: #fff; color: #333; font-weight: 300; letter-spacing: 0.1em; } .tab-content.side-tabs-right { margin-right: 45px; } .tab-content.side-tabs-right .tab-pane { border-radius: 4px 0 0 4px; } main > .row:not(:first-of-type) { margin-top: 1.1em; } col.time, col.repname { width: 12em; } col.did { width: 9em; } .nav-tabs>li>a,.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { border: none; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://s.codepen.io/assets/libs/modernizr.js"></script> <script> (function () { 'use strict'; var sideTabsPaneHeight = function() { var navHeight = $('.nav-tabs.nav-tabs-left').outerHeight() || $('.nav-tabs.nav-tabs-right').outerHeight() || 0; var paneHeight = 0; $('.tab-content.side-tabs .tab-pane').each(function(idx) { paneHeight = $(this).outerHeight() > paneHeight ? $(this).outerHeight() : paneHeight; }); $('.tab-content.side-tabs .tab-pane').each(function(idx) { $(this).css('min-height', navHeight + 'px'); }); }; $(function() { sideTabsPaneHeight(); $( window ).resize(function() { sideTabsPaneHeight(); }); $( '.nav-tabs.nav-tabs-left' ).resize(function() { sideTabsPaneHeight(); }); }); }()); </script>

Add this to Mango Sild Collective Copy Page Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(() => { let add = '<div class="slider"><div class="slide-track" id="slides">' const interval = setInterval(() => { let imgs = $('section:nth-child(2) img'); if (imgs.length > 0) { for (let j=0; j<3; j++) { for (let i = 0; i<imgs.length; i++) { add += '<div class="slide"><img src="'+ $(imgs[i]).attr('data-src') +'" alt="" /></div>' } } add += '</div></div>' $(add).appendTo('section:nth-child(2)'); clearInterval(interval); } }, 100) }) </script> <style> section:nth-child(2) > .content-wrapper { display: none; } section:nth-child(2) { display: block !important; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-1687px)} } .slide img { height: 90px; } .slider { background: white; box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125); height: 100px; margin: auto; overflow:hidden; position: relative; width: 100%; padding: 50px 0; } .slide-track { animation: scroll 25s linear infinite; display: flex; } .slide { height: 100px; padding: 0 40px; } </style>

I see you figured it out with this code? nav.main-nav .active-link a { border-bottom: 1px solid currentColor; }

If you want to add a button (always appear under add to cart) just share link to a product, we can give the code to achieve this

Try adding to Design > Custom CSS @media screen and (max-width:767px) { .fe-62d55693b174fc3b0cce96dd { #block-62d55693470a593c0566f63f .sqs-gallery-design-autogrid-slide { width: calc(~"50% - 20px") !important; float: left !important; clear: none !important; } #block-62d55693470a593c0566f63f .sqs-gallery { display: block !important; grid: unset !important; gap: unset !important; } .summary-block-setting-design-autogrid .summary-item-list .summary-thumbnail-outer-container { width: 100% !important; left: unset !important; margin-left: unset !important; } .summary-block-setting-design-autogrid .summary-item-list .summary-thumbnail-outer-container img { position: static !important; top: 0 !important; width: 100% !important; height: auto !important; } #block-62d55693470a593c0566f63f .img-wrapper { padding-bottom: 30% !important; } .summary-block-setting-design-autogrid .summary-item-list .summary-content { flex-direction: column !important; justify-content: flex-start !important; } #block-62d55693470a593c0566f63f .sqs-gallery-design-autogrid-slide:nth-child(2n+1) { margin-right: 20px !important; }}}

Edit page > Add a Code Block > Paste this Codepen code <canvas></canvas> <script id="vertexShader" type="shader"> attribute vec3 aPosition; uniform mat4 u_modelMatrix; uniform mat4 u_viewMatrix; uniform mat4 u_projectionMatrix; uniform float u_time; varying vec3 color; //Noise from https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83 vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);} vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;} float snoise(vec3 v){ const vec2 C = vec2(1.0/6.0, 1.0/3.0) ; const vec4 D = vec4(0.0, 0.5, 1.0, 2.0); // First corner vec3 i = floor(v + dot(v, C.yyy) ); vec3 x0 = v - i + dot(i, C.xxx) ; // Other corners vec3 g = step(x0.yzx, x0.xyz); vec3 l = 1.0 - g; vec3 i1 = min( g.xyz, l.zxy ); vec3 i2 = max( g.xyz, l.zxy ); // x0 = x0 - 0. + 0.0 * C vec3 x1 = x0 - i1 + 1.0 * C.xxx; vec3 x2 = x0 - i2 + 2.0 * C.xxx; vec3 x3 = x0 - 1. + 3.0 * C.xxx; // Permutations i = mod(i, 289.0 ); vec4 p = permute( permute( permute( i.z + vec4(0.0, i1.z, i2.z, 1.0 )) + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) + i.x + vec4(0.0, i1.x, i2.x, 1.0 )); // Gradients // ( N*N points uniformly over a square, mapped onto an octahedron.) float n_ = 1.0/7.0; // N=7 vec3 ns = n_ * D.wyz - D.xzx; vec4 j = p - 49.0 * floor(p * ns.z *ns.z); // mod(p,N*N) vec4 x_ = floor(j * ns.z); vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N) vec4 x = x_ *ns.x + ns.yyyy; vec4 y = y_ *ns.x + ns.yyyy; vec4 h = 1.0 - abs(x) - abs(y); vec4 b0 = vec4( x.xy, y.xy ); vec4 b1 = vec4( x.zw, y.zw ); vec4 s0 = floor(b0)*2.0 + 1.0; vec4 s1 = floor(b1)*2.0 + 1.0; vec4 sh = -step(h, vec4(0.0)); vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ; vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ; vec3 p0 = vec3(a0.xy,h.x); vec3 p1 = vec3(a0.zw,h.y); vec3 p2 = vec3(a1.xy,h.z); vec3 p3 = vec3(a1.zw,h.w); //Normalise gradients vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w; // Mix final noise value vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0); m = m * m; return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) ); } void main() { color = aPosition; float displacement = snoise(aPosition) * u_time; vec3 direction = aPosition - vec3(0.); vec3 position = aPosition + direction * displacement ; gl_Position = u_projectionMatrix * u_viewMatrix * u_modelMatrix * vec4(position, 1.0); gl_PointSize = 0.75; } </script> <script id="fragmentShader" type="shader"> precision mediump float; varying vec3 color; void main() { gl_FragColor = vec4(color.x, color.y, 1., 1.); } </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <script> class GL { constructor() { this.CANVAS_WIDTH = window.innerWidth; this.CANVAS_HEIGHT = window.innerHeight; this.cvs; this.gl; this.pointsLength = 300000; this.time = 0.; this.modelMatrix = mat4.create(); this.viewMatrix = mat4.create(); this.projectionMatrix = mat4.create(); this.fragment = document.getElementById('fragmentShader').innerHTML; this.vertex = document.getElementById('vertexShader').innerHTML; this.parameters = {}; this.initGL(); this.initShaders(); this.initGeometry(); this.initProgram(); this.initUniform(); let t = [0, 0, -2.5]; mat4.translate(this.modelMatrix, this.modelMatrix, t); this.render(); } initGL() { this.cvs = document.querySelector('canvas'); this.gl = this.cvs.getContext('webgl'); this.gl.enable(this.gl.DEPTH_TEST); this.cvs.style.width = this.CANVAS_WIDTH + 'px'; this.cvs.style.height = this.CANVAS_HEIGHT + 'px'; this.cvs.width = this.CANVAS_WIDTH; this.cvs.height = this.CANVAS_HEIGHT; } initShaders() { this.vShader = this.gl.createShader(this.gl.VERTEX_SHADER); this.gl.shaderSource(this.vShader, this.vertex); this.gl.compileShader(this.vShader); this.fShader = this.gl.createShader(this.gl.FRAGMENT_SHADER); this.gl.shaderSource(this.fShader, this.fragment); this.gl.compileShader(this.fShader); if (!this.gl.getShaderParameter(this.vShader, this.gl.COMPILE_STATUS)) { console.log(this.gl.getShaderInfoLog(this.vShader)); } if (!this.gl.getShaderParameter(this.fShader, this.gl.COMPILE_STATUS)) { console.log(this.gl.getShaderInfoLog(this.fShader)); } } initUniform() { this.u_time = this.gl.getUniformLocation(this.program, "u_time"); this.u_modelMatrix = this.gl.getUniformLocation(this.program, "u_modelMatrix"); this.u_viewMatrix = this.gl.getUniformLocation(this.program, "u_viewMatrix"); this.u_projectionMatrix = this.gl.getUniformLocation(this.program, "u_projectionMatrix"); } initGeometry() { let vertices = this.createSphere(this.pointsLength, 0.5); this.positionsBuffer = this.gl.createBuffer(); this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionsBuffer); this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW); this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null); } initProgram() { this.program = this.gl.createProgram(); this.gl.attachShader(this.program, this.vShader); this.gl.attachShader(this.program, this.fShader); this.gl.linkProgram(this.program); this.gl.useProgram(this.program); this.positionAttribLoc = this.gl.getAttribLocation(this.program, 'aPosition'); if (!this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS)) { console.log(this.gl.getProgramInfoLog(this.program)); } } createSphere(count, size) { var len = count * 3; var positions = new Float32Array(len); for (var i = 0; i < len; i += 3) { let v = {}; let phi = Math.random() * 2 * Math.PI; let costheta = Math.random() * 2 - 1; let u = Math.random(); let theta = Math.acos(costheta); let r = size * Math.cbrt(u); v.x = r * Math.sin(theta) * Math.cos(phi); v.y = r * Math.sin(theta) * Math.sin(phi); v.z = r * Math.cos(theta); positions[i] = v.x; positions[i + 1] = v.y; positions[i + 2] = v.z; } return positions; } render() { this.gl.clearColor(0., 0., 0., 1); this.gl.clear(this.gl.COLOR_BUFFER_BIT); this.gl.viewport(0, 0, this.CANVAS_WIDTH, this.CANVAS_HEIGHT); this.gl.useProgram(this.program); this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionsBuffer); this.gl.enableVertexAttribArray(this.positionAttribLoc); this.gl.vertexAttribPointer(this.positionAttribLoc, 3, this.gl.FLOAT, false, 0, 0); this.time += 0.1; this.time = this.time % 40.; this.gl.uniform1f(this.u_time, this.time); let fov = 60; mat4.perspective(this.projectionMatrix, fov * (Math.PI / 180), this.CANVAS_WIDTH / this.CANVAS_HEIGHT, 0.1, 100.0); this.gl.uniformMatrix4fv(this.u_modelMatrix, false, this.modelMatrix); this.gl.uniformMatrix4fv(this.u_viewMatrix, false, this.viewMatrix); this.gl.uniformMatrix4fv(this.u_projectionMatrix, false, this.projectionMatrix); this.gl.drawArrays(this.gl.POINTS, 0, this.pointsLength / 3); }} let xp = new GL(); function raf() { requestAnimationFrame(raf); xp.render(); } raf(); </script>

You can use some code like this header nav a:hover{font-family: monospace !important;}

Have you found a solution yet?

12345 Incorrect password. Can you check it again?

I mean wrap this code in style tag and add to Page Header

Hover or Initial? If hover, I see you solved with this code .header-nav-item a:hover { color: #d92c5a !important; transition-duration: .4s; } If initial, use this CSS code span.header-nav-folder-item-content { color: #d92c5a !important; }

What is your site url? We can check easier

Swatch colors Like this site? https://www.laboart.com/shop/giacca-umbrella-kroynor (I helped this site)

Form button uses this class name .form-block input

I see you have 5 fonts You need to use 5 font-face code @font-face { font-family: 'cooperhewitt-heavyitalic'; src: url(https://static1.squarespace.com/static/634d2447e98a0b7dbaa88c96/t/634d298e31e0ae37060f8898/1666001295124/cooperhewitt-heavyitalic.otf),url(https://static1.squarespace.com/static/634d2447e98a0b7dbaa88c96/t/634d2993f77b8b342df92498/1666001299441/cooperhewitt-heavyitalic.woff),url(https://static1.squarespace.com/static/634d2447e98a0b7dbaa88c96/t/634d299a90b543251fb982aa/1666001306145/cooperhewitt-heavyitalic.woff2); } @font-face { font-family: 'kollektif'; src: url(https://static1.squarespace.com/static/634d2447e98a0b7dbaa88c96/t/634d2943980d17255dd684c0/1666001219197/kollektif.ttf),url(https://static1.squarespace.com/static/634d2447e98a0b7dbaa88c96/t/634d294b7cc5233359a195b5/1666001227590/kollektif.woff),url(https://static1.squarespace.com/static/634d2447e98a0b7dbaa88c96/t/634d295015d3324890a7308d/1666001232869/kollektif.woff2); } @font-face { font-family: 'kollektif-bold'; src: url(https://static1.squarespace.com/static/634d2447e98a0b7dbaa88c96/t/634d292f4daf9b40a987362f/1666001199703/kollektif-bold.ttf),url(https://static1.squarespace.com/static/634d2447e98a0b7dbaa88c96/t/634d29368663a650a606c58d/1666001206848/kollektif-bold.woff),url(https://static1.squarespace.com/static/634d2447e98a0b7dbaa88c96/t/634d293ccfa5832740fee22e/1666001212447/kollektif-bold.woff2); } @font-face { font-family: 'kollektif-bolditalic'; src: url(https://static1.squarespace.com/static/634d2447e98a0b7dbaa88c96/t/634d295ec9b27123a5725d63/1666001246979/kollektif-bolditalic.ttf),url(https://static1.squarespace.com/static/634d2447e98a0b7dbaa88c96/t/634d29577921a1649bf122fa/1666001239757/kollektif-bolditalic.woff),url(https://static1.squarespace.com/static/634d2447e98a0b7dbaa88c96/t/634d296367ec863012c412c9/1666001251892/kollektif-bolditalic.woff2); } @font-face { font-family: 'kollektif-italic'; src: url(https://static1.squarespace.com/static/634d2447e98a0b7dbaa88c96/t/634d296a8663a650a606c917/1666001258486/kollektif-italic.ttf),url(https://static1.squarespace.com/static/634d2447e98a0b7dbaa88c96/t/634d2972ad63934341667118/1666001266693/kollektif-italic.woff),url(https://static1.squarespace.com/static/634d2447e98a0b7dbaa88c96/t/634d2978aaf68e46d46690e9/1666001272406/kollektif-italic.woff2) } Then it will work.

I think adjust the customize button will be easier. The problem is that this code is causing issues with the templet, especially when it comes to the size of the buttons depending on screen width (mobile etc). Can you describe in detail this? We can give code to adjust button style

Can you share link to page where image disappear? We can check easier

Add this to Design > Custom CSS body.header--menu-open .header-title-logo a { background-image: none !important; } body.header--menu-open .header-title-logo img { visibility: visible !important; }