Jump to content

Folder drop down is broken in my navigation bar

Recommended Posts

  • Replies 5
  • Views 547
  • Created
  • Last Reply
Posted
7 hours ago, tuanphan said:

Changing z-index of dropdown & .Header--overlay.Header.Header--bottom

z-index dropdown should be higher .Header--overlay.Header.Header--bottom

Thank you, you're always so helpful! 🙂

But if the Z index  is higher, won't my navigation bar turn funny? Since they are both transparent??

What would the code look like?

Posted

@ecs_cares Find and edit z-index: 100;

.Header--overlay.Header.Header--bottom {
    position: fixed;
    top: 73px;
    z-index: 9999;
    background-color: rgba(255,255,255,.65)
}

Next, find and edit z-index: 200;

.Header-nav-folder {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 100%;
    left: -99999px;
    z-index: 999;
    margin-left: -1em;
    padding: 1em;
    opacity: 0;
    white-space: nowrap;
    text-align: left;
    -webkit-transform: translate3d(0,10px,0);
    -moz-transform: translate3d(0,10px,0);
    -ms-transform: translate3d(0,10px,0);
    -o-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
    -webkit-transition: left 0s .2s linear,transform 0s .2s linear,opacity .2s ease-out;
    -moz-transition: left 0s .2s linear,transform 0s .2s linear,opacity .2s ease-out;
    -ms-transition: left 0s .2s linear,transform 0s .2s linear,opacity .2s ease-out;
    -o-transition: left 0s .2s linear,transform 0s .2s linear,opacity .2s ease-out;
    transition: left 0s .2s linear,transform 0s .2s linear,opacity .2s ease-out
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
22 minutes ago, tuanphan said:

.Header-nav-folder { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 100%; left: -99999px; z-index: 999; margin-left: -1em; padding: 1em; opacity: 0; white-space: nowrap; text-align: left; -webkit-transform: translate3d(0,10px,0); -moz-transform: translate3d(0,10px,0); -ms-transform: translate3d(0,10px,0); -o-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); -webkit-transition: left 0s .2s linear,transform 0s .2s linear,opacity .2s ease-out; -moz-transition: left 0s .2s linear,transform 0s .2s linear,opacity .2s ease-out; -ms-transition: left 0s .2s linear,transform 0s .2s linear,opacity .2s ease-out; -o-transition: left 0s .2s linear,transform 0s .2s linear,opacity .2s ease-out; transition: left 0s .2s linear,transform 0s .2s linear,opacity .2s ease-out }

Hmm

it's still looking like this:

2095168217_ScreenShot2019-11-28at10_08_03AM.thumb.png.f4ed5a9bd771af5d12d3f542e9d1b4e3.png

Posted
24 minutes ago, tuanphan said:

@ecs_cares Find and edit z-index: 100;


.Header--overlay.Header.Header--bottom {
    position: fixed;
    top: 73px;
    z-index: 9999;
    background-color: rgba(255,255,255,.65)
}

Next, find and edit z-index: 200;


.Header-nav-folder {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 100%;
    left: -99999px;
    z-index: 999;
    margin-left: -1em;
    padding: 1em;
    opacity: 0;
    white-space: nowrap;
    text-align: left;
    -webkit-transform: translate3d(0,10px,0);
    -moz-transform: translate3d(0,10px,0);
    -ms-transform: translate3d(0,10px,0);
    -o-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
    -webkit-transition: left 0s .2s linear,transform 0s .2s linear,opacity .2s ease-out;
    -moz-transition: left 0s .2s linear,transform 0s .2s linear,opacity .2s ease-out;
    -ms-transition: left 0s .2s linear,transform 0s .2s linear,opacity .2s ease-out;
    -o-transition: left 0s .2s linear,transform 0s .2s linear,opacity .2s ease-out;
    transition: left 0s .2s linear,transform 0s .2s linear,opacity .2s ease-out
}

 

Nevermind!! it's fixed. THANK YOU SO MUCH! 🙂 You're the best.

Archived

This topic is now archived and is closed to further replies.

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