Jump to content

changing z-index of sections makes section uneditable

Go to solution Solved by Ziggy,

Recommended Posts

Changing the z-index has probably placed the section underneath other elements meaning the section becomes impossible to click on.

What are you trying to achieve with the z-index change?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

I can see the problem you're having, but I'm not sure what's causing it. What code did you use to achieve that menu style? Did you purchase it?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Nice, how did you install the HTML portion of the code?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

This in a code block: 

<div id="menu">
  <div class="hamburger">
    <svg viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40" stroke="#635B00" fill="#635B00" />
    </svg>
  </div>
  <div class="menu-inner">
      <ul>
        <li class="altar"><a href="#" id="effect">About</a></li>
        <li class="altar"><a href="#" id="effect">Services</a></li>
        <li class="altar"><a href="#" id="effect">Connect</a></li>
        <li class="altar"><a href="#" id="effect">Appointment</a></li>
      </ul>
    </div>
  </div>

Custom css:

// menu slide out //

.altar {
text-align: right;
font-size: 17.5pt;
    margin-left: 30px;
    margin-right: 0;
    width: 80%;
    margin-bottom: 20px;
  }

#menu {
border-left: 1px solid black;
  background: #EFE7DA !important;
    height: 100%;
    position: fixed;
    width: 400px;
    transition: 1000ms all cubic-bezier(0.19, 1, 0.22, 1);
    transform: translateX(100%);
    right: 60px;
    top: 0px;
  }

  #menu.expanded {

    transform: translateX(0%);
    right: 0px;
  }

  .menu-inner {
background: #EFE7DA;
     z-index: 9999999 !important;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hamburger {
    position: absolute;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-bottom: 10px;
    left: 22px;
  }

  ul {
    padding: 0;
    list-style: none;
    width: 80%;
  }

 

Link to comment
  • Solution
21 minutes ago, Leroy said:

This in a code block: 

and where did you put the code block? I would suggest in the footer if you want this on every page, or in the last section if you want it on just one page.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Ahh – Great suggestion!

The code block was placed on the home page in a section. After placing it in the footer and adjusting the z-index of .menu it worked like a charm. Also good to know how to actually utilize the footer code section in the future 😊 😉

Many thanks!

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.