Jump to content

Hamburger menu not working in squarespace but works in w3

Recommended Posts

Im really struggling with some of this code and finding this to be a common issue with squarespace.  Ill test out a code in w3 or codepen and then bring it into squarespace and it doesnt work.    any changes I make to #menu__toggle:checked ~ .menu__box {
doesnt do anything although this is what the menu box should look like when clicked.  Any suggestions?  

 

This is the code

 

<div class="hamburger-menu">
  <input id="menu__toggle" type="checkbox" />
  <label class="menu__btn" for="menu__toggle">
    <span></span>
  </label>

  <ul class="menu__box">
    <li><a class="menu__item" href="#">Selected</a></li>
    <li><a class="menu__item" href="#">Resume</a></li>
    <li><a class="menu__item" href="#">Contact</a></li>
    <li><a class="menu__item" href="#">Tools</a></li>
  </ul>
</div>

<style>
#menu__toggle {
  opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
  top: 0;
  transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  left: 0 !important;
}
.menu__btn {
  position: fixed;
  top: 40px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 2;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: grey;
  transition-duration: 0.25s;
}
.menu__btn > span::before {
  content: "";
  top: -8px;
}
.menu__btn > span::after {
  content: "";
  top: 8px;
}
.menu__box {
  display: block;
  position: fixed;
  top: 20px;
  left: 50%;
  width: 120px;
  height: 100%;
  margin: 0;
  padding: 50px 0;
  list-style: none;
  background-color: rgba(0, 0, 0, 0);
  transition-duration: 0.25s;
}
.menu__item {
  display: block;
  padding: 5px 10px;
  color: grey;
  font-family: "lato", sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: 0.25s;
}
.menu__item:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
</style>

 

Link to comment
  • Replies 4
  • Views 313
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Quote

Ill test out a code in w3 or codepen and then bring it into squarespace and it doesnt work.

codepen and the like are not code repositories specifically for SS code, unless the pen itself indicates that it is specifically SS compatible.

Sometimes it can take substantial work to get code that wasn't designed from the ground up to work with SS, to work, if at all.

It would help to be able to see the original pen to see how the effect is supposed to work.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
1 hour ago, creedon said:

codepen and the like are not code repositories specifically for SS code, unless the pen itself indicates that it is specifically SS compatible.

Sometimes it can take substantial work to get code that wasn't designed from the ground up to work with SS, to work, if at all.

It would help to be able to see the original pen to see how the effect is supposed to work.

https://new-website-code.w3spaces.com/saved-from-Tryit-2022-12-07.html

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.