How to change menu to responsive bootstrap menu - javascript

I want to use bootstrap 5 responsive menu in the example shown in codepen, i tried few thing but it keeps breaking one way or the way.
https://codepen.io/KGuide/pen/WNogyyV
I want to use bootstrap menu and replace the current one, so that menu is responsive with animation on hover for large screens.
<nav class="navbar navbar-expand-lg navbar-light p-5">
<div class="container">
<a class="navbar-brand" href="#"><img class="img-fluid" src="images/logo.png"/></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Offers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
console.clear();
const nav = document.querySelector(".nav-container");
const blob = document.querySelector(".nav-container svg");
gsap.set(blob, {xPercent: -50, x:innerWidth / 2});
nav.addEventListener("mousemove", function(e){
gsap.to(blob, {duration: 0.2, x: e.clientX, overwrite: 'auto'});
});
nav.addEventListener("mouseleave", function(e){
gsap.to(blob, {duration:0.1, x: innerWidth / 2, overwrite: `auto`});
});
body{font-family: "Open Sans Condensed"; background: black;}
h1 {font-family: "Open Sans Condensed"; font-size: 2.2em; font-weight: 600;}
.c-hotel h3 {font-size: 1.2em; font-weight: 600;}
.logo {max-width: 160px;}
.nav-container nav {
display: flex;
justify-content: space-around;
background:white;
height:100px;
}
.nav-container nav a {
color: black;
text-decoration: none;
font-size: 20px;
font-family:"Roboto";
font-weight: 600;
color: #358E9D;
text-transform: uppercase;
padding: 10px 20px 20px 20px;
line-height: 70px;
}
.nav-container{position: relative;}
.nav-container svg{
position: absolute;
top:100%;
left:0;
height:20px;
z-index: 1;
}
.nav-container path{
fill:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght#300&family=Roboto:wght#300&display=swap" rel="stylesheet">
<div class="containerx nav-container">
<nav>
HOME
DINE
<img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" />
HOTELS
CONTACT
</nav>
<svg viewBox="0 0 200 20">
<path class="blob" d="M0 0 C60 0 60 18 100 18 C140 18 120 0 200 0 Z"></path>
</svg>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- <nav class="navbar navbar-expand-lg navbar-light p-5">
<div class="container">
<a class="navbar-brand" href="#"><img class="img-fluid" src="images/logo.png"/></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Offers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav> -->
<div class="container-fluid mb-3 mt-0 p-0">
<div class="row gx-0">
<div class="col-lg-6 col-md-6 mb-sm-4 mb-md-0 mb-lg-0 border-0">
<div class="card bg-dark text-white text-center shadow-sm rounded-0">
<img src="https://www.arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg?itok=CYsgY2Qi" class="card-img" alt="...">
<div class="card-img-overlay d-flex align-items-center">
<h2 class="card-title text-center w-100 "> HEADING ONE</h2>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="card bg-dark text-white text-center shadow-sm rounded-0 border-0">
<img src="https://www.arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg?itok=CYsgY2Qi" class="card-img" alt="...">
<div class="card-img-overlay">
<h2 class="card-title">HEADING TWO</h2>
<!-- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> -->
</div>
</div>
</div>
</div>
</div>


Here’s a version of your page using the navbar from Bootstrap 5.0 with the logo in the center for larger displays.
Update
In my original answer, I cheated on the layout by using two logos, one for mobile and one for larger displays to get the spacing around the four links and the logo to match the original request by using ‘justify-content-evenly.’ That did provide equal spaces between all of the items as well as between the edge of the browser and the first and last items, but it had duplicate content.
In my update, I use one logo and split the links between two navbar-collapse lists. Splitting the links into two separate navbar-collapse lists provides a place in the middle for the logo on large screens. I use order: 2 to move the logo from the left side of the navbar on small screens to the middle on wider screens.
The two navbar-collapse divs are set to expand to fit the available space using flex-grow-1. The ul lists in the navbar-collapse divs are set to w-100 and justify-content-evenly to space out the two links.
Because there are two navbar-collapse divs, I modified the navbar-toggler button to use a class value for data-bs-target rather than an id, and listed the ids for the two navbar-collapse divs for aria-controls="navbarContent1 navbarContent2" with a space between the two ids.
While the original question was about getting a Bootstrap 5 navbar to work to match an example, I also modified the setup for the Green Sock animation (GASP):
Added listeners for load, resize, orientation to configure or reconfigure the gasp setup.
Switched from innerWidth to document.documentElement.clientWidth – innerWidth includes the scrollbar in the width, which shifts the blob towards the right if there is a scrollbar. clientWidth avoids the problem.
Revised the svg path for the blob – the original was a little uneven.
const nav = document.querySelector(".navbar");
const blob = document.querySelector("svg.nav-blob");
function initiateBlob() {
gsap.set(blob, {
xPercent: -50,
x: document.documentElement.clientWidth / 2
});
}
nav.addEventListener("mousemove", function(e) {
gsap.to(blob, {
duration: 0.2,
x: e.clientX,
overwrite: 'auto'
});
});
nav.addEventListener("mouseleave", function(e) {
gsap.to(blob, {
duration: 0.1,
x: document.documentElement.clientWidth / 2,
overwrite: 'auto'
});
});
window.addEventListener('load', initiateBlob, false);
window.addEventListener('resize', initiateBlob, false);
window.addEventListener('orientationchange', initiateBlob, false);
body {
font-family: "Open Sans Condensed";
background: black;
}
h1 {
font-family: "Open Sans Condensed";
font-size: 2.2em;
font-weight: 600;
}
.logo {
max-width: 160px;
}
a.nav-link {
color: black;
text-decoration: none;
font-size: 20px;
font-family: "Roboto";
font-weight: 600;
color: #358E9D;
text-transform: uppercase;
padding: 10px 20px 20px 20px;
}
.navbar-nav .nav-link {
padding-left: 1rem;
}
svg.nav-blob {
position: absolute;
top: 100%;
left: 0;
height: 20px;
z-index: 1;
display: none;
}
svg.nav-blob path {
fill: white;
}
#media (min-width:768px) {
.sr-md-only {
position: absolute;
left: -10000px;
top: auto;
overflow: hidden;
}
a.nav-link {
line-height: 70px;
}
.nav-item {
width: 6.75rem;
text-align: center;
}
.navbar-expand-md {
justify-content: space-evenly;
}
svg.nav-blob {
display: block;
}
.card-img, .card-img-top {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght#300&family=Roboto:wght#300&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-light navbar-expand-md bg-white">
<div class="container-lg">
<img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" alt="Logo image" />
<button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target=".navbarContent" aria-controls="navbarContent1 navbarContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarContent1" class="navbar-collapse collapse flex-grow-1 navbarContent order-md-1">
<ul class="navbar-nav w-100 justify-content-evenly">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DINE</a>
</li>
</ul>
</div>
<div id="navbarContent2" class="navbar-collapse collapse flex-grow-1 navbarContent order-md-3">
<ul class="navbar-nav w-100 justify-content-evenly">
<li class="nav-item">
<a class="nav-link" href="#">HOTELS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
<svg class="nav-blob" viewBox="0 0 200 20">
<path class="blob" d="M0 0 C60 0 60 18 100 18 C140 18 140 0 200 0 Z"></path>
</svg>
</div>
</nav>
<div class="container-fluid mb-3 mt-0 p-0">
<div class="row gx-0">
<div class="col-12 col-md-6">
<div class="card bg-dark text-white text-center border-top-0">
<img src="https://via.placeholder.com/670x395.png" class="card-img" alt="Placeholder image">
<div class="card-img-overlay">
<h2 class="card-title"> HEADING ONE</h2>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card bg-dark text-white text-center border-top-0">
<img src="https://via.placeholder.com/670x395.png" class="card-img" alt="Placeholder image">
<div class="card-img-overlay">
<h2 class="card-title">HEADING TWO</h2>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 vh-100">
<p>Section to give height to the page.</p>
</div>
</div>
</div>
I replaced the original images with same-size placeholder images.
How to handling the separate menu items for the mobile menu came from the answer to another question: Bootstrap 4 navbar with brand center and links on the left, center and right


You can make separate nav for desktop and mobile like the snippet below.
Thanks me later.
console.clear();
const nav = document.querySelector(".nav-container");
const blob = document.querySelector(".nav-container svg");
gsap.set(blob, {xPercent: -50, x:innerWidth / 2});
nav.addEventListener("mousemove", function(e){
gsap.to(blob, {duration: 0.2, x: e.clientX, overwrite: 'auto'});
});
nav.addEventListener("mouseleave", function(e){
gsap.to(blob, {duration:0.1, x: innerWidth / 2, overwrite: `auto`});
});
body{font-family: "Open Sans Condensed"; background: black;}
h1 {font-family: "Open Sans Condensed"; font-size: 2.2em; font-weight: 600;}
.c-hotel h3 {font-size: 1.2em; font-weight: 600;}
.logo {max-width: 160px;}
.nav-container nav {
display: flex;
justify-content: space-around;
background:white;
height:100px;
}
.nav-container nav a {
color: black;
text-decoration: none;
font-size: 20px;
font-family:"Roboto";
font-weight: 600;
color: #358E9D;
text-transform: uppercase;
padding: 10px 20px 20px 20px;
line-height: 70px;
}
.nav-container{position: relative;}
.nav-container svg{
position: absolute;
top:100%;
left:0;
height:20px;
z-index: 1;
}
.nav-container path{
fill:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght#300&family=Roboto:wght#300&display=swap" rel="stylesheet">
<div class="containerx nav-container">
<nav class="d-none d-lg-block">
HOME
DINE
<img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" />
HOTELS
CONTACT
</nav>
<svg viewBox="0 0 200 20">
<path class="blob" d="M0 0 C60 0 60 18 100 18 C140 18 120 0 200 0 Z"></path>
</svg>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<nav class="navbar d-lg-none navbar-expand-lg navbar-light p-5">
<div class="container">
<a class="navbar-brand" href="#"><img class="img-fluid" src="images/logo.png" alt="Logo"/></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DONE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">HOTELS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid mb-3 mt-0 p-0">
<div class="row gx-0">
<div class="col-lg-6 col-md-6 mb-sm-4 mb-md-0 mb-lg-0 border-0">
<div class="card bg-dark text-white text-center shadow-sm rounded-0">
<img src="https://www.arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg?itok=CYsgY2Qi" class="card-img" alt="...">
<div class="card-img-overlay d-flex align-items-center">
<h2 class="card-title text-center w-100 "> HEADING ONE</h2>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="card bg-dark text-white text-center shadow-sm rounded-0 border-0">
<img src="https://www.arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg?itok=CYsgY2Qi" class="card-img" alt="...">
<div class="card-img-overlay">
<h2 class="card-title">HEADING TWO</h2>
<!-- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> -->
</div>
</div>
</div>
</div>
</div>


maybe this can help
i add jquery & css in media(767px)
i make popup animated menu on click of menu bar.
your navbar html structure is not proper for make menu responsive that
why i add extra menu for mobile for make responsive.
console.clear();
const nav = document.querySelector(".nav-container");
const blob = document.querySelector(".nav-container svg");
gsap.set(blob, { xPercent: -50, x: innerWidth / 2 });
nav.addEventListener("mousemove", function (e) {
gsap.to(blob, { duration: 0.2, x: e.clientX, overwrite: "auto" });
});
nav.addEventListener("mouseleave", function (e) {
gsap.to(blob, { duration: 0.1, x: innerWidth / 2, overwrite: `auto` });
});
window.onresize = function () {
gsap.set(blob, { xPercent: -50, x: innerWidth / 2 });
nav.addEventListener("mousemove", function (e) {
gsap.to(blob, { duration: 0.2, x: e.clientX, overwrite: "auto" });
});
nav.addEventListener("mouseleave", function (e) {
gsap.to(blob, { duration: 0.1, x: innerWidth / 2, overwrite: `auto` });
});
};
/*****For menu open*******/
$(document).ready(function () {
$('.menu-btn').click(function(event) {
$('.navbar-demo').toggleClass('open-nav');
});
});
body{font-family: "Open Sans Condensed"; background: black;}
h1 {font-family: "Open Sans Condensed"; font-size: 2.2em; font-weight: 600;}
.c-hotel h3 {font-size: 1.2em; font-weight: 600;}
.logo {max-width: 160px;}
.nav-container nav {
display: flex;
justify-content: space-around;
background:white;
height:100px;
}
.nav-container nav a {
color: black;
text-decoration: none;
font-size: 20px;
font-family:"Roboto";
font-weight: 600;
color: #358E9D;
text-transform: uppercase;
padding: 10px 20px 20px 20px;
line-height: 70px;
}
.nav-container{position: relative;}
.nav-container svg{
position: absolute;
top:100%;
left:0;
height:20px;
z-index: 1;
}
.nav-container path{
fill:white;
}
/*************************/
.navbar-demo button.menu-btn {
display:none;
}
header#header {
display: none;
}
/******responsive menu css*******/
#media only screen and (max-width: 767px){
header#header {
display: block;
}
nav.desktop-menu {
display: none;
}
.navbar-demo button.menu-btn {
position: absolute;
top: 0;
right: 0;
background-color: unset;
border: 0;
font-size: 26px;
display:block;
padding: 15px;
color: #000;
outline: none;
}
.navbar-demo{
height:100%;
z-index: 999;
}
.navbar-demo .nav-bar {
background-color: #ffff;
transition: 1s;
height: 100%;
position: fixed;
height: 100vh;
width: 100%;
flex-direction: column;
clip-path: circle(100px at 138% -20%);
-webkit-clip-path: circle(100px at 138% -20%);
transition: all 1s ease-out;
pointer-events: none;
}
.navbar-demo.open-nav .nav-bar{
clip-path: circle(1100px at 190% -10%);
-webkit-clip-path: circle(1100px at 90% -10%);
pointer-events: all;
}
.navbar-demo {
display: table;
width: 100%;
position: fixed;
z-index: 99;
}
.navbar-demo .nav-bar ul li {
display: block;
}
.navbar-demo .nav-bar ul {
padding: 0;
display: table;
text-align: center;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items: center;
margin: 0;
padding: 0;
}
.navbar-demo .nav-bar ul li a {
font-size: 18px;
display: inline-block;
text-align: center;
text-decoration: none;
color: #fff;
padding: 18px;
text-transform: uppercase;
}
.nav-bar {
text-align: center;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items: center;
position: relative;
}
.navbar-demo .nav-bar ul li a {
display: block;
color: #000;
}
.navbar-demo.open-nav button.menu-btn i:before {
content: '\f00d ';
}
.nav-container svg {
display: none;
}
.logo-main {
background-color: white;
}
.container-fluid.mb-3.mt-0.p-0 {
padding-top: 57px !important;
}
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght#300&family=Roboto:wght#300&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="containerx nav-container">
<nav class="desktop-menu">
HOME
DINE
<img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" />
HOTELS
CONTACT
</nav>
<header id="header" class="navbar-demo">
<div class="logo-main">
<img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" />
</div>
<div class="nav-bar">
<ul>
<li>
HOME
DINE
HOTELS
CONTACT
</li>
</ul>
</div>
<button type="" class="menu-btn"><i class="fa fa-bars" aria-hidden="true"></i></button>
</header>
<svg viewBox="0 0 200 20">
<path class="blob" d="M0 0 C60 0 60 18 100 18 C140 18 120 0 200 0 Z"></path>
</svg>
</div>
<div class="container-fluid mb-3 mt-0 p-0">
<div class="row gx-0">
<div class="col-lg-6 col-md-6 mb-sm-4 mb-md-0 mb-lg-0 border-0">
<div class="card bg-dark text-white text-center shadow-sm rounded-0">
<img src="https://www.arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg?itok=CYsgY2Qi" class="card-img" alt="...">
<div class="card-img-overlay d-flex align-items-center">
<h2 class="card-title text-center w-100 "> HEADING ONE</h2>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="card bg-dark text-white text-center shadow-sm rounded-0 border-0">
<img src="https://www.arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg?itok=CYsgY2Qi" class="card-img" alt="...">
<div class="card-img-overlay">
<h2 class="card-title">HEADING TWO</h2>
<!-- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> -->
</div>
</div>
</div>
</div>
</div>

Related

Bootstrap card content overflowing past background height

I am currently running into an issue with my HTML/CSS (Bootstrap 5.0) code. I am trying to implement a Pinterest style Masonry card gallery using the Bootstrap 5.0 grid system and the Masonry library. The issue I run into is that the content overflows past the background container height. The cards also seem to stack over each other until you resize the window.
Is there a better way to implement a Masonry layout with Bootstrap 5.0 or any issues you can see with my code that would cause this overflow height/stacking issue? Let me know if I can provide any more information or code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
<title>Grayson Felt</title>
</head>
<div class="background-image">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid px-4">
<a class="navbar-brand" href="index.html">
<h2 style="color: var(--light-blue)">
<i class="bi bi-postage-heart"></i>
</h2>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="professional.html">Professional</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="whole px-5 p-3 my-3">
<div class ="px-5 p-3 my-3 justify-content-center container-fluid bg-white-trans">
<h1 class="text-center display-3">Gallery</h1>
<div class="container py-5">
<div class="row row-cols-1 row-cols-md-3 g-4" data-masonry='{"percentPosition": true }'>
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/237/200/300" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/237/300/200" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/237/200/300" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/237/300/200" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/237/200/300" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/237/200/300" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/masonry-layout#4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
</html>
Non-Bootstrap CSS Properties
:root{
--light: #7C766A;
--dark: #4D473E;
--gray: #B8B8B8;
--white: #D9D9D9;
--black: #010400;
--purple: #594AF6;
--blue: #40B2B2;
--green: #AFB116;
--yellow: #D0A000;
--red: #A54738;
}
.background-image{
background-image: url('https://www.teahub.io/photos/full/17-179150_2560x1600-monet-desktop-wallpaper-monet-poppies.jpg');
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
a:link{ color:var(--blue); }
a:visited { color:var(--purple);}
header, .post{
-webkit-box-shadow: 0px 10px 0px 1px var(--dark); /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 10px 0px 1px var(--dark); /* Firefox 3.5 - 3.6 */
box-shadow: 0px 10px 0px 1px var(--dark); /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
background-color:var(--white);
border-radius: 10px;
padding:40px;
margin:40px;
}
.post-head p{
color:var(--dark);
font-size:15px;
padding-bottom:30px;
}
.post-head h3{
font-size:20px;
color:var(--dark);
}
.post img{
height:200px;
width: 200px;
margin:10px;
}
.sidenav {
-webkit-box-shadow: 0px 10px 0px 1px var(--dark); /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 10px 0px 1px var(--dark); /* Firefox 3.5 - 3.6 */
box-shadow: 0px 10px 0px 1px var(--dark); /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
border-radius: 10px;
height: 86%;
width: 20%;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: var(--white);
overflow-x: hidden;
padding-top: 20px;
padding-bottom: 20px;
margin:40px;
}
.sidenav p{
margin-left:40px;
}
#media screen and (max-width: 1650px) {
.sidenav{
display:none !important
}
header, .post{
width:75%
}
}
.highlight{
text-decoration:underline 2px;
text-decoration-color:var(--yellow);
}
.rainbow{
background: url(assets/rainbow.JPG) no-repeat center center fixed;
background-size: 100% 100%;
height:5px;
position:fixed;
left:0px;
bottom:0px;
width:100%;
}
/* this is needed to make the content scrollable on larger screens */
#media (min-width: 576px) {
.h-sm-100 {
height: 100%;
}
}
#media (max-width: 600px) {
.whole {
width:100%;
}
}
#media (min-width:600px) {
.whole {
width:90%;
align-content: center;
justify-content: center;
margin: auto;
}
}
Edit:
Here is an image of the overflow/stacking issue:

