Menu overlays on top of a popup page..... how to stop?

[RKwasi]

Getting things looking right little by little ….
BUT

If you go to this sample page:

http://kwasi.com/sample/sample.html

and you click on the “Sample Page” link you’ll see the navigation menu overlay on top of the popup page.

If you reduce the browser window width so the hamburger icon appears and then click on it to show navigation tabs, and then again click on “Sample Page” you’ll see the navigation tabs overlay the page that pops up….

How can I prevent parts of the navigation from appearing on top of this popup page?

Is there a css element that’s causing this?
Might there be a conflict with other css I’m using on this page?

[admin]

The default fancybox z-index is 8020 defined in:

http://kwasi.com/sample/css/fancybox.css

and the default SmartMenus z-index is 9999 defined in:

http://kwasi.com/sample/css/sm-core-css.css

So to fix the issue you would need to set your main menu’s z-index to something lower than 8020 – e.g. you could use something like this:

#main-menu {
	z-index:8000;
}

[RKwasi]

Where would make this change/addition?

Changing z-index:9999 to z-index:8000 in “sm-core-css.css” didn’t seem to do anything different.

I was looking through the css files and the page but can’t seem to find the “id” references in the navigation html code anywhere, especially the “main-menu” one referenced below (I built the page using the sample “simple” code)

from my page:

<nav id="main-nav" role="navigation">
<!-- Mobile menu toggle button (hamburger/x icon) -->
<input id="main-menu-state" type="checkbox" />
<label class="main-menu-btn" for="main-menu-state">
  <span class="main-menu-btn-icon"></span> Toggle main menu visibility
</label>

<!-- Sample menu definition -->
  <ul id="main-menu" class="sm sm-simple">
        <li><a href="#">Membership</a></li>
        <li><a href="#">Advertising</a>
            <ul>
            <li><a href="#">Make a Payment</a></li>
            <li><a href="#">Submit an Ad</a></li>
            </ul>
        </li>
  </ul>
</nav>

[admin]

You need to include the following CSS rule in some way on your page:

#main-menu {
	z-index:8000;
}

You could add it to an external CSS file and link it on your page or even include it directly in your page source like this:

<style type="text/css">
#main-menu {
	z-index:8000;
}
</style>

[Author]

Posts