<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <header> <img src="https://images.unsplash.com/photo-1443527216320-7e744084f5a7?ixlib=rb-0.3.5&q=80&fm=jpg&w=1080&fit=max&s=8812fe1aac55c13d17670c0c127a6df3" class="header-img" alt="header-img" /> </header> <nav class="navbar navbar-main"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="navbar-collapse collapse"> <ul id="menu-menu-1" class="nav navbar-nav"><li><a title="Home" href="#header">Home</a></li> <li><a title="About" href="#about">About</a></li> <li><a title="Menu" href="#menus">Menu</a></li> <li><a title="News" href="#news">News</a></li> <li><a title="Find Us" href="#contact">Find Us</a></li> <li><a title="Gallery" href="#gallery">Gallery</a></li> </ul> </div> </div> </nav> <div id="content"></div> </div>

.container { position:relative; } header .header-img { display:block; height:auto; max-width:100%; } nav.navbar-main.affix { position:absolute; top:0; left:0; width:100%; background:#333; z-index:9999l } #content { height:900px; }

// Header Image Size jQuery(document).ready( function($) { getImageSizes(); $(window).resize(function() { getImageSizes(); }); function getImageSizes() { $(".header-img").each(function() { var $this = $(this); $('nav.navbar-main').affix({ offset: { top: $this.height() } }); }); } });