Having trouble with Bootstrap - javascript

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.

Related

showing cart on top of carousel

I am trying to create a website where you can buy some sneakers, when the cart is clicked I want a div showing "your cart is empty" or the number of the items in the cart. my problem is it shows behind the carousel instead of over the carousel. I'm attaching the pictures of how it suppose ti look and how my one looks:
This is my HTL code:
<header>
<div id="header">
<div id="navLogo">
<div id="nav">
<div id="navMenu">
<button type="button" class="btn" data-mdb-toggle="modal" data-mdb-target="#exampleModal">
<image id="navIcon" src="./images/icon-menu.svg"></image></button>
</button>
<!-- Modal -->
<div class="modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="nav-menu">
<div class="modal-body">
<button type="button" class="btn" data-mdb-dismiss="modal"><image id="closeImg" src="./images/icon-close.svg"></image></button>
<ul class="nav-list">
<li class="nav-item">
<a class="nav-link" href="#">Collections</a>
<li class="nav-item">
<a class="nav-link" href="#">Men</a>
<li class="nav-item">
<a class="nav-link" href="#">Women</a>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--End Modal-->
</div>
<div id="logo">
<img id="logoImg" src="./images/logo.svg"/>
</div>
</div>
<div id="cartAvatar">
<button id="cartIcon">
<img id="cart" src="./images/icon-cart.svg"/>
<span id="cartIconNumber">0</span>
</button>
<!--CART EMPTY-->
<div class= "cart-Empty">
<div class="cart-Title" >
<h4>Cart</h4>
</div>
<div class="cart-Cont">
<h4> Your cart is empty</h4>
</div>
</div>
<!--CART FULL-->
<div class="cartFull">
<div class="cartContent">
<div class="cart-Title">
<h4>Cart</h4>
</div>
<div class="cart-img">
<img id="imgCart" class='cart-item' src="./images/image-product-1-thumbnail.jpg" class="shopping-cart-image">
</div>
<div class="cart-item">
<div class = "cart-name">
<h6>Autumn Limited Edition...</h6>
</div>
<div class="numbers">
<div class="cart-prize">
<p id="sneakers.prize"> </p>
</div>
<div class="cart-amount">
<p id="quantityFromStorage"></p>
</div>
<div class="cart-total">
<p id="prizeFromStorage"><p>
</div>
<div class="cart-delete">
<button class= "delete" type="button"><img src="./images/icon-delete.svg" class="shopping-cart-image"></button>
</div>
<span id="checkout">Checkout</span>
</div>
</div>
</div>
<!--END FOR CART-->
</header>
<body>
<div id="mainContainer">
<div id="myCarousel">
<div id="fullCarousel">
<!--Carousel wrapper -->
<div id="carouselSneakers" class="carousel slide carousel-slide" data-mdb-ride="carousel">
<!-- Slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/image-product-1.jpg" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="./images/image-product-2.jpg" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="./images/image-product-3.jpg" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="./images/image-product-4.jpg" class="d-block w-100" alt="..." />
</div>
</div>
<!-- Controls -->
<div id="controls">
<button class="carousel-control-prev" type="button" data-mdb-target="#carouselSneakers"
data-mdb-slide="prev" > <img class="controls" src="./images/icon-previous.svg">
</button>
<button class="carousel-control-next" type="button" data-mdb-target="#carouselSneakers"
data-mdb-slide="next"> <img class="controls" src="./images/icon-next.svg">
</button>
</div>
<!--Thumbnails-->
<div class="carousel-indicators">
<button id="imgdes"type="button" data-mdb-target="#carouselSneakers" data-mdb-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1">
<img src="./images/image-product-1-thumbnail.jpg" class="img-fluid" />
</button>
<button id="imgdes" type="button" data-mdb-target="#carouselSneakers" data-mdb-slide-to="1" aria-label="Slide 2">
<img src="./images/image-product-2-thumbnail.jpg" class="img-fluid" />
</button>
<button id="imgdes" type="button" data-mdb-target="#carouselSneakers" data-mdb-slide-to="2" aria-label="Slide 3">
<img src="./images/image-product-3-thumbnail.jpg" class="img-fluid" />
</button>
<button id="imgdes" type="button" data-mdb-target="#carouselSneakers" data-mdb-slide-to="3" aria-label="Slide 4">
<img src="./images/image-product-4-thumbnail.jpg" class="img-fluid" />
</button>
</div>
</div>
</div>
</div>
<!--Modal carousel-->
<div id="myModal" class="modal-carousel">
<div id=closeModal><img id=closeCarousel src="./images/icon-close.svg"/></div>
</div>
This is my css
/* CART EMPTY */
.cart-Empty{
display:none;
border-radius:30px;
width: 50%;
height:60vh;
width: fit-content;
margin-top: 80px;
z-index: 999;
}
.cart-Title{
border-bottom: solid hsl(0, 0%, 75%);
margin-left:10px;
margin-right: 10px;
width: 200px;
}
.cart-Cont{
color:hsl(0, 0%, 75%);
text-align: center;
padding-top: 25%;
padding-bottom: 25%;
width :200px;
}
/* CART FULL*/
.cartFull{
display: none;
position:absolute;
z-index: 9999;
}
.cartContent{
display: flex;
flex-direction: row;
position:absolute;
margin-top: 20px;
}
#imgCart{
height: 80px;
margin-left: 20px;
border-radius: 10%;
}
.numbers{
display:flex;
flex-direction: row;
}
.cart-item{
display: flex;
flex-direction: column;
margin-left: 20px;
color:hwb(0 75% 25%);
align-items:baseline;
align-content: center;
justify-items: flex-start;
}
.cart-total{
color:black;
width: fit-content;
}
.delete{
margin-left: 40px;
border: none;
background-color: white;
}
#checkout{
margin:20px;
background-color:hsl(26, 100%, 55%);
border-radius: 15px;
border: none;
height: 70px;
color:white;
width:100%;
}
/* CAROUSEL */
.carouselSneakers{
height: 80vh;
border: solid 1px;
width: 30px;
background-color: white;
border-radius: 50px;
padding:8px;
}
.carousel-inner{
position: inherit;
}
.carousel-indicators{
display:none;
}
.controls{
background-color: white;
border-radius: 50px;
padding:8px;
}
And this is my JS code, I know is pure javascript
IS very basic but I'm just starting and learning by myself
cartIcon.addEventListener("click", cartIconClicked)
function cartIconClicked(event){
const buttonClicked = event.target;
cartIconNumber.innerText == 0 ?
cartEmpty.classList.toggle("cart-Empty"): cartFull.classList.toggle("cartFull");
quantityFromStorage = localStorage.getItem('quantity');
prizeFromStorage = localStorage.getItem('prize');
totalPrize.innerText = prizeFromStorage;
squantity.innerText= "X" + quantityFromStorage;
sprize.innerText ="$" + sneakers.prize + ".00";
cartFull
.querySelector('.delete')
.addEventListener('click', removeShoppingItem);
function removeShoppingItem(event){
const buttonDelete = event.target;
cartIconNumber.innerText > 0 ?
cartFull.classList.toggle("cartFull") : null;
cartIconNumber.innerHTML = 0;
cartIconNumber.style.display="none";
}
}
Can someone tell me how can I put the cart on top of the carousel?? thank you!!!

