我在个人项目的移动导航方面遇到了一些麻烦，一个定制的“固定”导航栏，只有四个链接，没有品牌等。
导航在桌面上完美运行，即使窗口调整大小超过激活/显示导航切换的断点。然而，在safari响应式设计模式中，链接根本不起作用，它识别出它们是链接，但是在点击它们时，所有发生的事情都是nabber根据需要折叠回来。在iPhone上预览时我也没有运气。
任何人都可以对我出错的地方有所了解，他们整个星期都试图绕过它而无济于事。
这是我的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>
这是关于导航栏的CSS自定义：
/* 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;
}
任何帮助或指导都会非常感激，对于所有代码天才来说，这可能是一块蛋糕，我觉得我错过了一些可能很明显的东西。再次感谢。
答案 0 :(得分：0)
正如您在 safari和iPhone 中提到滚动功能无法正常工作。这是因为协议问题。 Safari和iPhone无法加载 无协议（无https或http）的网址。您可以在HTML脚本部分找到它（//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js）。
如果您将此网址复制到没有协议的Safari选项卡，它会显示 jQuery代码。但是，当您在加载HTML文件后检查safari控制台区域时，您会发现错误对您的jquery.scrollTo.min.js
无法加载资源：在此服务器上找不到请求的网址
如果将鼠标悬停在jquery.scrollTo.min.js上，则会在链接前看到文件。检查此图片（https://i.stack.imgur.com/i3mt7.jpg）
Read More关于协议
N.B：下拉菜单div在css中更改背景颜色，以便更好地查看。
$(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 !important;
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;
}
/*div#nav_collapse.in Color Change For better view*/
div#nav_collapse.in{
background:#8F0853;
} <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="https://cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script><!--use protocol https:// or http:// -->