To just focus on the masonry layout (you have a couple of other height issues) - the issue is actually being caused by the <img> element in each of your cards. Instead of using an <img> maybe consider using a <div> with a background-image. This could cause some issues with the aspect ratio of the image but there is a nice hack for that using padding-top. Here's an example:
<div style='
background-image: url("https://picsum.photos/id/237/200/300");
background-color: #cccccc;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 0;
padding-top: 150%'></div>

Overlapping images before refresh / on some browsers [duplicate]

I'm sorry for dropping so much code here, but I've been playing with this for over a week and I just can't figure it out.
So I am working on my personal website, and the problem is that the images in the the body's grid system overlap sometimes on the first load of the site. If you refresh it, it seems to work ok (most of the time). You can try yourself: tylerteacher.com . The strange thing is that the site works in the compatibility viewers in chrome and firefox.
I have tried adding margins and using the 'space-between' function in the css. I have double checked the html to make sure everything is properly linked to the css page, and I have also played with Javascript page and the slides per view functions.
I really appreciate the help!
let toggle = document.querySelector("#header .toggle-button");
let collapse = document.querySelectorAll("#header .collapse");
toggle.addEventListener('click' , function(){
collapse.forEach(col => col.classList.toggle("collapse-toggle"));
})
// with masonry
new Masonry("#posts .grid", {
itemSelector : '.grid-item',
gutter : 20
});
// swiper libray initialization
new Swiper('.swiper-container', {
direction : 'horizontal',
loop : true,
slidesPerView : 6,
autoplay : {
delay : 0
},
// responsive breakpoints
breakpoints : {
'#0' : {
slidesPerView : 2
},
// 888px
'#1.00' : {
slidesPerView : 3
},
// 1110px
'#1.25' : {
slidesPerView : 4
},
// 1330px
'#1.50' : {
slidesPerView: 5
}
}
})
// Sticky Navigation
window.onscroll = function(){ myFunction()};
// get the current value
let navbar = document.getElementById("header");
// get the navbar position
let sticky = navbar.offsetTop;
// sticky function
function myFunction(){
if(window.pageYOffset >= sticky){
navbar.classList.add("sticky");
}else{
navbar.classList.remove("sticky");
}
}
#import url('https://fonts.googleapis.com/css2?family=DM+Sans&family=Poppins&family=Roboto&display=swap');
/* root styling */
:root{
--light : #f8f9fa;
--secondary: #adb5bd;
--dark: #343a40;
--primary-color: #f15bb5;
--secondary-color: #2ec4b6;
--border : #e9ecef;
}
body{
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
* > *{
box-sizing: border-box;
}
/* global styling */
.text-light{
color: var(--light);
}
.text-secondary{
color: var(--secondary);
}
.text-dark{
color: var(--dark);
}
.text-primary{
color: var(--primary-color);
}
.bg-light{
background-color: var(--light);
}
.container{
max-width: 1200px;
padding: 0 15px;
margin: auto;
}
.img-fluid{
width: 100%;
}
.text-title{
font-family: 'DM Sans', sans-serif;
font-weight: bold;
}
.secondary-title{
font-family: 'Poppins' , sans-serif;
}
.display-1{
font-size: 22px;
}
.display-2{
font-size: 16px;
}
.display-3{
font-size: 14px;
}
.text-center{
text-align: center;
}
.text-right{
text-align: right;
}
.btn{
padding: 15px 20px;
border: none;
}
.btn-primary{
border-radius: 4px;
background-color: var(--secondary-color);
}
.object-fit{
max-height: 120px;
height: 80px;
width: 80px;
object-fit: fill;
justify-content: space-between;
}
.d-flex{
display: flex;
}
.flex-wrap{
flex-wrap: wrap;
}
.justify-content-center{
justify-content: center;
}
.justify-content-between{
justify-content: space-between;
}
.mt-2{
margin-top: 10px;
}
.mt-3{
margin-top: 50px;
}
.mb-3{
margin-bottom: 30px;
}
.m-0{
margin: 0;
}
.px-1{
padding-left: 5px;
padding-right: 5px;
}
.px-2{
padding-left: 20px;
padding-right: 20px;
}
.py-1{
padding-top: 10px;
padding-bottom: 10px;
}
.py-2{
padding-top: 20px;
padding-bottom: 20px;
}
.py-3{
padding-top: 30px;
padding-bottom: 30px;
}
.thumbnail{
width: 100%;
height: 500px;
object-fit: cover;
}
.rounded{
height: 120px;
width: 120px;
object-fit: fill;
border-radius: 99px;
}
.shadow{
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
/* section styling */
/* ------- Navigation Menu ---------- */
.navbar{
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
}
.nav-brand{
font-family: 'DM Sans', sans-serif;
font-weight: bold;
align-self: center;
font-size: 32px;
}
.collapse{
align-self: center;
}
.nav-link{
font-size: 18px;
margin: 12px;
color: var(--dark);
font-family: 'Poppins', sans-serif;
}
.nav-link:hover{
color: var(--primary-color);
}
.search-box{
display: inline;
border-right: 1px solid var(--secondary);
padding-right: 12px;
margin-right: 10px;
}
.toggle-button{
font-size: 21px;
background-color: transparent;
border: none;
position: absolute;
right: 0;
margin: 8px 10px;
display: none;
}
.toggle-button:focus{
outline: none;
}
/* ------- .Navigation Menu ---------- */
/* ----------- Main Section ---------- */
#site-main{
margin-top: 4em;
}
#posts{
margin-bottom: 5em;
}
.grid{
margin: 1 auto;
row-gap: 20px;
}
.grid .grid-item{
width: calc(33.3333% - 20px);
margin-bottom: 3em;
}
/* ----------- .Main Section ---------- */
/* ----------- sticky ------- */
.sticky{
position: fixed;
top: 0;
z-index: 99;
width: 100%;
}
.sticky + .content{
padding-top: 60px;
}
/* ----------- .sticky ------- */
/* Media Query */
.row{
display: flex;
}
.col-3{
flex: 0 0 33.3333%;
max-width: 33.3333%;
padding-right: 35px;
}
.col-8{
flex: 0 0 70%;
max-width: 70%;
}
.col-4{
flex: 0 0 30%;
max-width: 30%;
}
#media (max-width : 1024px){
.row{
flex-wrap: wrap;
}
.col-3{
flex: 0 0 50%;
max-width: 50%;
}
.col-8{
flex: 0 0 100%;
max-width: 100%;
}
.col-4{
flex: 0 0 100%;
max-width: 100%;
}
}
#media (max-width : 992px){
.navbar{
flex-direction: column;
}
#site-main{
margin-top: 14em;
}
}
#media (max-width : 768px){
.grid .grid-item{
width: calc(50% - 20px);
border-top: 1px solid #dfdfdf;
}
.col-3{
flex: 0 0 100%;
max-width: calc(100% - 50px);
padding-top: 40px;
}
}
#media (max-width : 574px){
.toggle-button{
display: initial;
}
.collapse{
max-height: 0;
overflow: hidden;
transition: all 0.8s cubic-bezier(0.51,-0.15, 0, 0.98);
}
.collapse .nav-link{
display: block;
text-align: center;
}
.search-box{
border-right: none;
}
.collapse-toggle{
max-height: 500px;
}
.grid .grid-item{
width: calc(100% - 20px);
border-top: 1px solid #dfdfdf;
}
#site-main{
margin-top: 6em;
justify-content: space-around;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TylerTeacher</title>
<!-- font awesome icons cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
crossorigin="anonymous" />
<!-- swiper slider css file -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.css"
integrity="sha512-m3pAvNriL711NMlhkZHK6K4Tu2/RjtrzyjxZU8mlAbxxoDoURy27KajN1LGTLeEEPvaN12mKAgSCrYEwF9y0jA=="
crossorigin="anonymous" />
<!-- custom style.css file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header -->
<header id="header" class="shadow bg-light">
<nav class="container navbar">
<a href="/index.html" class="nav-brand text-dark">
TylerTeacher
</a>
<!-- toggle button -->
<button class="toggle-button">
<span><i class="fas fa-bars"></i></span>
</button>
<!-- collapse on toggle button click -->
<div class="collapse">
<ul class="navbar-nav">
Home
Resources
Classes
Testimonials
Contact
</ul>
</div>
<!-- collapse on toggle button click -->
<div class="collapse">
<ul class="navbar-nav">
<div class="search-box">
<i class="fas fa-search"></i>
</div>
<i class="fab fa-facebook-f"></i>
<a href="#" class="https://www.youtube.com/channel/UCDN9p8e-UAaPxtzfoVJnLMw"><i
class="fab fa-youtube"></i></a>
<a href="https://www.instagram.com/tyler.s.teacher/" class="nav-link"><i
class="fab fa-instagram"></i></a>
<i class="fab fa-tiktok"></i>
</ul>
</div>
</nav>
</header>
<!-- .Header -->
<!--main site-->
<main id="site-main">
<!-- Blog Post Section -->
<section id="posts">
<div class="container">
<div class="grid">
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin:auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/inspirational-word_EXZZBXPUS6.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Welcome to TylerTeacher.com
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around; ">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/grandmother-1822560_960_720.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Why online education is the future
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto" >
<div class="overflow-img">
<a href="#">
<img src="./Assets/inspirational-word_EXZZBXPUS6.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
How to overcome language anxiety
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/laptop-red-cup-coffee-notebook-pen-satchel-freephotoscc-thumb-2.jpg"
class="img-fluid" alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Podcasts are a great tool for language learners
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto" >
<div class="overflow-img">
<a href="#">
<img src="./Assets/man_studying_online.jpg" class="img-fluid"
alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
What makes some people better at learning languages?
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/negative-space-picnic-city-river-sunset-ben-duchac-thumb-1.jpg"
class="img-fluid" alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Tips for becoming a more confident communicator in English
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/listen-1702648_960_720.jpg" class="img-fluid"
alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
How listening can make you better at speaking English
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/Man_studying.jpg" class="img-fluid" alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
How to use online classes effectively
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin:auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/education_tiles.jpg" class="img-fluid"
alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Coming soon
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
</div>
<div class="text-center">
<button class="btn btn-primary secondary-title text-light">Load More Posts...</button>
</div>
</div>
</section>
<!-- .Blog Post Section -->
<!-- masonry libray for horizontal grid -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ=="
crossorigin="anonymous"></script>
<!-- swiper slider cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js"
integrity="sha512-1LlEYE0qExJ/GUfAJ0k2K2fB5sIvMv/q6ueo3syohvQ3ElWDQVSMUOf39cxaDWHtNu7M6lF6ZC1H6A1m3SvheA=="
crossorigin="anonymous"></script>
<!-- custom javascript main.js file -->
<script src="main.js"></script>
<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>
</body>
</html>

