Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

hamburger menu


dimitrifayard

Question

  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

12 answers to this question

Recommended Posts

  • 0
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;  
  }}
 

Link to comment
  • 0
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?

1477811116_ScreenShot2021-01-21at10_31_53PM.png.8a72436e2b187d1c76de1638c155f0f5.png

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

Link to comment
  • 0

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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 

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...