Skip to main content
jzutter
Known Participant
January 30, 2017
Answered

responive navigation

  • January 30, 2017
  • 1 reply
  • 286 views

How do i get my navigation to appear over the slideshow images? The site is responsive and it appears behind on browser sizes.

Also on my site on the size below 769 px the menu automatically appears and i want it to appear when the word menu is clicked on.

http://zutterdesign.com/bates/. the pages im having the overlay issue on is the Index, Food & Games and Amenities & Support.

How do i fix this?

This is the last thing i have to do to complete this project.

    This topic has been closed for replies.
    Correct answer osgood_

    jzutter wrote:

    How do i get my navigation to appear over the slideshow images? The site is responsive and it appears behind on browser sizes.

    Give the navigation container a position of relative and set the z-index to 1000;

    .navigation {

    position: relative;

    z-index: 1000;

    }

    To have the mobile menu display none at 768px and open when the 'menu bar' is clicked add the below to your css:

    @media screen and (max-width: 768px) {

    #menu {

    display: none;

    }

    }

    Then add this script to the <head> section of your page:

    <script>$(document).ready(function() {

      $('#menu').click(function(){

      $('#menu').show();

      });

      });

    </script>

    1 reply

    osgood_Correct answer
    Legend
    January 30, 2017

    jzutter wrote:

    How do i get my navigation to appear over the slideshow images? The site is responsive and it appears behind on browser sizes.

    Give the navigation container a position of relative and set the z-index to 1000;

    .navigation {

    position: relative;

    z-index: 1000;

    }

    To have the mobile menu display none at 768px and open when the 'menu bar' is clicked add the below to your css:

    @media screen and (max-width: 768px) {

    #menu {

    display: none;

    }

    }

    Then add this script to the <head> section of your page:

    <script>$(document).ready(function() {

      $('#menu').click(function(){

      $('#menu').show();

      });

      });

    </script>