It is caused by the Masonry. You have to let the page finish loading before you initialize it. This worked for me
window.addEventListener('load', function(){
new Masonry("#posts .grid", {
itemSelector : '.grid-item',
gutter : 20
});
// remove preload if added
});
Optional: Whiles the page loads, you can add a preloader to hide the page's disorganised stucture.

What you're experiencing is due to the Masonry script calculating the dimensions of the grid based on its content. While loading the page your images don't have a width and height because the browser doesn't know what they look like. Masonry doesn't wait and will render your grid anyway.
A fix for this is to let the browser know in advance what the dimensions of the image will be. You can do this by adding a width and height attribute to your img tag containing the width and height in pixels.
<img src="your-image.jpg" class="img-fluid" width="480" height="720" alt="" />
Alternatively you could wait for all images in your grid to load before initializing the Masonry script.
// Loads a single image.
const loadImage = src => new Promise(resolve => {
const image = new Image();
image.onload = () => resolve();
image.src = src;
});
// Get the container with all images.
// Loop over each image and wait for all of them to load.
async function allImagesLoaded(selector) {
const container = document.querySelector(selector);
if (container === null) {
return;
}
const images = container.querySelectorAll('img');
return Promise.all([...images].map(
src => loadImage(src)
));
}
// Load all images inside #posts .grid.
allImagesLoaded('#posts .grid').then(() => {
new Masonry("#posts .grid", {
itemSelector : '.grid-item',
gutter : 20
});
});

