Code not working in browser - only shows immediately after editing

Site URL: https://www.cboothandson.co.uk/

Hello, I'm hoping someone can help.

I'm trying to add a mega menu to my website. I have followed the instruction that I found online. When it works it looks perfect, unfortunately, as soon as I refresh my page or view my site in the browser, outside of the admin screen the code seems to stop working properly. 

I created my mega menu in the footer of my website and then used append to put my footer inside the header dropdown.

I then added CSS to spread the footer out into a size that looks good when it pops out. This seems to be the bit of code that isn't working after saving and refreshing. In particular, it is the width that is the problem. Instead of spreading across the page, it pushes everything into one small coll um. I have copied in the code I am using below, both the java scrips and the CSS.

I have also attached images of how it should look vs how it should now look.

If someone genius out there could help me with this, I would forever be grateful!

Thank you!

Code below

HEADER (code injection) below

<script>

 $(function(){

$('.header-display-desktop [ href="/test-shop"] + .header-nav-folder-content').append($('[data-section-id="600ee397dc78bc2a440e8c91"]'))

  });

</script>

CSS below

.header-display-desktop [ href="/test-shop"] + .header-nav-folder-content{

 width:100vw !important;

 position:fixed;

 box-sizing:border-box;

 right:0 !important;

 left: 0 !important;

 padding:0px;

 border-bottom:1px solid;

 box-shadow:0px 6px 6px #000000;

}

.header-display-desktop [ href="/test-shop"] + .header-nav-folder-content

.header-nav-folder-item{

  display:none;

}

Site URL: https://www.cboothandson.co.uk/

Hello there

I'm hoping someone can help.

I wanted to add a mega menu to my website so I follow some instructions I found only. The instructions involved adding some JavaScript.

It say in order to make edits to my website I will have to either disable or remove the JavaScript in order to do this.

Can someone please explain what this actually means and how i go about doing it.

Please see JavaScript below as well as CSS.

JavaScript

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
  $(function(){
$('.header-display-desktop [ href="/test-shop"] + .header-nav-folder-content').append($('[data-section-id="600ee397dc78bc2a440e8c91"]'))
    });
</script>

CSS

// Mega Menu \\

.header-display-desktop [ href="/test-shop"] + .header-nav-folder-content{
  width:100vw !important;
  position:fixed;
  box-sizing:border-box;
  right:0 !important;
  left: 0 !important;
  padding:0px;
  border-bottom:1px solid;
  box-shadow:0px 6px 6px #000000;
}
.header-display-desktop [ href="/test-shop"] + .header-nav-folder-content
.header-nav-folder-item{
    display:none;
}

Hi. I solved some similar case. Do you still need help on this?

Hi @tuanphan

If you could assist that would be a great help. Thank you!

I'm having the same issue to the site I'm working on, trying to add the custom CSS to the styling of the "add to calendar" plugins on this page of the site: https://digital.bacnyc.org/browse.

The styling of the buttons appears fine when you're in the CUSTOM CSS section of squarespace backend (screenshot attached showing the buttons with the attempted new styling), but once you hit save and leave that, the styling reverts back. I've input the CSS into an editor to check for any errors and resolved those, and read some similar threads of people experiencing the same issue. Not sure what's happening here - any help would be appreciated!

Steve

@SVIXJO

What happens when you view the page in an incognito or private window? Do you see the same problem?