I am trying to make a navbar that hovers on top of 2 other items and then when it goes to mobile size I would like it to collapse but put the mobile icon at the top right of the screen like so:
I have no idea how to get it to hover on top of the two other items, I have tried to fiddle with z-index and offsets but I can't get it to sit right in the center of the two without white spaces on the side.
JsFiddle
#mu-carousel .carousel-item {
max-height: 480px;
}
#mu-header {
background: lightgrey;
height: 135px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<body>
<header id="mu-header">
<div class="container">
<div class="row">
<div class="col-md-6">
<span>LOGO/NAME</span>
</div>
<div class="col-md-2">
<span>TEXT</span>
</div>
<div class="col-md-2">
<span>TEXT</span>
</div>
<div class="col-md-2">
<span>TEXT</span>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<section id="mu-carousel">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.js"></script>
<!-- Custom scripts for this template -->
<script src="js/creative.js"></script>
</body>
In this case, you just add style="margin-top: -28px;" to the navbar container (28px is half of the navbar height) and then add style="margin-top: -28px;" to the carousel container as well.
Finally, add the sticky-top to the navbar container.
To make it work for small screens the way it's shown in your picture, the navbar toggler has to be taken out of the navbar. I put it into a column located after the logo column in the HTML. (I've also given the toggle a background color to make it visible.)
The classes d-flex justify-content-end make the toggler right aligned and the class d-md-none makes sure that the toggler disappears on larger screens.
And since the navbar on small screens is only 16px tall (because the toggler was taken out) we need a custom class to control the negative top margin for small screens and for larger screens like so:
.mpush {
margin-top: -8px;
}
#media (min-width: 768px) {
.mpush {
margin-top: -28px;
}
}
Here's the complete working snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.mpush {
margin-top: -8px;
}
#media (min-width: 768px) {
.mpush {
margin-top: -28px;
}
}
</style>
<header id="mu-header" style="height: 135px; background: lightgrey;">
<div class="container">
<div class="row">
<div class="col-8 col-md-6">
<span>LOGO/NAME</span>
</div>
<div class="col-4 d-flex d-md-none justify-content-end">
<button class="navbar-toggler navbar-toggler-right2 bg-warning" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="col-md-2">
<span>TEXT</span>
</div>
<div class="col-md-2">
<span>TEXT</span>
</div>
<div class="col-md-2">
<span>TEXT</span>
</div>
</div>
</div>
</header>
<div class="container bg-warning sticky-top mpush">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<section id="mu-carousel" class="mpush">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<p style="padding-top: 999px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate deleniti facilis corrupti dolores vero eaque, placeat saepe velit a officiis inventore itaque ipsa, temporibus. Est sint voluptatem natus veritatis in.</p>
Related
I'm new using bootstrap and I have a problem implementing a bootstrap menu. It works perfectly until the screen become small and even it adjust the size and shows the 3 line menu, it unfolds behind the next div so I cant see the options. It hides behind the next div which is a carousel .
Thank you in advance.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="row menu">
<div class="collapse navbar-collapse" id="menu">
</div>
</nav>
<header class="themenu">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">MENU</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Main <span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</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="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown ">
<a class="dropdown-item" href="#">About us</a>
<a class="dropdown-item" href="#">Story</a>
<a class="dropdown-item" href="#">Others</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input id="search" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-warning my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
</div>
<div class="row justify-content-center thecarousel">
<div class="col-md-7 col-lg-5">
<div id="More" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://via.placeholder.com/500" height="500px" alt="el1" />
<div class="carousel-caption d-none d-md-block">
<h5>Pic1</h5>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder.com/500" height="500px" alt="el2" />
<div class="carousel-caption d-none d-md-block">
<h5>Pic2</h5>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder.com/500" height="500px" alt="el3" />
<div class="carousel-caption d-none d-md-block">
<h5>pic3</h5>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#More" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#More" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<ol class="carousel-indicators">
<li data-target="#More" data-slide-to="0" class="active"></li>
<li data-target="#More" data-slide-to="1"></li>
<li data-target="#More" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<!DOCTYPE.html>
<html>
<head>
<title>Science Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="/home/heisenberg/Downloads/heisenberg.svg" width="30" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</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="false">
Content
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="text-black shadow p-3 mb-5 bg-white rounded"><strong>Scroll across some beautiful snaps of The Hubble telescope!!</strong></div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/home/heisenberg/Downloads/bubble nebula.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Bubble Nebula!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://hubblesite.org/image/3725/gallery" role="button">Learn more</a>
</div>
</div>
<div class="carousel-item">
<img src="/home/heisenberg/Downloads/Sombero galaxy.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Sombrero Galaxy!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://hubblesite.org/contents/media/images/2003/28/1415-Image.html" role="button">Learn more</a>
</div>
</div>
<div class="carousel-item">
<img src="/home/heisenberg/Downloads/heic1501a.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Pillars Of Creation!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://www.nasa.gov/image-feature/the-pillars-of-creation" role="button">Learn more</a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
"About" and "Contact" tab in the navigation bar are not acting like links. Earlier every tab was okay. Moreover, search button is also not working properly. Please suggest some changes.
I am using bootstrap for building this website and copied the navigation code from here https://getbootstrap.com/docs/4.4/components/navbar/.
<!DOCTYPE.html>
<html>
<head>
<title>Science Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="/home/heisenberg/Downloads/heisenberg.svg" width="30" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</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="false">
Content
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="text-black shadow p-3 mb-5 bg-white rounded"><strong>Scroll across some beautiful snaps of The Hubble telescope!!</strong></div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/home/heisenberg/Downloads/bubble nebula.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Bubble Nebula!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://hubblesite.org/image/3725/gallery" role="button">Learn more</a>
</div>
</div>
<div class="carousel-item">
<img src="/home/heisenberg/Downloads/Sombero galaxy.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Sombrero Galaxy!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://hubblesite.org/contents/media/images/2003/28/1415-Image.html" role="button">Learn more</a>
</div>
</div>
<div class="carousel-item">
<img src="/home/heisenberg/Downloads/heic1501a.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Pillars Of Creation!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://www.nasa.gov/image-feature/the-pillars-of-creation" role="button">Learn more</a>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
you have made a small mistake here I can tell you what is it.
You have your carousel navigation buttons outside of your #carouselExampleControls div, and as they are position absolute so they are overlapping to your menu. so just put your both carousel button in the main carousel div. that's it. Find the corrected code in the snippet.
I wrote a simple Carousel page based on the official documentation.
Reference link:
https://getbootstrap.com/docs/4.4/components/carousel/#with-controls
But the Carousel Control Button is not in the right position.
img1
img2
It seems the Carousel Control Button is in the vertical center of browser but not div element. How should I make it in vertical center of ?
My environment: Debian 10 / Bootstrap 4.4.1(installed by yarn)
here's my code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-white" style="z-index: 20;">
<div class="container d-flex">
<a class="navbar-brand" href="#">
<img src="http://lorempixel.com/output/nature-q-c-100-50-5.jpg" style="height: 3rem;">
***
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav nav-pills ml-auto">
<li class="nav-item">
<a class="nav-link active" href="#">***<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">***</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">***</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">***</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">***</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid px-0">
<div id="carouselControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://lorempixel.com/output/animals-q-c-1280-1024-8.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="http://lorempixel.com/output/business-q-c-1280-1024-7.jpg" class="d-block w-100" alt="...">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
You have added arrows into .carousel-inner class. Hope now it will help you. if any changes please let me know.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<header>
<nav class="navbar navbar-expand-md navbar-light bg-white" style="z-index: 20;">
<div class="container d-flex">
<a class="navbar-brand" href="#">
<img src="http://lorempixel.com/output/nature-q-c-100-50-5.jpg" style="height: 3rem;"> ***
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav nav-pills ml-auto">
<li class="nav-item">
<a class="nav-link active" href="#">***<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">***</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">***</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">***</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">***</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid px-0">
<div id="carouselControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://lorempixel.com/output/animals-q-c-1280-1024-8.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="http://lorempixel.com/output/business-q-c-1280-1024-7.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
I am new to HTML and CSS.
I want to do a Single Web Page with Navbar and Image Slider.
What I have done is:
<div class="col-sm-6">
<div class="carousel-inner">
<div class="item active">
<img src="https://source.unsplash.com/random/300x201" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 1</h3>
<p>Image 1 Image 1</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/300x202" alt="Image 2" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 2</h3>
<p>Image 2 Image 2</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="carousel-inner">
<div class="item active">
<img src="https://source.unsplash.com/random/300x204" alt="Image 4" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 4</h3>
<p>Image 4 Image 4</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/300x205" alt="Image 5" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 5</h3>
<p>Image 5 Image 5</p>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
This is what I have done for Image Slider. It shows two images when the web page opens. But for next slide it shows only one image. I need two images for all slides(2).
All should be done only by HTML and CSS not JS or others.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</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="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-6 col-sm-6" style="padding: 0">
<img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg"
height="600px"
class="d-block w-100" alt="...">
</div>
<div class="col-md-6 col-sm-6" style="padding: 0">
<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-6 col-sm-6" style="padding: 0">
<img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg"
height="600px"
class="d-block w-100" alt="...">
</div>
<div class="col-md-6 col-sm-6" style="padding: 0">
<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-6 col-sm-6" style="padding: 0">
<img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg"
height="600px"
class="d-block w-100" alt="...">
</div>
<div class="col-md-6 col-sm-6" style="padding: 0">
<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
Since you are using bootstrap, I will add an HTML code for Navbar and Slider using Bootstrap components.
It is better to use Bootstrap since it is very easy to create awesome responsive HTML components using Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</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="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://slidervilla.com/smooth-slider/files/2014/05/3.jpg" height="600px" class="d-block w-100"
alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
.
Hope #Pramodya fix your rendering issue in the previous answer. I changed his answer a little to display 2 images in 1 slide.
If you want to display 2 images in 1 slide, You need to use flex layout.
--------------------Display: flex-----------------------
| | |
| flex: 1 | flex: 1 |
| | |
--------------------------------------------------------
Checkout this snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</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="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div style='display:flex'>
<div style='flex:1'>
<img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg" height="600px" class="d-block w-100" alt="...">
</div>
<div style='flex:1'>
<img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg" height="600px" class="d-block w-100" alt="...">
</div>
</div>
</div>
<div class="carousel-item">
<div style='display:flex'>
<div style='flex:1'>
<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
<div style='flex:1'>
<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
</div>
</div>
<div class="carousel-item">
<div style='display:flex'>
<div style='flex:1'>
<img src="https://slidervilla.com/smooth-slider/files/2014/05/3.jpg" height="600px" class="d-block w-100"
alt="...">
</div>
<div style='flex:1'>
<img src="https://slidervilla.com/smooth-slider/files/2014/05/3.jpg" height="600px" class="d-block w-100"
alt="...">
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
I tried to check the responsive design using chrome dev tool. But that is not working.
Whereas the same works fine when i resize the browser.
I could not identify what might be the issue? Could someone help me identify the issue?
Code is below
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-md-8 hidden-sm-down" style="background-color:#4E5B5C; color:#fff"><span><small>Heading heading heading 1</small></span></div>
<div class="col-lg-2 col-md-2 hidden-sm-down" style="background-color:#626F70; color:#fff"><span>Heading 2</span></div>
<div class="col-lg-2 col-md-2 hidden-sm-down" style="background-color:#475859; color:#fff"><span>Heading 3</span></div>
</div>
<div class="row" style="background-color: #2B3536;">
<div class="col-lg-2 col-md-2 col-sm-2 col-2 logo-div align-self-center"><img class="img-fluid" src="https://dummyimage.com/127x50/2b3536/fff"></div>
<div class="col-lg-7 col-md-8 col-sm-8 col-8">
<nav class="navbar navbar-wrapper navbar-fixed-top navbar-toggleable-sm navbar-expand-sm">
<div class="container">
<a href="#" class="hidden-md-up mr-3" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false">
<i class="fa fa-bars fa-lg text-white"></i>
</a>
<!--<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>-->
<div class="collapse navbar-collapse pl-sm-2" id="navbarNavDropdown">
<ul class="navbar-nav header-nav">
<li class="nav-item">
<a class="nav-link" href="#">Header menu item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Header menu item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Header menu item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Header menu item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Header menu item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Header menu item 6</a>
</li>
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>-->
</ul>
</div>
</div>
</nav>
</div>
<div class="col-lg-3 col-md-2 col-sm-2 col-2 align-self-center">
<div class="input-group">
<input class="form-control hidden-md-down"
placeholder="I'm looking for">
<div class="input-group-addon top-search-addon"><i class="fa fa-search fa-search-white"></i></div>
</div>
</div>
</div>
<div class="row">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://dummyimage.com/1290x672/ccc/000" alt="First slide">
<!--<div class="carousel-caption d-none d-md-block">
<h3>...</h3>
<p>...</p>
</div>-->
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://dummyimage.com/1290x672/ccc/000" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://dummyimage.com/1290x672/ccc/000" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
</html>
Screenshots are below.
Checking in Galaxy s5
Checking by resize the screen
Add viewport meta to your head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
VIEWPORT
The viewport is the user's visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.
The responsive design using chrome dev tool. But that is not working
CNTRL + F5 ( Force refresh the webpage ) and then check it.
You'll likely need to add viewport meta to your head.
<meta name="viewport" content="width=device-width, initial-scale=1">