Menu Problem After Update

[GDGerlach344]

After updating Weaver Extreme to 6.3.0 I’m noticing a problem with the main menu bar being superimposed over pages that have videos. If you click on the link below and select the first video (Fitness Pro) you should see the main menu bar in the middle of the video player. I’ve been using a plugin called Srizon Responsive Youtube Album Pro to show YouTube playlists. I have the latest version of Srizon. This only occurs  if the menu bar can be seen at the same time as the video when you click on the video. If you scroll down so the menu disappears and click on the video, the superimposed  menu bar is not there. I tried to post this in the Weaver and Plugin Interaction forum but was unable to select that option.

https://gerlachproductions.com/marketing/

[scrambler]

It is a z-index issue between the plugin and the menu.

If there is a setting for the z-index of the video in the plugin, set that to 2010

If not, you can raise the z-index of the plugin by adding the rule below to the theme Global Custom CSS rule box

.mfp-wrap {z-index:2010;}

If it does not work, leave the rule in place and post back

[GDGerlach344]

The plugin didn’t have a setting for z-index. When I went to add the rule to global, I noticed you had recently told me to add this rule to solve a problem with Show Sliders:

.menu-primary {z-index:1000;}
}

Will the new rule interfere with that?

[scrambler]

The rule for the menu could be used INSTEAD of the the one I just gave you for the plugin video, they both do the same.

The one for the menu pushes the menu lower

The one I gave you in this thread would push the video higher.

So you can just use the menu one, but without the extra curly bracket that would corrupt the CSS file….

Just this

.menu-primary {z-index:1000;}

 

[GDGerlach344]

I removed that extra curly bracket and it didn’t solve the problem.

[scrambler]

You rule is not in so there are two possibilities.

You put it in the wrong place (should be in the Theme Global Custom CSS Rule Box)

There is a syntax error in your Custom CSS that breaks the CSS file.

Go carefully through the CSS to look for errors. You can also use a CSS validator online and paste all your custom CSS in there to find the error.

If you are unable to figure it out, you can also paste the content of your CSS box here, so we can have a look.

[scrambler]

I think I found the issue.

Your rule was inside an @media rule, which is why there was an extra curly bracket at the end.

@media only screen and (max-width: 640px) {
#wrapper {
padding:10px
}

#content .wp-caption img {
max-width: 100%
}

#content .wp-caption {
max-width: 45%
}

.menu-primary {
z-index: 1000
}

}       

If so you will need to put the curly bracket back. (in yellow above) to close the @media rule….

 

Then what you want is move the Menu rule outside of the @media rule so it is active all the time (in blue below)

@media only screen and (max-width: 640px) {
#wrapper {
padding:10px
}
#content .wp-caption img {
max-width: 100%
}
#content .wp-caption {
max-width: 45%
}
}       

.menu-primary {
z-index: 1000
}

[GDGerlach344]

It didn’t fix the problem. I cleared my cache. What do you see on your end?

[scrambler]

That is because you have another @media rule before the one I mentioned that is ALSO missing a closing curly bracket, so everything after that is part of that @media rule and therefore the menu z-index rule is only applied on phone….

See in Blue the @ media rule opening, and in Yellow the missing closing curly bracket that you need to add.

You need to pay attention to syntax, or you will break your whole CSS file

@media only screen and (max-width: 580px) {
.myimage2,.mytext2 {
width:100%
}

.mytext2 {
border-left: none;
border-top: -1px solid black;
min-height: 0
}

}                                 

@media only screen and (max-width: 640px) {
#wrapper {
padding:10px
}

#content .wp-caption img {
max-width: 100%
}

#content .wp-caption {
max-width: 45%
}
}

.menu-primary {
z-index: 1000
}

[Author]

Posts