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