Photo gallery shows behind menu
-
I am having a problem when I install any image gallery plugin, where the gallery will show up behind the main menu. So if I click an image the lightbox does show up in front of the menu but as soon as I click to close the gallery. It shows that same image behind the menu and then I have to click again for it to show the page correctly again. This happens with any image gallery plugin I install.
-
What plugin are you using for the galleries on that page?
-Kevin
I am using the below link as the gallery. However, I have that problem with any image gallery plugin I use.
I just tested the plugin and am not experiencing this. What do you have added to your custom CSS?
Something is breaking the layout of your header, either a plugin or some custom CSS or php.
-Kevin
I didn’t actually build the site but below is the custom CSS from the designer.
.headerclass {position: absolute; top: 0; display: inline-block; width: 100%;z-index: 9999; /* Permalink – use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+67&0.5+0,0+67 */
background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 67%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 67%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 67%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#80000000′, endColorstr=’#00000000′,GradientType=0 ); /* IE6-9 */}.ln-widgetContent td>a>img {
width: 400px!important;
}
.subhead {
display: none;
}
.footercredits p {
font-size: 13px;
padding: 4px 0;
}
.footerclass hr {
margin-top: 5px;
margin-bottom: 5px;
border: 0;
border-top: 1px solid #222;
}
.numbertop {
font-size: 25px;
margin-top: 8px;
}.popmake.theme-82 .popmake-title {
display: none!important;}
.topinfo {text-align: right; text-transform: uppercase;}.page-header {text-transform: uppercase;
border-top: 0px solid #eee;
border-bottom: 1px solid #eee;
border-color: rgba(0,0,0,.05);
padding-bottom: 8px;
margin: 0 0 20px;
padding-top: 8px;}.pt-cv-view a {
margin-top: 10px;
font-weight: 300 !important;
text-decoration: none !important;
outline: 0 !important;
}.home .pageheadclass {display: none!important;
}
.pageheadclass {
position: relative;
background: #f1f1f1 center center;
background-size: cover;
width: 100%;
height: 350px;
display: block;
}
.headerclass .container {padding-left: 0px; padding-right: 0px;}
.pt-cv-title {
height: 34px;
margin-top: 0 !important;
font-size: 16px;
line-height: 20px;
}
.home h3 {text-transform: uppercase;}
.pt-cv-view a {
margin-top: 10px;
font-weight: bold;
text-decoration: none !important;
outline: 0 !important;
}
.pt-cv-content p {min-height: 300px;}.headerclass hr {
margin-top: 5px;
margin-bottom: 10px;
border: 0;
border-top: 1px solid #eee;
}.sidebar .widget-inner li {
line-height: 18px;
border-bottom: solid 1px #e5e5e5;
border-color: rgba(0,0,0,.05);
padding: 6px 0;
}.cta {display: block; width: 100%;
text-align: center; color: #fff;
background: #041018;
}.sec1 {display:block; width: 100%;
min-height: 250px;
background: #000;
}.sec2 {display: block; width: 100%;
min-height: 250px;
background: #fff;
}.sec3 {display: block; width: 100%;
min-height: 250px;
background: #ccc;
}
.postmeta {display: none;}
.navclass .container { background: rgba(4, 17,26, 0.7); padding-left: 0px;
padding-right: 0px;}
.single-post #content {min-height: 400px;}
.home .contentclass .container {width: 100%; padding-left: 0; padding-right: 0;}
.home .contentclass { padding-bottom: 0px; padding-top: 0px; }
.contentclass { padding-top: 0px; }
.home #containerfooter {
padding-top: 0px;
}.headerclass, .headerclass h4 { color: #fff;}
.nav-trigger-case .kad-menu-name {display: none;}
.nav-trigger-case .kad-navbtn {
display: block;
float: none;}#nav-second ul.sf-menu>li.current-menu-item a {
}.page-header {
border-top: 0px solid #eee;
border-bottom: 1px solid #eee;
border-color: rgba(0,0,0,.05);
padding-bottom: 8px;
margin: 0 0 20px;
padding-top: 8px;
}
.cta .learnmore-2 {
color: #fff;
background: transparent;
border: 2px solid #fff;
padding: 10px 20px;
margin: 20px;
display: inline-block;
text-transform: uppercase;}
.single-post .learnmore-2, .pt-cv-wrapper .btn-success {
color: #000;border-radius: 0px;
background: transparent;
border: 2px solid #555;
padding: 10px 20px;
margin: 20px 0;
display: inline-block;
text-transform: uppercase;}.learnmore-2 {
color: #000;border-radius: 0px;
background: transparent;
border: 2px solid #555;
padding: 10px 20px;
margin: 20px;
display: inline-block;
text-transform: uppercase;}.pt-cv-2-col .pt-cv-title {
font-family: Lato;
line-height: 24px;
font-weight: 400;
font-style: normal;
font-size: 22px;
}.pt-cv-wrapper .btn-success:hover, .learnmore-2 {
color: #fff;
background-color: #333;
border-color: #333;
}.headerclass .learnmore {
color: #fff;
font-size: 12px;
margin-top: 10px;
display: inline-block;
background: transparent;
border: 1px solid #ffffff;
padding: 5px 5px;
text-transform: uppercase;
}
#nav-second ul.sf-menu>li a:hover {
color:#fff;
}.hrule {
position: relative;
margin: 15px auto;
height: 1px;
width: 95%;
background: #E5E5E5;
background: rgba(0,0,0,.05);
}
#nav-second ul.sf-menu>li:hover {
background: #37476C;}
#nav-second ul.sf-menu>li a {display: inline-block; width: 100%;padding:32px 25px;}
#nav-second ul.sf-menu>li {
width: 16.4%;
text-transform:uppercase;
}.kad-mobile-nav .kad-nav-inner li:hover {
background: rgba(255,255,255,.5);
}
#nav-second ul.sf-menu {
text-align:center;
}.sf-menu li {
float:none;
display:inline-block;
}.sec-inn {width: 1170px; margin: 0 auto; padding: 20px 0;}
@media (max-width: 768px)
{
.sec-inn { padding: 20px;
width: 100%;
margin: 0 auto;
}.pageheadclass {
position: relative;
background: #f1f1f1 center center;
background-size: cover;
width: 100%;
height: 150px;
display: block;
}.topinfo {text-align: center;}
.headerclass {position: static; top: 0; display: inline-block; width: 100%;z-index: 9999; background: transparent;
}}
Ok, hopefully that will shed some light.
- This reply was modified 7 years, 9 months ago by cwailes.
I’m not seeing anything in there that should be causing this, so I would start by going through your active plugins one by one and deactivating to see if this issue goes away when a certain plugin is shutoff.
Also, if you’re using a plugin for your galleries and lightboxes, then you’ll want to disable the theme one in Theme Options> Misc Settings.
Let me know if you find any plugins that are causing this issue.
-Kevin
I think I found it. When I went into the Them Options>Misc Settings and turned off Enable Virture Galleries to Override WordPress and Turn Off Them Lightbox, it doesn’t do it anymore. Thank you so much.
Great! I’m glad you were able to find that.
-Kevin
- The topic ‘Photo gallery shows behind menu’ is closed to new replies.