Add z-index:1; in your carouselSneakers CSS class and change z-index from 999 to 3 in your cart-Empty and cartFull class. Hopefully it will work but also try to ask for more help in comments if it's not working.

i wanted to switch tabs by one button

my problem is that when you press the TAB button it shows the word profile, and if you press it again it should show the word home
currently, when I click on Tab, it switches to profile, but again when I click on Tab, it should switch to home, but it doesn't switch.
const tab1 = document.querySelector('#tab11')
const tab2 = document.querySelector('#tab12')
const allTabPane = document.querySelectorAll('.tab-pane')
tab1.addEventListener('click', toggleTabs);
tab2.addEventListener('click', toggleTabs);
function clickTab(tab) {
if (tab.parentNode.classList.contains('active') === false) tab.click();
}
function toggleTabs(e) {
e.preventDefault();
if (this.parentNode.classList.contains('active')) {
let toClick = this.parentNode.parentNode.querySelector('li:not(.active) > a');
setTimeout(function() {
toClick.click();
}, 10);
}
}
.wrapper {
width: 50%;
border: solid #000 2px;
margin: 0 auto;
}
.tab-bg {
text-decoration: none;
font-size: 2rem;
}
.tab-pane {
padding: 50px;
color: blueviolet;
font-size: 1.5rem;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<div class="wrapper">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">
<a class="tab-bg" href="#" id="tab11" data-bs-toggle="tab" data-bs-target="#home-tab-pane" role="tab" aria-controls="home-tab-pane" aria-selected="true">TAB</a>
</li>
<li>
</li>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="home-tab-pane">Home</div>
<div class="tab-pane fade" id="profile-tab-pane">Profile</div>
</div>
</div>
</div>
Codepen demo.

Working code
$('.tab-bg').on('click', function () {
$('.tab-bg').closest("li").toggleClass("active");
$(".tab-pane").toggleClass("active fade show");
});
.wrapper{
width: 50%;
border: solid #000 2px;
margin: 0 auto;
}
.tab-bg{
text-decoration: none;
font-size: 2rem;
}
.tab-pane{
padding: 50px;
color: blueviolet;
font-size: 1.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<div class="wrapper">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">
<a class="tab-bg" href="#" id="tab11" data-bs-toggle="tab" data-bs-target="#home-tab-pane" role="tab" aria-controls="home-tab-pane" aria-selected="true">TAB</a>
</li>
<li>
</li>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane show active" id="home-tab-pane">Home</div>
<div class="tab-pane fade" id="profile-tab-pane">Profile</div>
</div>
</div>
</div>

How to change menu to responsive bootstrap menu

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>

Bootstrap 4 losing content with fullPage.js

Well basically my problem is that when I'm scrolling down when using the fullPage.js, I loose the content of my 'Section0, I don't know if it is the lack of sleep but I can't find the problem, I'm linking the codepen so you can try it live, thanks in advance!
<div id="fullpage">
<div class="section fp-auto-height" id="section0">
<!-- Fin del menú de navegación -->
<div class="banner">
<div class="container">
<div class="intro">
<h1 class="jumbotitle">BRAND LOGO</h1>
<p class="jumboparr">¡Some text for information!</p>
</div>
</div>
</div>
</div>
<div class="section" id="section1">
<div class="slide sd1" id="slide1">
<div class="container">
<div class="row justify-content-center">
<p class="sdp1">More info bla bla blaa </p>
<p class="sdp1">The same info different color</p>
</div>
</div>
</div>
<div class="slide sd2" id="slide2">
<div class="container">
<div class="row justify-content-center">
<p class="sdp2">¡Moooore infoooo lorem impsum! </p>
</div>
</div>
</div>
</div>
</div>
Codepen

I think the problem is .banner {height:800px;}. If you change it, for example, in height:100vh you can see your content.
https://codepen.io/anon/pen/mjdPpz
.navbar{
background: black !important;
}
#header, #footer {
position:fixed;
display:block;
width: 100%;
z-index:9;
}
#header {
top:0px;
}
.banner {
height: 100vh;
width: 100%;
background-image: url("https://cdnb.artstation.com/p/assets/images/images/009/439/993/large/brody-bellon-background-space-sm.jpg?1519023411") !important;
background-size: cover;
z-index: -1;
}
.navbar-brand {
font-family: 'Francois One', sans-serif;
font-size: 30px;
font-weight: bold;
color: white !important;
}
.navbar-nav {
font-family: 'Francois One', sans-serif;
font-size: 25px;
text-align: right;
color: white !important;
}
.nav-link {
color: white !important;
}
.nl1:hover {
color: #9933ff !important;
font-family: 'Monoton', cursive !important;
}
.nl2:hover {
color: #ffcc00 !important;
font-family: 'Monoton', cursive !important;
}
.sd1 {
background-color: #ffcc00;
}
.sd2 {
background-color: #9933ff;
}
.sdp1 {
text-align: center;
font-size: 40px;
font-family: 'Oswald', sans-serif;
color: black;
}
.sdp2 {
text-align: center;
font-size: 40px;
font-family: 'Oswald', sans-serif;
color: white;
}
.jumbotitle {
font-family: 'Francois One', sans-serif;
font-size: 130px;
text-align: center;
color: white;
}
.jumboparr {
font-family: 'Oswald', sans-serif;
font-size: 40px;
text-align: center;
color: white;
}
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<link href="https://fonts.googleapis.com/css?family=Acme|Fjalla+One|Francois+One|Oswald|Monoton" rel="stylesheet">
<!-- Scroll Plugin de fullpage.js -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.1/fullpage.css">
<!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.1/vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.1/fullpage.js"></script>
<title>TEST</title>
</head>
<body>
<div id="header">
<!-- Menú de navegación -->
<div class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">BRAND TEST</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 nl2" href="home.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link nl1" href="#">Galeria</a>
</li>
<li class="nav-item">
<a class="nav-link nl2" href="#">Noticias</a>
</li>
<li class="nav-item">
<a class="nav-link nl1" href="#">Equipo</a>
</li>
<li class="nav-item">
<a class="nav-link nl2" href="#">Contacto</a>
</li>
</ul>
</div>
</div>
</div>
<div id="fullpage">
<div class="section fp-auto-height" id="section0">
<!-- Fin del menú de navegación -->
<div class="banner">
<div class="container">
<div class="intro">
<h1 class="jumbotitle">BRAND LOGO</h1>
<p class="jumboparr">¡Some text for information!</p>
</div>
</div>
</div>
</div>
<div class="section" id="section1">
<div class="slide sd1" id="slide1">
<div class="container">
<div class="row justify-content-center">
<p class="sdp1">More info bla bla blaa </p>
<p class="sdp1">The same info different color</p>
</div>
</div>
</div>
<div class="slide sd2" id="slide2">
<div class="container">
<div class="row justify-content-center">
<p class="sdp2">¡Moooore infoooo lorem impsum! </p>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
var myFullpage = new fullpage('#fullpage', {
anchors: ['firstPage', 'secondPage'],
sectionsColor: ['#ffcc00', '#9933ff'],
fixedElements: '#header'
});
</script>
</body>
</html>

You should need to remove "fp-auto-height" class from section0.

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>

Categories