Conflict with lightbox?

Hi Matt,

Any chance you can provide a link to your site?

Lightbox plugins often use iframes to display their content, which may be the issue here. If that’s the case, then I would try adjusting the selector you’re using in the JRSM settings. For example, if you have your .menu div that you want to use as a container, but you don’t want it resized in your iframe (assuming this is the issue), then you can try using a selector like :not(iframe) .menu. This may not apply perfectly to your situation, but the idea is that in theory you should be able to use CSS selectors to select for one and only one element if you so desire.

Make sense? Let me know if you have any other questions.

Thanks for the super-quick reply. I think I might not have been perfectly clear. Your menu is not showing in the lightbox, but instead shows up on the main site (in addition to the full-width menu that was already there) after I open and subsequently close the lightbox popup.

Looking at the page in Firebug…

Original code:
<select class="jquery-responsive-select-menu" name="jrsm-0">

After I click on an image to open it in the lightbox it changes to this:
<select class="jquery-responsive-select-menu" name="jrsm-0" style="display: none;">

After I close the lightbox it changes to this, overriding my CSS:
<select class="jquery-responsive-select-menu" name="jrsm-0" style="display: inline-block;">

Can you provide me with a link to your site?

https://linville.etclinuxtest.com/trains/

I just put the following in a media query for minimum 768px and it seemed to take care of the issue:

.jquery-responsive-select-menu {
	display: none!important;
}

This way my style overrides the inline style that is being applied to <select> which is overriding my original CSS.

However, since you’re willing to look (thank you) I have commented that line out so that you can see what it’s doing.

Hi again Matt,

Glad you found a fix. I took a look, and it seems to me like some other plugin (possibly the lightbox plugin) is modifying the select menu for some reason. You’ll notice that when the page first loads the code for the select menu looks like this:

<select class="jquery-responsive-select-menu" name="jrsm-0">

The <select> element has no style attribute.

When I click the lightbox image, however, some JS runs which then causes the select menu to look like this:
<select class="jquery-responsive-select-menu" name="jrsm-0" style="display: none;">

So something in the lightbox plugin (or less likely, some other plugin) is adding the style="display: none;" attribute.

Sounds like you have a fix, but I would love to know why in the world another plugin would be doing this ??