I'm having some trouble regarding my mobile navigation for a personal project, a customised 'fixed' navbar, with simply four links, no brand etc.
The navigation works perfectly on desktop, even when the window is resized past the breakpoint at which the nav-toggle is activated / appears. However in safari responsive design mode, the links don't work at all, it recognises that they're links, however upon clicking them all that happens is the nabber collapses back in on itself, as desired. When preview on iPhone I have no luck with them either.
Anyone able to shed some light as to where I'm going wrong, been trying to wrap my head around it all week to no avail.
Here's my index.html:
$(document).ready(function() {
// Bind to the click of all links with a #hash in the href
$('a[href^="#"]').click(function(e) {
// Prevent the jump and the #hash from appearing on the address bar
e.preventDefault();
// Scroll the window, stop any previous animation, stop on user manual scroll
// Check https://github.com/flesler/jquery.scrollTo for more customizability
$(window).stop(true).scrollTo(this.hash, {duration:1000, interrupt:true});
});
});
$(function() {
$('.nav a').on('click', function(){
if($('.navbar-toggle').css('display') !='none'){
$('.navbar-toggle').trigger( "click" );
}
});
});
$('.dropdown-toggle').click(function(e) {
e.preventDefault();
setTimeout($.proxy(function() {
if ('ontouchstart' in document.documentElement) {
$(this).siblings('.dropdown-backdrop').off().remove();
}
}, this), 0);
}); /* new nav */
header {
height: 75px;
}
header container {
height: 75px;
}
.navbar {
z-index: 9999;
}
.logo {
color: #f1f1dc;
padding: 0;
margin:0;
margin-top: 0px;
font-size: 20px;
}
.navbar, .navbar-default {
padding-top: 12px;
height: 75px;
border-radius: 0;
border: none;
float: right;
background: #8F0853;
width: 100%;
position: fixed;
border-bottom: 2px #B5B690 solid;
}
.nav ul li {
display: inline-block;
text-align: center;
vertical-align: middle;
}
.navbar-default .navbar-nav > li > a {
color: #f1f1dc;
font-family: 'open_regular';
font-size: 1em;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.2em;
}
.navbar-default .navbar-nav > li > a:hover {
color: #B5B690;
}
.navbar-default .navbar-toggle{
border-color: rgba(255,255,255,0.00);
}
.navbar-default .navbar-toggle .icon-bar{
background-color: #f1f1dc;
}
.navbar-default .navbar-toggle:hover{
border-color: #f1f1dc;
background-color: rgba(255,255,255,0.00);
transition: 0.5s linear;
}
.dropdown-backdrop {
position: static;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!--Logo-->
<div class="navbar-brand logo">
</div>
<!--Hamburger Menu-->
<button class="navbar-toggle animated wow fadeInRight" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--Full-Width Navbar-->
<div class="collapse navbar-collapse navHeaderCollapse" id="nav_collapse">
<ul class="nav navbar-nav navbar-right animated wow fadeInDown">
<li><a class="right-space" href="#about">About</a></li>
<li><a class="right-space" href="#menu">Menu</a></li>
<li><a class="right-space" href="#location">Location</a></li>
<li><a class="right-space" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Hero Section -->
<section class="hero" id="hero">
<div class="container">
<div class="caption">
<h1 class="logo text-uppercase animated wow fadeInLeft">Vee's Kitchen</h1>
<hr class="animated wow fadeInLeft">
<p class="animated wow fadeInLeft">
Serving hearty, homecooked breakfasts, freshly made-to-order sandwhiches, cake, coffee and more from 8AM, seven days a week!
<br><br>
Scroll down or use the menu above to learn more!
</p>
<button type="button" class="btn btn-sm btn-default animated wow fadeInLeft facebook-button">Find us on Facebook!</button>
</div>
</div>
</section>
<!-- End Hero Section -->
<!-- End Featured On Section -->
<section class="featured_on">
<div class="container">
<ul class="list-unstyled text-center clearfix">
<li class="col-lg-12 col-md-12 col-sm-12 animated wow fadeInUp" data-wow-delay="1s">
<h3 class="text-center">"Life is like a sandwhich, you have to fill it with the best ingredients!"</h3>
<br>
<p class="text-center">Veronica Gallop, Head Chef & Owner</p>
<br>
</li>
</ul>
</div>
</section>
<!-- About Section -->
<section class="new-about" id="about">
<div class="row about_img">
</div>
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-8 details animated wow fadeInDown" data-wow-delay="0s">
<h1 class="text-uppercase">NOT YOUR AVERAGE CAFE.</h1>
<p class="text-lowercase">vel ultrices mauris libero id diam. Vivamus tellus sagittis facilisis nisi quis mollis risus quisque ultrices elit.vel ultrices mauris libero id diam. vivamus tellus sagittis facilisis nisi quis mollis risus quisque ultrices elit.vel ultrices mauris libero id diam. vivamus tellus sagittis facilisis nisi quis mollis risus quisque ultrices elit.vel ultrices mauris libero id diam. vivamus tellus sagittis facilisis nisi quis mollis risus quisque ultrices elit.vel ultrices mauris libero id diam. vivamus tellus sagittis facilisis nisi quis mollis risus quisque ultrices elit.</p>
</div>
<div class="col-sm-4 col-md-4 details animated wow fadeInDown" data-wow-delay=".2s">
<h1 class="text-uppercase">Opening Times</h1>
<p class="text-lowercase">vel ultrices mauris libero id diam. Vivamus tellus sagittis facilisis nisi quis mollis risus quisque ultrices elit.</p>
</div>
</div>
</div>
</section>
<!-- End About Section -->
<section class="featured_on">
<div class="container">
<ul class="list-unstyled text-center clearfix">
<li class="col-lg-12 col-md-12 col-sm-12 animated wow fadeInUp" data-wow-delay="1s">
<h3 class="text-center">Here's just a glimpse of whats on offer here at Vee's...</h3>
<br>
<p class="text-center">Much more than just a greasy spoon.</p>
<br>
</li>
</ul>
</div>
</section>
<!-- Menu / Food Section -->
<!-- IMAGE SLIDER -->
<section class="image_slider" id="menu">
<div id="carousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/placeholder_imgs/retouched_imgs/burgers.jpg" alt="First slide image" class="center-block">
<div class="carousel-overlay">
<div class="carousel-caption">
<h1 class="text-uppercase">This, is a breakfast.</h1>
</div>
<div class="carousel-content">
<p class="text-center text-lowercase">It's often said that breakfast is the most important meal of the day, and it really is. That's why at Vee's only the freshest, locally sourced ingredients go into our beautiful brekkies. With four varitions to chose from, even the biggest of appetites are no match for our hang-over heros.</p>
</div>
</div>
</div>
<div class="item">
<img src="img/placeholder_imgs/retouched_imgs/burgers.jpg" alt="Second slide image" class="center-block">
<div class="carousel-caption">
<h1 class="text-uppercase">This, is a heading.</h1>
</div>
<div class="carousel-content">
<p class="text-center text-lowercase">It's often said that breakfast is the most important meal of the day, and it really is. That's why at Vee's only the freshest, locally sourced ingredients go into our beautiful brekkies. With four varitions to chose from, even the biggest of appetites are no match for our hang-over heros.</p>
</div>
</div>
<div class="item"><img src="img/placeholder_imgs/retouched_imgs/burgers.jpg" alt="Third slide image" class="center-block">
<div class="carousel-caption">
<h1 class="text-uppercase">This, is another breakfast.</h1>
</div>
<div class="carousel-content">
<p class="text-center text-lowercase">It's often said that breakfast is the most important meal of the day, and it really is. That's why at Vee's only the freshest, locally sourced ingredients go into our beautiful brekkies. With four varitions to chose from, even the biggest of appetites are no match for our hang-over heros.</p>
</div>
</div>
</div>
<a><span class="sr-only">Next</span></a>
</div>
</section>
<section class="menu-top">
<div class="container">
<div class="row text-center">
<div class="col-sm-4 col-md-4 details animated wow fadeInDown" data-wow-delay="0s">
<h1 class="text-uppercase">Stand out factor 1</h1>
<p class="text-lowercase">vel ultrices mauris libero id diam. Vivamus tellus sagittis facilisis nisi quis mollis risus quisque ultrices elit.</p>
</div>
<div class="col-sm-4 col-md-4 details animated wow fadeInDown" data-wow-delay=".1s">
<h1 class="text-uppercase">Stand out factor 2</h1>
<p class="text-lowercase">vel ultrices mauris libero id diam. Vivamus tellus sagittis facilisis nisi quis mollis risus quisque ultrices elit.</p>
</div>
<div class="col-sm-4 col-md-4 details animated wow fadeInDown" data-wow-delay=".2s">
<h1 class="text-uppercase">Stand out factor 3</h1>
<p class="text-lowercase">vel ultrices mauris libero id diam. Vivamus tellus sagittis facilisis nisi quis mollis risus quisque ultrices elit.</p>
</div>
</div>
</div>
</section>
<section class="menu-bottom">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-8 details animated wow fadeInLeft" data-wow-delay=".3s">
<h1 class="text-uppercase">Heading about our menu</h1>
<p class="text-lowercase">
vel ultrices mauris libero id diam. Vivamus tellus sagittis facilisis nisi quis mollis risus quisque ultrices elit.vel ultrices mauris libero id diam. vivamus tellus sagittis facilisis nisi quis mollis risus quisque ultrices elit.vel ultrices mauris libero id diam. vivamus tellus sagittis facilisis nisi quis mollis risus quisque ultrices elit.vel ultrices mauris libero id diam. vivamus tellus sagittis facilisis nisi quis mollis risus quisque ultrices elit.vel ultrices mauris libero id diam. vivamus tellus sagittis facilisis nisi quis mollis risus quisque ultrices elit.
</p>
</div>
<div class="col-sm-4 col-md-4 details animated wow fadeInRight" data-wow-delay=".4s">
<h1>Menu Download</h1>
<p class="text-lowercase">This is a side note, with a chunk of text about how you can download a full copy of our latest menu. With a button below it.</p>
<button type="button" class="btn btn-sm btn-default animated wow fadeInUp facebook-button" data-wow-delay="0.6s">Download Menu</button>
<button type="button" class="btn btn-sm btn-default animated wow fadeInUp facebook-button" data-wow-delay="0.6s">Download Order Slip</button>
</div>
</div>
</div>
</section>
<!-- And App Features Section -->
<!-- Reviews Section -->
<section class="featured_on">
<div class="container">
<ul class="list-unstyled text-center clearfix">
<li class="col-lg-12 col-md-12 col-sm-12 animated wow fadeInUp" data-wow-delay="1s" >
<h3 class="text-center">But don't just take our word for it...</h3>
<br>
<p class="text-center">Here's what our customers have to say!</p>
<br>
</li>
</ul>
</div>
</section>
<section id="Customer_Reviews">
<div class="container animated wow fadeInDown">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="quote"><i class="fa fa-quote-left fa-4x"></i></div>
<div class="carousel slide" id="fade-quote-carousel" data-ride="carousel" data-interval="3000">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#fade-quote-carousel" data-slide-to="0"></li>
<li data-target="#fade-quote-carousel" data-slide-to="1" class="active"></li>
<li data-target="#fade-quote-carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item">
<div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
<blockquote>
<p>"Great food, great service. Very clean and tidy, This reflects the five star hygiene certificate I noticed on the door. It's also on the level so is well suited for wheelchair access and pushchairs. I also noted that there were high chairs for the young ones. A cracking Mocha made here too. I'll definitely be back!"</p>
<p class="reviewee">Andy K</p>
</blockquote>
</div>
<div class="item">
<div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
<blockquote>
<p>"Excellent local cafe with friendly staff and good selection of freshly made sandwiches and drinks to eat in or take out. Competitively priced."</p>
<p class="reviewee">Mike P</p>
</blockquote>
</div>
<div class="active item">
<div class="profile-circle" style="background-color: rgba(145,169,216,.2);"></div>
<blockquote>
<p>"Beautifully fitted cafe in the heart of Bradley Stoke, fantastic menu and competetive prices. Lovely owner and staff, a really warm, welcoming atmosphere for all. Great food, cakes, coffee and more!"</p>
<p class="reviewee">Kieran H</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-sm-8">
<h1 class="text-uppercase">We value your feedback</h1>
<p class="text-lowercase"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</div>
</div>
</div>
</section>
<!-- End Testimonials Section -->
<!-- Location Section -->
<section class="location" id="location">
<section class="featured_on">
<div class="container">
<ul class="list-unstyled text-center clearfix">
<li class="col-lg-12 col-md-12 col-sm-12 animated wow fadeInUp" data-wow-delay="1s">
<h3 class="text-center">The hunt is over...</h3>
<br>
<p class="text-center">Here's exactly where to find us!</p>
<br>
</li>
</ul>
</div>
</section>
<div class="mapouter"><div class="gmap_canvas"><a href="https://www.webdesign-muenchen-pb.de"></a><iframe width="100%" height="550px" id="gmap_canvas" src="https://maps.google.com/maps?q=Vee's Kitchen BS32 0BQ&t=&z=17&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe></div><style>.mapouter{overflow:hidden;height:550px;width:100%;}.gmap_canvas {background:none!important;height:550px;width:100%;}</style></div>
</section>
<section class="location-bottom">
<div class="container">
<div class="row text-center">
<div class="col-sm-8 col-md-8 details animated wow fadeInDown" data-wow-delay="0s">
<h1 class="text-uppercase">Stand out factor 1</h1>
<p class="text-lowercase">vel ultrices mauris libero id diam. Vivamus tellus sagittis facilisis nisi quis mollis risus quisque ultrices elit.</p>
</div>
<div class="col-sm-4 col-md-4 details animated wow fadeInDown" data-wow-delay=".2s">
<h1 class="text-uppercase">Where to find us!</h1>
<p class="text-lowercase">vel ultrices mauris libero id diam. Vivamus tellus sagittis facilisis nisi quis mollis risus quisque ultrices elit.</p>
</div>
</div>
</div>
</section>
<!-- End Email Subscription Section -->
<section class="contact" id="contact">
<div class="container">
<div class="row text-center">
<div class="col-sm-12 col-md-12 animated wow fadeInUp" data-wow-deley="0s">
<h1 class="text-uppercase">Get in touch, we'd love to hear from you!</h1>
<p class="text-lowercase">vel ultrices mauris libero id diam. Vivamus tellus sagittis facilisis nisi quis mollis risus quisque ultrices elit.</p>
</div>
</div>
<div class="row text-center">
<div class="col-sm-4 col-md-4 details animated wow fadeInDown" data-wow-delay="0s">
<h1 class="text-uppercase">Contact 1</h1>
<p class="text-lowercase">vel ultrices mauris libero id diam. Vivamus tellus sagittis facilisis nisi quis mollis risus quisque ultrices elit.</p>
</div>
<div class="col-sm-4 col-md-4 details animated wow fadeInDown" data-wow-delay=".2s">
<h1 class="text-uppercase">Contact 2</h1>
<p class="text-lowercase">vel ultrices mauris libero id diam. Vivamus tellus sagittis facilisis nisi quis mollis risus quisque ultrices elit.</p>
</div>
<div class="col-sm-4 col-md-4 details animated wow fadeInDown" data-wow-delay=".4s">
<h1 class="text-uppercase">Contact 3</h1>
<p class="text-lowercase">vel ultrices mauris libero id diam. Vivamus tellus sagittis facilisis nisi quis mollis risus quisque ultrices elit.</p>
</div>
</div>
</div>
</section>
<!-- Footer Section -->
<footer>
<ul class="list-unstyled list-inline app_platform">
<li class="animated wow fadeInDown" data-wow-delay="0s">
<a href="">Link 1</a>
</li>
<li class="animated wow fadeInDown" data-wow-delay=".1s">
<a href="">Link 2</a>
</li>
<li class="animated wow fadeInDown" data-wow-delay=".2s">
<a href="">Link 3</a>
</li>
</ul>
<p class="copyright animated wow fadeIn" data-wow-duration="2s"><strong>Vee's Cafe</strong> All Rights Reserved</p>
</footer>
<!-- End Footer Section -->
<!--- scripts --->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="js/wow.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/init.js"></script>
Here's my CSS customisations regarding the navbar:
/* new nav */
header {
height: 75px;
}
header container {
height: 75px;
}
.navbar {
z-index: 9999;
}
.logo {
color: #f1f1dc;
padding: 0;
margin:0;
margin-top: 0px;
font-size: 20px;
}
.navbar, .navbar-default {
padding-top: 12px;
height: 75px;
border-radius: 0;
border: none;
float: right;
background: #8F0853;
width: 100%;
position: fixed;
border-bottom: 2px #B5B690 solid;
}
.nav ul li {
display: inline-block;
text-align: center;
vertical-align: middle;
}
.navbar-default .navbar-nav > li > a {
color: #f1f1dc;
font-family: 'open_regular';
font-size: 1em;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.2em;
}
.navbar-default .navbar-nav > li > a:hover {
color: #B5B690;
}
.navbar-default .navbar-toggle{
border-color: rgba(255,255,255,0.00);
}
.navbar-default .navbar-toggle .icon-bar{
background-color: #f1f1dc;
}
.navbar-default .navbar-toggle:hover{
border-color: #f1f1dc;
background-color: rgba(255,255,255,0.00);
transition: 0.5s linear;
}
.dropdown-backdrop {
position: static;
}
Any help or guidance would be very much appreciated, it's probably a piece of cake for all you code geniuses, I feel I'm missing something probably obvious. Thanks again in advance.
