I have the code below.
I test it on jsbin and then the preview works fine but when I download the file and open it in google chrome the drop down menu get hide by the header??
Also the left side of the page got cuts out on chrome.
Thanks so much for the help
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ristorante Con Fusion</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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>
<a class="navbar-brand" href="#">Ristorante Con Fusion</a>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a>
</li>
<li>About
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Menu <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Appetizers
</li>
<li>Main Courses
</li>
<li>Desserts
</li>
<li>Drinks
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Specials</li>
<li>Lunch Buffet
</li>
<li>Weekend Brunch
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
</nav>
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<div class="row row-header">
<div class="row">
<div class="col-xs-12 col-sm-8">
<h1>Ristorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class="col-xs-12 col-sm-4">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row row-content">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align=center>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<h2>Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
<p>More »
</p>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align=center>This Month's Promotions</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<h2>Weekend Grand Buffet</h2>
<p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person</p>
<p>More »
</p>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align=center>Meet our Culinary Specialists</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences.</p>
<p>More »
</p>
</div>
</div>
</div>
<footer class="row-footer">
<div class="row">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home
</li>
<li>About
</li>
<li>Menu
</li>
<li>Contact
</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<!-- Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net-->
</address>
<i class="fa fa-phone"></i>: +852 1234 5678
<br>
<i class="fa fa-fax"></i>: +852 8765 4321
<br>
<i class="fa fa-envelope"></i>:
confusion#food.net
</div>
<div class="nav navbar-nav" style="padding: 40px 10px;">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
<!--
<div class="col-xs-12 col-sm-4">
<div style="padding: 40px 10px;">
Google+
Facebook
LinkedIn
Twitter
YouTube
Mail
</div>
</div>-->
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align=center>© Copyright 2015 Ristorante Con Fusion</p>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
If an element is covered by another it probably means that you should define position (relative / absolute - determine it by yourself as you know your code best) for both and z-index. Then put higher z-index value for element that you want to be on top.
Related
Sorry to be a pain. I might have been staring at my code for way to long but I am trying to implement a Bootstrap Carousel into my website that will show 3 and then progress one. I am currently following the code sniper at: https://www.codeply.com/go/EIOtI7nkP8 but can only get it to show one and progress one at a time.
Any help would be most appreciated.
Many thanks,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="keywords" content="THE CARE COMPANY (SW) LTD, home care, care, care company, the, company, jobs, care jobs, TORBAY, DEVON, kingsbridge, totnes, plymouth, Care in Torbay , care Torbay, Care torquay, Torbay care , Care for eldery torbay, Torquay, the care company, home care services, home care medical, come care near me, home care elderly, home care agency, caregiver, home health care, respite care, home health aide, homecare, home care services, health, healthcare, assisted living, caregiver, respite care">
<meta name="description" content="Delivering professional home care & live-in care services. The Care Company provides bespoke respite care, dementia care, Alzheimer's care & much more." class="">
<title>The Care Company (SW) LTD</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles -->
<link href="css/grayscale.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<script>
$('#recipeCarousel').carousel({
interval: 10000
})
$('.carousel .carousel-item').each(function(){
var minPerSlide = 3;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<minPerSlide;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top" style="font-size: 1rem !IMPORTANT">The Care Company (SW) LTD</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Our Expertise
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">How Does Our Care Work</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Our CAREGivers</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Partnerships and professionals</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Our Care Options</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Home Care Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Companionship</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Home Help and Housekeeping</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Personal Care</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Dementia Care Including Alzheimer's desease</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Choosing The Right Care For You</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Advice and Support
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Cost Of Care</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">FAQ'S</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">How To Age Well</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Understanding And Preparing For Home Care</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Choosing The Right Care For You</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Nutrition</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Preventing Hospitalisation</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Community Involvement</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Alzheimers and Dementia Care</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Executive Profile</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Community Involvement</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Awards</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">What People Say About Us</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Why Choose The Care Company (SW) LTD</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Join Our Team
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">#YouCanCare</a>
</div>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#">Getting Started</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#">News & Events</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="contact.php">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="masthead v-header">
<div class="fullscreen-video-wrap">
<video src="video/vid.mp4" autoplay="yes" loop="yes">
</video>
</div>
<div class="header-overlay"></div>
<div class="header-content text-md-center container">
<h1 class="mx-auto my-0 text-uppercase" style="margin-bottom: 2px !IMPORTANT">Welcome To The Care Company (SW) LTD</h1>
<p style="color: white !IMPORTANT">Supporting Independence At Home</p>
<p>Our home care services not only provide you with the care you want, where and when you want it, we strive to keep you in control. It is your decisions, your life, your way.</p>
<h2 class="text-white-50 mx-auto mt-2 mb-5" style="color: white !IMPORTANT"></h2>
<p>Call on: 01548 521789</p>
<a href="#projects" class="btn btn-primary js-scroll-trigger" >Join Our Team</a>
Find Home Care
</div>
</header>
<!-- About Section -->
<section id="about" class="about-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h1 class="text-black mb-4">Supported at home the<img class="img-fluid mb-3 mb-lg-0" src="img/words/you.jpg" width="30%" alt="way you want"></h1>
<p class="text-black" >We understand that home is where you feel the happiest. If you want to stay living comfortably at home, you can live well, your way with The Care Company (SW) LTD.
<br><br>
Home Instead has been at the forefront of specialised home care for the elderly and supporting those being cared for and their families for many years. Founded on personal experience, these family values remain at the core of everything we do 24 years on.
<br><br>
Our award-winning care at home fits around your life - it’s tailored, it’s flexible and it’s adaptable. Whether you’re looking for help getting dressed and showered, help around the house or companionship, Home Instead’s trained CAREGivers are perfectly matched to you.
<br><br>
We believe age should be celebrated and that everybody should be able to live happily, comfortably and independently at home.
<br><br>
Start your Home Instead journey today.
<br><br><br>
Read More
</div>
</div>
<div class="row">
<div class="column">
<h1 class="text-black">Caring</h1>
<br>
<p class="text-black">– It sounds obvious, but it’s what we do and why we do it.
<br><br>
– “We are compassionate, dedicated, considerate and supportive.”</p>
</div>
<div class="column">
<h1 class="text-black">Trustworthy</h1>
<br>
<p class="text-black">– We deliver a high standard of care, with integrity, through people who are passionate about what they do.
<br><br>
– “We are reliable, safe and diligent"</p>
</div>
<div class="column">
<h1 class="text-black">Positive</h1>
<br>
<p class="text-black">– We endeavour to encourage optimism and positive outcomes because we are enthusiastic about what we do.
<br><br>
– “We are pragmatic, tenacious, willing and conscientious”</p>
</div>
</div>
</div>
</section>
<!-- Looking For Staff Section -->
<section id="wjs" class="wjs-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<p class="text-black" style="font-size: 20px">
“ There is a real feeling of assurance that the person you love and care for is being taken care of in your absence. That’s what Home Instead does. My aunt hates to see her CAREGivers go. There are times she probably would like to see them more than me. ’’
<br><br>
Bon Jove - Clients Family
<br><br>
Read more client testimonials:
<br><br>
Testimonials
</div>
</div>
</div>
</section>
<!-- Why Join Us Section -->
<section id="about" class="about-section text-center">
<div class="container">
<h1 class="text-black mb-4">Services</h1>
<div class="row">
<div class="column">
<div class="col-lg-8 mx-auto">
<h2 class="text-black"><img class="img-fluid mb-3 mb-lg-0" src="img/words/rcare.png" width="65%" alt="Respite Care"></h2>
<br>
<p class="text-black">– It sounds obvious, but it’s what we do and why we do it.
<br><br>
– “We are compassionate, dedicated, considerate and supportive.”
</div>
</div>
<div class="column">
<div class="col-lg-8 mx-auto">
<h2 class="text-black"><img class="img-fluid mb-3 mb-lg-0" src="img/words/hcare.png" width="65%" alt="Hourly Care"></h2>
<br>
<p class="text-black">– It sounds obvious, but it’s what we do and why we do it.
<br><br>
– “We are compassionate, dedicated, considerate and supportive.”
</div>
</div>
<div class="column">
<div class="col-lg-8 mx-auto">
<h2 class="text-black"><img class="img-fluid mb-3 mb-lg-0" src="img/words/ccare..png" width="65%" alt="Complex Care"></h2>
<br>
<p class="text-black">– It sounds obvious, but it’s what we do and why we do it.
<br><br>
– “We are compassionate, dedicated, considerate and supportive.”
</div>
</div>
</div>
<h3 class="text-black mb-4">To view all our services please click below:</h3>
All Services<br><br><br><br>
</div>
</section>
<!-- contact us Section -->
<section id="contactUs" class="signup-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8 mx-auto text-center">
<br><br>
<h2 class="text-black mb-5">Contact Us:</h2>
<p>You can either contact us via the form below or by post to: <br>The Care Company (SW) LTD, Little Spires, Totnes, Devon, TQ9 7QE <br> Tel: 01548 521789</p>
<form class="form-inline d-flex" action="contact_post.php"method="post">
<input type="test" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactFN" placeholder="Enter First Name *">
<input type="text" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactLN" placeholder="Enter Last Name *">
<input style="width: 100% !IMPORTANT; margin-top: 30px !IMPORTANT" type="text" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactCN" placeholder="Enter Subject">
<input type="email" style="margin-top: 30px !IMPORTANT" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactE" placeholder="Enter Contact Email Address *">
<input type="number" style="margin-top: 30px !IMPORTANT" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactN" placeholder="Enter Contact Number *">
<textarea style="width: 100% !IMPORTANT; margin-top: 30px !IMPORTANT" type="text" cols="40" rows="5" id="contactM" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactM" placeholder="Let us know how we can help"></textarea>
<br>
<p>By clicking submit I consent to The Care Company (SW) LTD using my data for marketing purposes. I have read and accept the Privacy Policy</p>
<button type="submit" style="margin-top: 20px !IMPORTANT" class="btn btn-primary mx-auto">Submit</button>
</form>
<br>
<br><br>
</div>
</div>
</div>
</section>
<!-- quick page Section -->
<!-- quick page Section -->
<section id="about" class="about-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h1 class="text-black mb-4">Awards & Affiliates</h1>
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=1">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=2">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=3">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=4">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=5">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=6">
</div>
</div>
</div>
</div>
<a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
</a>
</div>
<br><br>
</div>
</div>
</section>
<!-- Footer -->
<!-- Footer -->
<section id="contactUs" class="signup-section">
<footer class="page-footer font-small stylish-color-dark pt-4">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-4 mx-auto">
<!-- Content -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">News & Events</h5>
<div class="container">
<?php
$stmt = $db->query('SELECT postTitle, postSlug FROM blog_posts ORDER BY postID DESC LIMIT 5');
while($row = $stmt->fetch()){
echo '<p>'.$row['postTitle'].'</p>';
}
?>
</div>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Useful Links</h5>
<ul class="list-unstyled">
<li>
Home
</li>
<li>
News & Events
</li>
<li>
Franchise Opportunities
</li>
<li>
About Us
</li>
<li>
Admin Log-in
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Get Started</h5>
<ul class="list-unstyled">
<li>
Home Care Services
</li>
<li>
Book a Consultation
</li>
<li>
Meet the team
</li>
<li>
Jour our team
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Contact Us</h5>
<ul class="list-unstyled">
<li>
<p>The Care Company (SW) LTD
<br>
Little Spires
<br>
Totnes
<br>
Devon
<br>
TQ9 7QE</p>
</li>
<li>
<p>Tel: 01548 521789</p>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<hr>
<!-- Call to action -->
<ul class="list-unstyled list-inline text-center py-2">
<li class="list-inline-item">
</li>
<li class="list-inline-item">
<a href="#projects" class="btn btn-primary js-scroll-trigger" >Join Our Team</a>
Find Home Care
</li>
<hr style="margin-bottom: -30px !IMPORTANT">
</ul>
<!-- Call to action -->
</footer>
<!-- Footer -->
<footer class="bg-white small text-center text-black-50" style="background-color: #862d60 !IMPORTANT; color: white !IMPORTANT">
<div class="container">
<div class="col-md-12 col-xs-12" style=" margin-bottom: 20px !IMPORTANT">
<center>
Site Map | Privacy & Cookies | Terms & Conditions
</center>
</div>
<div class="social d-flex justify-content-center" style=" margin-bottom: 20px !IMPORTANT">
<a href="#" class="mx-2">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-linkedin"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-instagram"></i>
</a>
</div>
Copyright © Your Website 2019
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/grayscale.min.js"></script>
</section>
</body>
</html>
Your script for the Carousel is using jQuery, but it's trying to run before jQuery is loaded by the page. In its current state you need to move the Carousel script to AFTER the jQuery loading.
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="grayscale.min.js"></script>
<script>
$('#recipeCarousel').carousel({
interval: 10000
})
$('.carousel .carousel-item').each(function(){
var minPerSlide = 3;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<minPerSlide;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
Now the jQuery functions correctly and it moving like you desire.
I downloaded the JS and CSS for grayscale and linked to the CDNs of the libraries to confirm this would work for you.
I have a pretty simple website HTML, but when I run it in localhost, all the text that isn't within something such as the navbar, jumbotron, etc, automatically appears as a link (shows up blue, underlined, clickable and goes to the top of the page) and I can't see any reason for this. I'm working in Python/Flask/Bootstrap/Virtual Studio Code. Here is a screenshot showing what I mean:
And here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Complete Bootstrap 4 Website Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="{{url_for('hello_world')}}"><img src="{{url_for('static', filename='img/logo.png')}}"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Crap</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Crud</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Cheesey Potato</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Scorpion</a>
</li>
</ul>
</div>
</div>
</nav>
<!--- Image Slider -->
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{url_for('static', filename='img/background.png')}}">
<div class="carousel-caption">
<h1 class="display-2">HELLO!</h1>
<h3>WELCOME</h3>
<button type="button" class="btn btn-outline-light btn-lg">click here</button>
<button type="button" class="btn btn-primary btn-lg">no click here actually</button>
</div>
</div>
<div class="carousel-item">
<img src="{{url_for('static', filename='img/background2.png')}}">
</div>
<div class="carousel-item">
<img src="{{url_for('static', filename='img/background3.png')}}">
</div>
</div>
</div>
<!--- Jumbotron -->
<div class="container-fluid">
<div class="row jumbotron">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<p class="lead">This is an example site.</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
<a href="#"><button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button></div>
</div>
</div>
</div>
<!--- Welcome Section -->
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Morning!</h1>
</div>
<hr>
<div class="col-12">
<p class="lead">Welcome to my website</p>
</div>
</div>
</div>
<!--- Three Column Section -->
<div class="container-fluid padding">
<div class="row text-center padding">
<div class="col-xs-12 col-sm-6 col-md-4">
<i class="fas fa-fish fa-5x text-danger"></i>
<h3>Fish</h3>
<p>Browse freshwater and exotic fish</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<i class="fas fas fa-dog fa-5x"></i>
<h3 class="text-danger">Dogs</h3>
<p>Browse our pedigrees</p>
</div>
<div class="col-sm-12 col-md-4">
<i class="fas fas fa-otter fa-5x"></i>
<h3>Otters</h3>
<p>Check out our new range of otters</p>
</div>
</div>
<hr class="my-4">
</div>
<!--- Two Column Section -->
<div class="container-fluid padding">
<div class="row padding">
<div class="col-md-12 col-lg-6">
<h2>If you build it...</h2>
<p>According to Platts estimates and to thermal coal traders who spoke to Platts,
Russian producers continue to seek domination on the European market and have been
putting in a lot of effort to grab more market shares on the Asian markets such as South
Korea and Taiwan.</p>
<p>Last year, the average free on board (FOB) coal prices for the Atlantic and Pacific markets were
both higher compared to 2017, which could be a big incentive for Russia to continue producing and
exporting more coal to seaborne destinations, according to Platts.</p>
<p>Russia’s Energy Minister Alexander Novak briefed on Thursday President Vladimir Putin on the Russian
energy sector production in 2018, saying that the coal production of around 433 million tons was
planned to be reached in 2020. Russia plans to invest around $22.4 billion
(1.5 trillion Russian rubles) in its coal industry and port infrastructure, Novak told Putin.</p>
</div>
</div>
</div>
I don't have any links I haven't closed so I can't see why it'd do this. If anyone could help it'd be great, thanks. The link issue is in the 'three column' and 'two column' sections in the code.
Seems like you forgot to close an anchor tag somewhere. On a side note,
<a href="#"><button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button></div>
Did you close the </a> tag here?
Not an html expert but i noticed on line 84
Web Hosting
you haven't closed
as i said not html expert but i hope i helped :D
There's an extra div and missing tag. Have left comments which highlight where issues are. C
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
<a href="#"><button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button></div>
// Missing an </a> tag in above line, also incorrect by html5 spec to include a button within an a tag but that's a separate problem.
</div>
</div>
</div> // Extra div here
CSS isn't being applied, can't figure out why. Trying to change the font. This has worked before so don't know why it isn't now. CSS and html files are in the same folder. Working in python/bootstrap/flask/VSC. Here is my css:
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
#import url('https://fonts.googleapis.com/css?family=Staatliches');
.container-fluid {
color: red;
font-family:'Staatliches', cursive;
}
body {
font-family: 'Staatliches', cursive;
}
And here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Complete Bootstrap 4 Website Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="{{url_for('hello_world')}}"><img src="{{url_for('static', filename='img/logo.png')}}"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Crap</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Crud</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Cheesey Potato</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Scorpion</a>
</li>
</ul>
</div>
</div>
</nav>
<!--- Image Slider -->
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{url_for('static', filename='img/background.png')}}">
<div class="carousel-caption">
<h1 class="display-2">HELLO!</h1>
<h3>WELCOME</h3>
<button type="button" class="btn btn-outline-light btn-lg">click here</button>
<button type="button" class="btn btn-primary btn-lg">no click here actually</button>
</div>
</div>
<div class="carousel-item">
<img src="{{url_for('static', filename='img/background2.png')}}">
</div>
<div class="carousel-item">
<img src="{{url_for('static', filename='img/background3.png')}}">
</div>
</div>
</div>
<!--- Jumbotron -->
<div class="container-fluid">
<div class="row jumbotron">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<p class="lead">This is an example site.</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
<button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button>
</div>
</div>
</div>
<!--- Welcome Section -->
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Morning!</h1>
</div>
<hr>
<div class="col-12">
<p class="lead">Welcome to my website</p>
</div>
</div>
</div>
<!--- Three Column Section -->
<div class="container-fluid padding">
<div class="row text-center padding">
<div class="col-xs-12 col-sm-6 col-md-4">
<i class="fas fa-fish fa-5x text-danger"></i>
<h3>Fish</h3>
<p>Browse freshwater and exotic fish</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<i class="fas fas fa-dog fa-5x"></i>
<h3 class="text-danger">Dogs</h3>
<p>Browse our pedigrees</p>
</div>
<div class="col-sm-12 col-md-4">
<i class="fas fas fa-otter fa-5x"></i>
<h3>Otters</h3>
<p>Check out our new range of otters</p>
</div>
</div>
<hr class="my-4">
</div>
<!--- Two Column Section -->
<div class="container-fluid padding">
<div class="row padding">
<div class="col-md-12 col-lg-6">
<h2>If you build it...</h2>
<p>According to Platts estimates and to thermal coal traders who spoke to Platts,
Russian producers continue to seek domination on the European market and have been
putting in a lot of effort to grab more market shares on the Asian markets such as South
Korea and Taiwan.</p>
<p>Last year, the average free on board (FOB) coal prices for the Atlantic and Pacific markets were
both higher compared to 2017, which could be a big incentive for Russia to continue producing and
exporting more coal to seaborne destinations, according to Platts.</p>
<p>Russia’s Energy Minister Alexander Novak briefed on Thursday President Vladimir Putin on the Russian
energy sector production in 2018, saying that the coal production of around 433 million tons was
planned to be reached in 2020. Russia plans to invest around $22.4 billion
(1.5 trillion Russian rubles) in its coal industry and port infrastructure, Novak told Putin.</p>
</div>
</div>
</div>
No changes are being applied when I reload the page in localhost. Any changes made to the HTML are applied, its just the css. Any help is appreciated, thanks.
Just try to request css files for font from header, not by importing them
<head>
...
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,700" type="text/css" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
and then check in network panel that the file is being loaded
Seems to be working in my CodePen:
Are you sure that not having a closing </body> and </html> tag are not the cause?
Maybe declaring the same relative directory for your style.css file like:
<link href="./style.css" type="text/css" rel="stylesheet">
Have you checked the style.css file permissions?
I did an code but the afiz its not appearing on the right side dont kow why, help please?
In the css i add it
.affix {
top:100px;
}
Just need to know where is the error cuz i couldnt indetify it =\
<body data-spy="scroll" data-target="#myScrollspy" data-offset="200">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height=30 width=41></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="index.html"><span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li class="active"> <a href="aboutus.html"><span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span> About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-list-alt" arria-hidden="true"></span>
Menu <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Appetizers</li>
<li>Main Courses</li>
<li>Desserts</li>
<li>Drinks</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Specials</li>
<li>Lunch Buffet</li>
<li>Weekend Brunch</li>
</ul>
</li>
<li><i class="fa fa-envelope-o" ></i>Contact</li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row row-header">
<div class="col-xs-12 col-sm-8">
<h1>Ristorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class="col-xs-12 col-sm-2">
<p style="padding:20px;"></p>
<img src="img/logo.png" class="img-responsive">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10">
<div class="row">
<div class="col-xs-12">
<ol class="breadcrumb">
<li>Home</li>
<li class="active">About</li>
</ol>
</div>
<div class="col-xs-12">
<h3>About Us</h3>
<hr>
</div>
</div>
<div id="history" class="row row-content">
<div class="col-xs-12 col-sm-6 col-lg-8">
<h2>Our History</h2>
<p>Started in 2010, Ristorante con Fusion quickly established itself as a culinary icon par excellence in Hong Kong. With its unique brand of world fusion cuisine that can be found nowhere else, it enjoys patronage from the A-list clientele in Hong Kong. Featuring four of the best three-star Michelin chefs in the world, you never know what will arrive on your plate the next time you visit us.</p>
<p>The restaurant traces its humble beginnings to <em>The Frying Pan</em>, a successful chain started by our CEO, Mr. Peter Pan, that featured for the first time the world's best cuisines in a pan.</p>
<div class="well">
<blockquote>
<p>You better cut the pizza in four pieces because
I'm not hungry enough to eat six.</p>
<footer>Yogi Berra,
<cite>The Wit and Wisdom of Yogi Berra,
P. Pepe, Diversion Books, 2014</cite>
</footer>
</blockquote>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Facts At a Glance</h3>
</div>
<div class="panel-body">
<dl class="dl-horizontal">
<dt>Started</dt>
<dd>3 Feb. 2013</dd>
<dt>Major Stake Holder</dt>
<dd>HK Fine Foods Inc.</dd>
<dt>Last Year's Turnover</dt>
<dd>$1,250,375</dd>
<dt>Employees</dt>
<dd>40</dd>
</dl>
</div>
</div>
</div>
</div>
<div>
<p style="padding:20px;"></p>
</div>
<div id="corporate" class="row row-content">
<div class="col-xs-12 ">
<h2>Corporate Leadership</h2>
<!--- Tab Panes --->
<div class="panel-group" id="accordion"
role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingPeter">
<h3 class="panel-title">
<a role="button" data-toggle="collapse"
data-parent="#accordion" href="#peter"
aria-expanded="true" aria-controls="peter">
Peter Pan <small>Chief Epicurious Officer</small></a></h3>
</div>
<div role="tabpanel" class="panel-collapse collapse in"
id="peter" aria-labelledby="headingPeter">
<div class="panel-body">
<p>Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America with the intention of giving their children the best future. His mother's wizardy in the kitchen whipping up the tastiest dishes with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which <em>The Frying Pan</em> became well known. He brings his zeal for fusion cuisines to this restaurant, pioneering cross-cultural culinary connections.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingDanny">
<h3 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse"
data-parent="#accordion" href="#danny"
aria-expanded="false" aria-controls="danny">
Dhanasekaran Witherspoon <small>Chief Food Officer</small></a></h3>
</div>
<div role="tabpanel" class="panel-collapse collapse"
id="danny" aria-labelledby="headingDanny">
<div class="panel-body">
<p>Our CFO, Danny, as he is affectionately referred to by his colleagues, comes from a long established family tradition in farming and produce. His experiences growing up on a farm in the Australian outback gave him great appreciation for varieties of food sources. As he puts it in his own words, <em>Everything that runs, wins, and everything that stays, pays!</em></p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingAgumbe">
<h3 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse"
data-parent="#accordion" href="#agumbe"
aria-expanded="false" aria-controls="agumbe">
Agumbe Tang <small>Chief Taste Officer</small></a></h3>
</div>
<div role="tabpanel" class="panel-collapse collapse"
id="agumbe" aria-labelledby="headingAgumbe">
<div class="panel-body">
<p>Blessed with the most discerning gustatory sense, Agumbe, our CFO, personally ensures that every dish that we serve meets his exacting tastes. Our chefs dread the tongue lashing that ensues if their dish does not meet his exacting standards. He lives by his motto, <em>You click only if you survive my lick.</em></p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingAlberto">
<h3 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse"
data-parent="#accordion" href="#alberto"
aria-expanded="false" aria-controls="alberto">
Alberto Somayya <small>Executive Chef</small></a></h3>
</div>
<div role="tabpanel" class="panel-collapse collapse"
id="alberto" aria-labelledby="headingAlberto">
<div class="panel-body">
<p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. He says, <em>Put together the cuisines from the two craziest cultures, and you get a winning hit! Amma Mia!</em></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<p style="padding:20px;"></p>
</div>
<div id="facts" class="row row-content">
<div class="col-xs-12">
<h2>Facts & Figures</h2>
<div class="table-responsive">
<table class="table table-striped">
<tr>
<td> </td>
<th>2013</th>
<th>2014</th>
<th>2015</th>
</tr>
<tr>
<th>Employees</th>
<td>15</td>
<td>30</td>
<td>40</td>
</tr>
<tr>
<th>Guests Served</th>
<td>15000</td>
<td>45000</td>
<td>100,000</td>
</tr>
<tr>
<th>Special Events</th>
<td>3</td>
<td>20</td>
<td>45</td>
</tr>
<tr>
<th>Annual Turnover</th>
<td>$251,325</td>
<td>$1,250,375</td>
<td>~$3,000,000</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<nav class="hidden-xs col-sm-2" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="400">
<li>Our History</li>
<li>Corporate</li>
<li>Facts</li>
</ul>
</nav>
</div>
</div>
<footer class="row-footer">
<div class="container">
<div class="row">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone"></i>: +852 1234 5678<br>
<i class="fa fa-fax"></i>: +852 8765 4321<br>
<i class="fa fa-envelope"></i>:
confusion#food.net
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="nav navbar-nav" style="padding: 40px 10px;">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align=center>© Copyright 2015 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Why is appearing in the middle?
You have your scrollspy code inside of the main container which is "containing" it inside the main view of the page.
Move this code to just below the opening <body> tag, and it should work.
<body>
<nav class="hidden-xs col-sm-2" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="400">
<li>Our History</li>
<li>Corporate</li>
<li>Facts</li>
</ul>
</nav>
I put as it
u its appearing in the beggining at the page and in the left side, but i wanna to ork as right side and beggins after 200px
<body data-spy="scroll" data-target="#myScrollspy" data-offset="200">
<nav class="hidden-xs col-sm-2" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="400">
<li>Our History</li>
<li>Corporate</li>
<li>Facts</li>
</ul>
</nav>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
I'm trying out Angular templates by inserting
<ng-include src=="'menu.html'"></ng-inlude>
directive between header and footer of an "index.html" file. The webpage shows properly in firefox but chrome doesn't show the template. It loads a file named "index.html#" that doesn't exist in my app folder. I have absolutely no idea what happens here and found no similar case in web searches. Thanks for your help!
<!DOCTYPE html>
<html lang="en" ng-app="confusionApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ristorante Con Fusion</title>
<!-- build:css styles/main.css -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
<!-- endbuild -->
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/"><img src="images/logo.png" height=30 width=41></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#/">
<span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a href="#/aboutus">
<span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span> About</a></li>
<li><a href="#/menu">
<span class="glyphicon glyphicon-list-alt"
aria-hidden="true"></span>
Menu</a></li>
<li><a href="#/contactus">
<i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row row-header">
<div class="col-xs-12 col-sm-8">
<h1>Ristorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best cuisines, and create
a unique fusion experience. Our lipsmacking creations will
tickle your culinary senses!</p>
</div>
<div class="col-xs-12 col-sm-2">
<p style="padding:20px;"></p>
<img src="images/logo.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-2">
</div>
</div>
</div>
</header>
<ng-include src="'dishdetail.html'"></ng-include>
<footer class="row-footer">
<div class="container">
<div class="row">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone"></i>: +852 1234 5678<br>
<i class="fa fa-fax"></i>: +852 8765 4321<br>
<i class="fa fa-envelope"></i>:
<a href="mailto:confusion#food.net">
confusion#food.net</a>
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="nav navbar-nav" style="padding: 40px 10px;">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align=center>© Copyright 2015 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- build:js scripts/main.js -->
<script src="../bower_components/angular/angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
<!-- endbuild -->
</body>
</html>
menu.html:
<div class="container">
<div class="row row-content" ng-controller="MenuController">
<div class="col-xs-12">
<button ng-click="toggleDetails()" class="btn btn-xs btn-primary pull-right"
type="button">{{showDetails ? 'Hide Details':'Show Details'}}
</button>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"
ng-class="{active:isSelected(1)}">
<a ng-click="select(1)"
aria-controls="all menu"
role="tab">The Menu</a></li>
<li role="presentation"
ng-class="{active:isSelected(2)}">
<a ng-click="select(2)"
aria-controls="appetizers"
role="tab">Appetizers</a></li>
<li role="presentation"
ng-class="{active:isSelected(3)}">
<a ng-click="select(3)"
aria-controls="mains"
role="tab">Mains</a></li>
<li role="presentation"
ng-class="{active:isSelected(4)}">
<a ng-click="select(4)"
aria-controls="desserts"
role="tab">Desserts</a></li>
</ul>
<div class="tab-content">
<ul class="media-list tab-pane fade in active">
<li class="media" ng-repeat="dish in dishes | filter:filtText">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="{{dish.name}}">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p ng-show="showDetails">{{dish.description}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
It may be that angular is appending a # to the end of url strings. This was an older workaround used to prevent non-html5 browsers from sending http requests and reloading the entire page content on single page apps.
But it would be helpful to see your index.html as well as your menu.html files.
If you want to call it as tag you have to add src value
<ng-include src="'menu.html'"></ng-include>
Also, you can add ng-include as attribute:
<div ng-include="'menu.html'"></div>
Good Luck !
I think it is html5mode problem. use $locationProvider.html5Mode(true); in angular config.
The problem was that Chrome etc. don't show local files. You have to either check them with a simple webserver or add --allow-file-access-from-files to the google.exe command. Firefox gives access to local files by default. That's why the templates showed in Firefox.