hamburger menu

Site URL: https://clavichord-conch-pchc.squarespace.com/config/

Hi,

I've added an hamburger menu to my site. Everything works properly minus a major glitch, once the hamburger closes, the links are still clickable eventhough not visible. Any suggestion?

Thank you

Hi. What is password?

Sara&moi

On 1/14/2021 at 10:14 AM, dimitrifayard said:

Sara&moi

Add to Design > Custom CSS

body.header--menu-open .header-menu-nav {
    display: none !important;
}

On 1/17/2021 at 2:07 AM, tuanphan said:

Add to Design > Custom CSS

body.header--menu-open .header-menu-nav {
    display: none !important;
}

 

That did not work.

Can you post all code in Custom CSS, Code Injection here?

On 1/20/2021 at 3:26 AM, tuanphan said:

Can you post all code in Custom CSS, Code Injection here?

<label>
  <input type="checkbox"></input>
  <span class="menu">
    <span class="hamburger"></span>
  </span>
  <ul>
    <li>
      <a href="/home">Home/</a>
    </li>
    <li>
      <a href="/pastry">Pastry/</a>
    </li>
    <li>
      <a href="/chocolate">Chocolate/</a>
    </li>
    <li>
    <a href="/meet">Meet/</a>
    </li>
    <li><a href="/awards">Awards/</a>
    </li>
    <li><a href="/recipes">Recipes/</a>
    </li>
    <li><a href="/connect">Connect/</a>
    </li>
  </ul>
</label>

@import url(https://fonts.googleapis.com/css?family=Abel);
*, *:before, *:after {
  box-sizing: border-box;
}
html {
  font-size: 20px; 
}

body {
  font-family: "abel", serif;
  font-size: 1.4em;
  line-height: 1.4;
  overflow-x: hidden;
}
label .menu {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 100;
  width: 70px;
  height: 70px;
  overflow: hidden;
  background: #717c80;
  border-radius: 50% 50% 50% 50%;
  transition: 0.5s ease-in-out;
  box-shadow: 0 0 0 0 #717c80, 0 0 0 0 #717c80;
  cursor: pointer;
}
label .hamburger {
  position: absolute;
  top: 35px;
  left: 18px;
  width: 30px;
  height: 2.2px;
  background: #ae8e25;
  display: block;
  transform-origin: center;
  transition: 0.5s ease-in-out;
}
label .hamburger:after, label .hamburger:before {
  transition: 0.5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #4c5558;
    
}
label .hamburger:before {
  top: -10px;
}
label .hamburger:after {
  bottom: -10px;
}
label input {
  display: none;
}
label input:checked + .menu {
  box-shadow: 0 0 0 100vw #717c80, 0 0 0 100vh #717c80;
  border-radius: 0;
  opacity:0.6;
}
label input:checked + .menu .hamburger {
  transform: rotate(45deg);
}
label input:checked + .menu .hamburger:after {
  transform: rotate(90deg);
  bottom: 0;
}
label input:checked + .menu .hamburger:before {
  transform: rotate(90deg);
  top: 0;
}
label input:checked + .menu + ul {
  opacity: 1;
}
label ul {
  z-index: 200;
  position: absolute;
  top: 50%;
  left: 90%;
  transform: translate(-40%, -50%);
  opacity: 0;
  transition: 0.25s 0s ease-in-out;
  display:block;
}
label a {
  margin-bottom: 1em;
  display: block;
  color: white; 
  text-decoration: none;
}
label ul :first-letter {color:#ae8e25;}
label ul a:hover{color:#ae8e25 !important;}
label ul a:active {color:#ae8e25 !important;}
h4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: left !important;
}
@media (max-width: 680px){
  label ul{
  position:absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: left !important;
  font-family: "abel", serif;
  font-size: 1.2em;
  line-height: 0.7;
  overflow-x: hidden;  
  }}
 

The beginning of your CSS is HTML that won't work there. Are you not getting an error message in Design > Custom CSS?

Remove the HTML and the CSS may start working. Where does the HTML belong?

20 hours ago, creedon said:

The beginning of your CSS is HTML that won't work there. Are you not getting an error message in Design > Custom CSS?

Remove the HTML and the CSS may start working. Where does the HTML belong?

This first part is in the "PAGES" code injection up to line 26 </label>

The rest is in CSS

You need to add Line 01 - Line 26 into Code Injection Footer. I mean these code

<label>
  <input type="checkbox"></input>
  <span class="menu">
    <span class="hamburger"></span>
  </span>
  <ul>
    <li>
      <a href="/home">Home/</a>
    </li>
    <li>
      <a href="/pastry">Pastry/</a>
    </li>
    <li>
      <a href="/chocolate">Chocolate/</a>
    </li>
    <li>
    <a href="/meet">Meet/</a>
    </li>
    <li><a href="/awards">Awards/</a>
    </li>
    <li><a href="/recipes">Recipes/</a>
    </li>
    <li><a href="/connect">Connect/</a>
    </li>
  </ul>
</label>

18 hours ago, tuanphan said:

You need to add Line 01 - Line 26 into Code Injection Footer. I mean these code

<label>
  <input type="checkbox"></input>
  <span class="menu">
    <span class="hamburger"></span>
  </span>
  <ul>
    <li>
      <a href="/home">Home/</a>
    </li>
    <li>
      <a href="/pastry">Pastry/</a>
    </li>
    <li>
      <a href="/chocolate">Chocolate/</a>
    </li>
    <li>
    <a href="/meet">Meet/</a>
    </li>
    <li><a href="/awards">Awards/</a>
    </li>
    <li><a href="/recipes">Recipes/</a>
    </li>
    <li><a href="/connect">Connect/</a>
    </li>
  </ul>
</label>

 

yes, these lines are into PAGES Setting> Advanced>Page Header Code Injection.

The rest is in custom design CSS 

On 1/24/2021 at 12:51 PM, dimitrifayard said:

yes, these lines are into PAGES Setting> Advanced>Page Header Code Injection.

The rest is in custom design CSS 

so do you still need help or did you solve?

On 1/31/2021 at 8:19 PM, tuanphan said:

so do you still need help or did you solve?

still need help