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

Home Forums Older releases 1.0.x Menu overlays on top of a popup page..... how to stop?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #3045
    RKwasi
    Participant

    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?

    #3055
    admin
    Keymaster

    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;
    }
    #3056
    RKwasi
    Participant

    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>
    #3071
    admin
    Keymaster

    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>
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?