Having trouble with Bootstrap

I've recently started using bootstrap to make a website functioning for both computer and mobile phones/tablets.
While it scales everything nicely in the browser, when I resize my browser window, some words disappear in my interface.
How can I make it so that my text doesn't disappear and stay in their respective rectangles?
I'm running this webpage on a Siemens S7-1200 PLC. I have made a json file that fetches data from the PLC which I represent on my website. When I try it on my phone however, some of the text disappears.
The following Image represents how my page looks like on a web browser on my laptop:
When I resize my browser it looks like the following:
Notice the arrow I've added, the arrow points towards the '1' that is next to the text that says 'Mixer 1'.
Excuse my english, it's not my mother tongue.
My HTML code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- title -->
<title>Main Page</title>
<!-- scripts -->
<!-- css -->
<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">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.4.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
</head>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">
<img src="img/logo.png">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="main.html"><h2>Main</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="motoren.html"><h2>Motoren</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="verwarming.html"><h2>Verwarming</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io1.html"><h2>DI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io2.html"><h2>DQ</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io3.html"><h2>AI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="alarm.html"><h2>Alarm</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="diagnostics.html"><h2>Diagnostics</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="parameters.html"><h2>Parameters</h2></a>
</li>
</ul>
</div>
</nav>
<header class="page-header header container-fluid">
<div class="overlay">
<div class="customTable">
<div class="container-fluid">
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-pixel-width-100">Overzicht</div>
<div class="col" id="ovznormaal">Normaal</div>
<div class="col" id="ovzengsave">Energy Save</div>
<div class="col" id="ovzhyg">Hygieniseren</div>
<div class="col" id="ovzhygdone">Hygieniseren Klaar</div>
<div class="col" id="ovzdrleeg">Leeg Draaien</div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Motoren</div>
<div class="col" id="mix1">Mixer 1</div>
<div class="col" id="mix2">Mixer 2 (EC100)</div>
<div class="col" id="ventil">Ventilator</div>
<div class="col" id="percent"><p id="percnum">0 %</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Verwarming</div>
<div class="col">Product Temperatuur</div>
<div class="col"><p id="prodTemp">000.0 C</p></div>
<div class="col">Mat 1 Temperatuur</div>
<div class="col"><p id="m1temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">IO</div>
<div class="col">Mat 2 Temperatuur</div>
<div class="col"><p id="m2temp">000.0 C</p></div>
<div class="col">Mat 3 Temperatuur</div>
<div class="col"><p id="m3temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Alarmen</div>
<div class="col">Verwarming Matten</div>
<div id="mt1" class="col">Mat 1</div>
<div id="mt2" class="col">Mat 2</div>
<div id="mt3"class="col">mat 3</div>
<!--<div class="col"></div>-->
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Diagnostics</div>
<div class="col">Programma Keuze</div>
<div id="kort" class="col"><p id="shortprog">Kort 0000 Min</p></div>
<div id="lang" class="col"><p id="longprog">Lang 0000 Min</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Parameters</div>
<div class="col">Operationele stand</div>
<div class="col">
<div class="switchcontainer">
<form>
<input type="submit" value="Auto">
<input type="hidden" name='"2_HMI".AUTOTEST' value="0">
</form>
<form>
<input type="submit" value="Handmatig">
<input type="hidden" name='"2_HMI".AUTOTEST' value="1">
</form>
<!--<button id="Auto">Auto</button>
<button id="Handmatig">Handmatig</button>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" 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>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.4.0/js/bootstrap4-toggle.min.js"></script>
<script type="text/javascript" src="js/custom/main.js"></script>
</body>
</html>
My CSS:
body {
padding: 0;
margin: 0;
background: #f2f6e9;
}
/*--- navigation bar ---*/
.navbar {
background:#6ab446;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #000;
}
.navbar-collapse {
justify-content: flex-end;
}
.header {
background-image: url('../img/test.png');
background-size: cover;
background-position: center;
position: relative;
}
.overlay {
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
}
.customTable {
padding-top: 8%;
padding-left: 2%;
width: 98%;
}
.col {
height: 100px;
font-size: 25;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 98px;
border: 1px solid black;
background-color:lightgray;
}
.col-pixel-width-100 {
font-size: 40;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 100px;
flex: 0 0 15%;
background-color:grey;
}
#Auto {
width: 180px;
height: 100%;
}
#Handmatig {
width: 180px;
height: 100%;
}
I hope someone can give my some tips, I'm kind of a beginner to CSS/HTML/JS.

