Pagniation arrow - navigation menu issue in seasons theme

Hi - am trying to figure out an issue with pagination arrows showing through a drop-down menu (see image). I looked at the CSS and I think I should change the arrow pagination styles, not the menu itself. I tried adding position: absolute and random z-index numbers to the pagination class that I think corresponds - prev and next .a - but doesn’t seem to be working. Anyone have other ideas or run into this issue before?

I’m not seeing this issue in the default version of Seasons. The default z-index of the open submenus is 20, and I don’t see any z-index value set for the pagination arrows. Do you have a link to your modified version anywhere?

For what it’s worth, I don’t think it’s a good idea to set the pagination arrows to position: absolute. You can still use z-index values with position: relative, and it’ll be less likely that you run into odd layout issues.

1 Like

Hi Kim,

You’re probably right - I inherited the work on this site, something might have been changed. I did find a “z-index” set to zero for nav.top (from one of the last sections of the css file), which I temporarily eliminated, but that doesn’t seem to have helped much. Our site isn’t open to the public yet, so I can’t give direct access to the css file (unfortunately). I don’t see a file upload option here, and the file itself is 2705 lines. Is there an easier way to get this to you or specific sections I should check within it? I’ll paste some of it below, let me know if you want to see other parts.

FWIW I noticed that the problem isn’t only with the pagination arrows, so that’s why I started thinking it might be a menu issue… yet it seems like sometimes the menu has no problem displaying on top of content (an image or a PDF window, for example) but then with other things (the pagination arrow, fotorama items) it has this problem.

 /* !---------- Navigation ---------- */
  nav ul {
    list-style: none;
    margin: 0 auto;
  }
  nav a {
    display: inline-block;
  }

  .top {
    padding: 0 16px;
  }
  .top ul {
    display: none;
  }
  .top a {
    padding-top: 0.75em;
    padding-bottom: 0.75em;
  }
  .top .mobile {
    margin: 1.5em auto;
    width: 100%;
  }

  .navigation ul, ul.navigation {
    padding-left: 0;
  }

  .secondary-nav, #secondary-nav {
    margin-bottom: 1.5em;
    *zoom: 1;
  }
  .secondary-nav:after, #secondary-nav:after {
    content: "";
    display: table;
    clear: both;
  }
  .secondary-nav .current, .secondary-nav .active, #secondary-nav .current, #secondary-nav .active {
    font-weight: 500;
    text-transform: uppercase;
  }
  .secondary-nav ul, #secondary-nav ul {
    padding-left: 0;
  }
  .secondary-nav li, #secondary-nav li {
    float: left;
    width: auto;
    margin-right: 16px;
  }

and the second Table of Contents section:


  /* !---------- Navigation --------- */
  nav.top ul {
    display: block;
    position: relative;
  }
  nav.top ul li {
    float: left;
    width: auto;
    position: relative;
  }
  nav.top ul li a {
    padding: 0.75em 16px;
  }
  nav.top ul li:hover {
    background-color: #315082;
  }
  nav.top ul li:hover > ul {
    display: block;
  }
  nav.top ul li ul {
    min-width: 300px;
    display: none;
    padding: 0;
    position: absolute;
    top: 42px;
    left: 0px;
  }
  nav.top ul li ul li {
    width: 100%;
    clear: both;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  nav.top ul li ul li ul {
    position: absolute;
    left: 100%;
    top: 0;
  }
  nav.top [aria-haspopup="true"]:after {
    font-family: "FontAwesome";
    content: "\f0da";
    margin-left: .5em;
  }
  nav.top [aria-haspopup="true"].open:after {
    content: "\f0d7";
  }
  nav.top .mobile {
    display: none;
  }

Never mind- I should not have wasted your time. It was precisely that z-index = 0 screwing everything up. I added it back to nav .top ul (in the second navigation section) and then just set it to 1 (probably what the original theme had I’m guessing?) and now it works fine.

Thanks for your help!

No problem—I’m glad everything worked out!