responive navigation

Report · Jan 30, 2017

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.

Report · Jan 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:

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

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

});

</script>

1 Correct answer