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

Folder drop down is broken in my navigation bar

Question

5 answers to this question

Recommended Posts

  • 0
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?

Share this post


Link to post
  • 0

@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
}

 


 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31.

Share this post


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

Share this post


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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...