Your <DIV> text is wrapping into the box below it, add white-space: nowrap to your CSS for the DIVs under .col {} and .col-pixel-width-100 {}
.col {
height: 100px;
font-size: 25;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 98px;
border: 1px solid black;
background-color:lightgray;
white-space: nowrap;
}
.col-pixel-width-100 {
font-size: 40;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 100px;
flex: 0 0 15%;
background-color:grey;
white-space: nowrap;
}

You could also try adding the "text-nowrap" class. That is a bootsrtap class that will essentially do the same as what Bob Dole has suggested above

you can simply provide a new class to all the required columns. Here i have edited the code for you
HTML PART
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- title -->
<title>Main Page</title>
<!-- scripts -->
<!-- css -->
<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">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.4.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
</head>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">
<img src="img/logo.png">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="main.html"><h2>Main</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="motoren.html"><h2>Motoren</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="verwarming.html"><h2>Verwarming</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io1.html"><h2>DI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io2.html"><h2>DQ</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io3.html"><h2>AI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="alarm.html"><h2>Alarm</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="diagnostics.html"><h2>Diagnostics</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="parameters.html"><h2>Parameters</h2></a>
</li>
</ul>
</div>
</nav>
<header class="page-header header container-fluid">
<div class="overlay">
<div class="customTable">
<div class="container-fluid">
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-pixel-width-100">Overzicht</div>
<div class="col newclass" id="ovznormaal">Normaal</div>
<div class="col newclass" id="ovzengsave">Energy Save</div>
<div class="col newclass" id="ovzhyg">Hygieniseren</div>
<div class="col newclass" id="ovzhygdone">Hygieniseren Klaar</div>
<div class="col newclass" id="ovzdrleeg">Leeg Draaien</div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Motoren</div>
<div class="col newclass" id="mix1">Mixer 1</div>
<div class="col newclass" id="mix2">Mixer 2 (EC100)</div>
<div class="col newclass" id="ventil">Ventilator</div>
<div class="col newclass" id="percent"><p id="percnum">0 %</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Verwarming</div>
<div class="col newclass">Product Temperatuur</div>
<div class="col newclass"><p id="prodTemp">000.0 C</p></div>
<div class="col newclass">Mat 1 Temperatuur</div>
<div class="col newclass"><p id="m1temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">IO</div>
<div class="col newclass">Mat 2 Temperatuur</div>
<div class="col newclass"><p id="m2temp">000.0 C</p></div>
<div class="col newclass">Mat 3 Temperatuur</div>
<div class="col"><p id="m3temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Alarmen</div>
<div class="col newclass">Verwarming Matten</div>
<div id="mt1" class="col newclass">Mat 1</div>
<div id="mt2" class="col newclass">Mat 2</div>
<div id="mt3"class="col newclass">mat 3</div>
<!--<div class="col"></div>-->
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Diagnostics</div>
<div class="col newclass">Programma Keuze</div>
<div id="kort" class="col newclass"><p id="shortprog">Kort 0000 Min</p></div>
<div id="lang" class="col newclass"><p id="longprog">Lang 0000 Min</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Parameters</div>
<div class="col newclass">Operationele stand</div>
<div class="col newclass">
<div class="switchcontainer">
<form>
<input type="submit" value="Auto">
<input type="hidden" name='"2_HMI".AUTOTEST' value="0">
</form>
<form>
<input type="submit" value="Handmatig">
<input type="hidden" name='"2_HMI".AUTOTEST' value="1">
</form>
<!--<button id="Auto">Auto</button>
<button id="Handmatig">Handmatig</button>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS PART
body {
padding: 0;
margin: 0;
background: #f2f6e9;
}
/*--- navigation bar ---*/
.navbar {
background:#6ab446;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #000;
}
.navbar-collapse {
justify-content: flex-end;
}
.header {
background-image: url('../img/test.png');
background-size: cover;
background-position: center;
position: relative;
}
.overlay {
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
}
.customTable {
padding-top: 8%;
padding-left: 2%;
width: 98%;
}
.col {
height: 100px;
font-size: 25;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 98px;
border: 1px solid black;
background-color:lightgray;
}
.col-pixel-width-100 {
font-size: 40;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 100px;
flex: 0 0 15%;
background-color:grey;
}
.newclass {
min-width: 300px;
}
#Auto {
width: 180px;
height: 100%;
}
#Handmatig {
width: 180px;
height: 100%;
}
PS I have added a new class named "newclass" and provided a min width....please change the min-width as you like

I think your issue lies with using line-height as a vertical align, as when the text wraps, it wraps with 98px of line-height.
I would start by removing it and re-aligning it with padding etc.

Adding hidden spaces between buttons

I'm trying to create a single scrolling webpage consisting of three pages
$('a.page-scroll').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 60
}, 1000);
event.preventDefault();
});
* {
margin-top: 0;
margin-bottom: 0;
}
#page1 {
height: 1000px;
background-color: #000;
color: white;
}
#page2 {
height: 1000px;
color: white;
background-color: #18121e;
padding-top: 140px;
border-top: 100px;
}
#page3 {
height: 650px;
color: white;
background-color: #233237;
background-size: cover;
padding-top: 200px;
}
body {
padding-top: 0px;
}
#page1 p {
padding-top: 100px;
font-size: 2.5rem;
}
#page1 p #highlight {
color: pink !important;
}
#page2 h3 {
padding-bottom: 80px;
line-height: 1.5;
}
#page3 h3 {
padding-bottom: 100px;
line-height: 1.5;
}
.btn {
color: white;
background-color: #000 !important;
}
.btn:hover {
color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.7/jquery.nicescroll.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Rashid Naushad</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#about">About</a>
</li>
<li><a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li><a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--<div class="container-fluid">-->
<div>
<div id="page1">
<a id="about"></a>
<br>
<br>
<br>
<p class="text-center">Hi !
<br>I'm a self taught web developer based in India.
<br>I'm an undergraduate student pursuing economics who just loves to <span id="highlight">code</span>.
<br>I dream of combining my knowledge of programming, economics, and
<br>financial markets for the betterment of the society.
<br>Languages and Frameworks:
<br>HTML5, CSS3, Bootstrap3,
<br>Javascript, jQuery, Angular.js, Meteor.js,
<br>Node.js, React,js,
<br>Python, php..
<br>Tools & expertise: Git, Responsive Web Design.</p>
</div>
<div id="page2">
<a id="portfolio"></a>
<h3 class="text-center">Here is my latest portfolio, <br>I'll be adding more as I learn and grow..</h3>
<!--<div class="row">
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="VaKMBJ" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Simple Javascript App by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="pyPjae" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Tribute to Raghuram Rajan by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
</div>-->
</div>
<div id="page3">
<a id="contact"></a>
<h3 id="contact-text" class="text-center">Think I can be of any help to you?<br>Wanna collaborate?<br>Shoot me a message, now!</h3>
GitHub
<div class="hidden-lg hidden-md">
<br>
</div>
freeCodeCamp
<div class="hidden-lg hidden-md">
<br>
</div>
Gmail
</div>
</div>
The buttons on the third page,when collapsed don't leave a space in between. How do I add space between the buttons in the small and xsmall screen sizes?I tried inserting between the buttons, but that didn't work.
Here is the JsFiddle

Add this to your CSS
#media screen and (max-width: 990px) {
.btn ~ .btn {
margin-top: 10px;
}
}
Updated fiddle
Sample snippet
$('a.page-scroll').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 60
}, 1000);
event.preventDefault();
});
* {
margin-top: 0;
margin-bottom: 0;
}
#page1 {
height: 1000px;
background-color: #000;
color: white;
}
#page2 {
height: 1000px;
color: white;
background-color: #18121e;
padding-top: 140px;
border-top: 100px;
}
#page3 {
height: 650px;
color: white;
background-color: #233237;
background-size: cover;
padding-top: 200px;
}
body {
padding-top: 0px;
}
#page1 p {
padding-top: 100px;
font-size: 2.5rem;
}
#page1 p #highlight {
color: pink !important;
}
#page2 h3 {
padding-bottom: 80px;
line-height: 1.5;
}
#page3 h3 {
padding-bottom: 100px;
line-height: 1.5;
}
.btn {
color: white;
background-color: #000 !important;
}
.btn:hover {
color: gray;
}
#media screen and (max-width: 990px) {
.btn ~ .btn {
margin-top: 10px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.7/jquery.nicescroll.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Rashid Naushad</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#about">About</a>
</li>
<li><a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li><a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--<div class="container-fluid">-->
<div>
<div id="page1">
<a id="about"></a>
<br>
<br>
<br>
<p class="text-center">Hi !
<br>I'm a self taught web developer based in India.
<br>I'm an undergraduate student pursuing economics who just loves to <span id="highlight">code</span>.
<br>I dream of combining my knowledge of programming, economics, and
<br>financial markets for the betterment of the society.
<br>Languages and Frameworks:
<br>HTML5, CSS3, Bootstrap3,
<br>Javascript, jQuery, Angular.js, Meteor.js,
<br>Node.js, React,js,
<br>Python, php..
<br>Tools & expertise: Git, Responsive Web Design.</p>
</div>
<div id="page2">
<a id="portfolio"></a>
<h3 class="text-center">Here is my latest portfolio, <br>I'll be adding more as I learn and grow..</h3>
<!--<div class="row">
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="VaKMBJ" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Simple Javascript App by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="pyPjae" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Tribute to Raghuram Rajan by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
</div>-->
</div>
<div id="page3">
<a id="contact"></a>
<h3 id="contact-text" class="text-center">Think I can be of any help to you?<br>Wanna collaborate?<br>Shoot me a message, now!</h3>
GitHub
<div class="hidden-lg hidden-md">
<br>
</div>
freeCodeCamp
<div class="hidden-lg hidden-md">
<br>
</div>
Gmail
</div>
</div>

Skrollr init set <body> height to be too high

I used Skrollr library to create parallax effect for the background. However, when skillor.init() is called, the body height is too high and create extra space below in the page.
The problem can be seen here:
http://codepen.io/designil/pen/Ggxde
HTML:
<div class="headrow">
<div class="container">
<div class="row">
<div class="col-md-3">
<h1 class="logo">21GUNS</h1>
</div>
<div class="col-md-9">
<div class="topmenu">
<p>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-pinterest"></i>
</p>
<ul class="list-unstyled">
<li>
<div class="dropdown">
<a data-toggle="dropdown" href="#">MENU 1</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</li>
<li>
MENU 2
</li>
<li>
MENU 3
</li>
<li>
MENU 4
</li>
<li>
MENU 5
</li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- headrow -->
<div class="bannerrow">
<img src="http://placehold.it/1800x600" alt="" />
</div>
<div class="servicerow" data-top-bottom="background-position: 50% 75%;" data-bottom-top="background-position: 50% 100%;">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<header>
<h2>21SERVICES</h2>
<p>Drive next-generation technologies vortals engage, systems services dynamic to our clients.</p>
</header>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
</div>
</div>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js"></script>
CSS:
#blue: #293448;
#red: #C1392B;
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
}
.headrow {
background: #blue;
}
.logo a {
color: #fff;
transition: 0.3s;
&:hover {
text-decoration: none;
color: #eee;
}
}
.topmenu {
text-align: right;
p {
margin-top: 10px;
a {
display: inline-block;
margin: 0 5px;
text-align: right;
}
}
ul {
margin-bottom: 0;
}
li {
display: inline-block;
margin-left: 30px;
a {
color: #eee;
display: block;
padding-bottom: 10px;
border-bottom: 3px solid transparent;
transition: 0.3s;
}
a:hover {
text-decoration: none;
border-bottom: 3px solid #red;
}
.dropdown-menu {
text-align: left;
li {
margin: 0;
display: block;
}
a:hover {
background: #ccc;
}
a {
color: #blue;
border: 0;
transition: 0;
}
}
}
}
.bannerrow {
img { width: 100%; height: auto;}
}
.servicerow {
color: #fff;
padding-bottom: 100px;
background: url(http://i.imgur.com/pIaoyxQ.jpg) no-repeat;
background-size: cover;
header {
margin-top: 60px;
margin-bottom: 20px;
h2 { margin-bottom: 10px; }
p { font-size: 13pt; }
}
}
.column2-box {
border: 1px solid #ddd;
padding: 10px;
margin: 15px 0;
i { font-size: 110px; float: left; }
h3 { margin-top: 0; }
}
JS:
$(function() {
$('.dropdown-toggle').dropdown();
$('.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
});
var s = skrollr.init({forceHeight: false});
});
I am not sure which element makes the page too high.

skrollr.init({forceHeight: false});
https://github.com/Prinzhorn/skrollr#forceheighttrue
Skrollr makes sure you can actually reach data-bottom-top. As you can see, the gap allows the element's bottom to be perfectly aligned with the top of the viewport.

Categories