We Keep Coding

screen-responsive navbar can't work properly

I have navigation bar for pc and for mobile, problem is if I maximize window when mobile navbar is opened, mobile navbar will disappear as it should but desktop navbar doesn't appear. I am working with bootstrap template and I don't know if my problem solution requires javascript knowledge but if it does, I can show it.
Here is my css code
/**
* Desktop Navigation
*/
.navbar {
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
}
.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 10px 30px;
font-size: 15px;
font-weight: 500;
color: #751D41;
white-space: nowrap;
transition: 0.3s;
}
.navbar a.active { color: #751D41}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
color: #402D85;
}
.navbar .getintouch,
.navbar .getintouch:focus {
padding: 8px 20px;
margin-left: 30px;
border-radius: 50px;
color: #751D41;
font-size: 14px;
border: 2px solid #751D41;
font-weight: 600;
}
.navbar .getintouch:hover,
.navbar .getintouch:focus:hover {
color: #fff;
background: #751D41;
}
/**
* Mobile Navigation
*/
.navbar-mobile {
display: none;
}
.mobile-nav-toggle {
color: #fff;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
}
.mobile-nav-toggle.bi-x {
color: #fff;
}
#media (max-width: 991px) {
.mobile-nav-toggle {
display: block;
}
.navbar ul {
display: none;
}
.navbar-mobile {
display: block;
position: fixed;
overflow: hidden;
top: 55px;
right: 20px;
left: 10;
bottom: 150px;
transition: 0.3s;
z-index: 999;
}
}
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 15px;
right: 15px;
}
.navbar-mobile ul {
display: block;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
padding: 10px 0;
border-radius: 10px;
background: rgba(253, 110, 110, 0.5);
overflow-y: auto;
transition: 0.3s;
}
.navbar-mobile a,
.navbar-mobile a:focus {
padding: 10px 20px;
font-size: 14px;
color: white;
}
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
color: #751D41;
}
.navbar-mobile .getintouch,
.navbar-mobile .getintouch:focus {
margin: 15px;
color: #402D85;
}
and here is html code
<!-- ======= Header ======= -->
<header id="header" class="fixed-top ">
<div class="container d-flex align-items-center">
<img src="assets/img/navLogo.png" alt="" class="img-fluid">
<nav id="navbar" class="navbar">
<ul>
<li><a class="nav-link scrollto" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#hero">About Us</a></li>
<li><a class="nav-link scrollto" href="#hero">Our Team</a></li>
<li><a class="nav-link scrollto" href="#hero">Our Offers</a></li>
<li><a class="nav-link scrollto" href="#hero">Projects</a></li>
<li><a class="nav-link scrollto" href="#hero">Careers</a></li>
<li><a class="getintouch scrollto" href="#hero">Get In Touch</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
</div>
</header><!-- End Header -->

Use this code for your Header and edit accordingly you want it, its responsive too.
$(document).ready(function() {
// Toggle menu on click
$("#menu-toggler").click(function() {
toggleBodyClass("menu-active");
});
function toggleBodyClass(className) {
document.body.classList.toggle(className);
}
});
/* Extra */
$primary: #fff;
$secondary: #ccc;
$ternary: #272727;
$dark: #444444;
body {
background: $secondary;
color: $ternary;
font-size: 14px;
margin: 0;
}
.logo {
max-width: 200px;
}
.navbar {
align-items: center;
background: $primary;
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
display: flex;
flex-direction: row;
font-family: sans-serif;
padding: 10px 50px;
}
.push-left {
margin-left: auto;
}
/* Menu */
.hamburger {
background: transparent;
border: none;
cursor: pointer;
display: none;
outline: none;
height: 30px;
position: relative;
width: 30px;
z-index: 1000;
#media screen and (max-width: 768px) {
display: inline-block;
}
&-line {
background: $ternary;
height: 3px;
position: absolute;
left: 0;
transition: all .2s ease-out;
width: 100%;
.hamburger:hover & {
background: #777;
}
&-top {
top: 3px;
}
.menu-active &-top {
top: 50%;
transform: rotate(45deg) translatey(-50%);
}
&-middle {
top: 50%;
transform: translatey(-50%);
}
.menu-active &-middle {
left: 50%;
opacity: 0;
width: 0;
}
&-bottom {
bottom: 3px;
}
.menu-active &-bottom {
bottom: 50%;
transform: rotate(-45deg) translatey(50%);
}
}
}
.nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
transition: all .25s ease-in;
#media screen and (max-width: 768px) {
background: $primary;
flex-direction: column;
justify-content: center;
opacity: 0;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
transform: translatey(-100%);
text-align: center;
.menu-active & {
transform: translatey(0%);
opacity: 1;
}
}
.menu-item a {
color: $dark;
display: block;
line-height: 30px;
margin: 0px 10px;
text-decoration: none;
text-transform: uppercase;
&:hover {
color: lighten($dark, 20);
text-decoration: underline;
}
#media screen and (max-width: 768px) {
font-size: 20px;
margin: 8px;
}
}
}
.sub-nav {
border: 1px solid #ccc;
display: none;
position: absolute;
background-color: $primary;
padding: 5px 5px;
list-style: none;
width: 230px;
#media screen and (max-width: 768px) {
position: relative;
width: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.20);
box-sizing: border-box;
}
}
.nav__link {
&:hover + .sub-nav {
display:block;
}
}
.sub-nav {
&:hover {
display:block;
}
}
<nav class="navbar">
<div class="logo"><img src="https://upload.wikimedia.org/wikipedia/commons/2/23/AS_sample_logo.png" alt="LOGO"></div>
<div class="push-left">
<button id="menu-toggler" data-class="menu-active" class="hamburger">
<span class="hamburger-line hamburger-line-top"></span>
<span class="hamburger-line hamburger-line-middle"></span>
<span class="hamburger-line hamburger-line-bottom"></span>
</button>
<!-- Menu compatible with wp_nav_menu -->
<ul id="primary-menu" class="menu nav-menu">
<li class="menu-item "><a class="nav__link" href="#">Home</a>
</li>
<li class="menu-item "><a class="nav__link" href="#">About Us</a>
</li>
<li class="menu-item "><a class="nav__link" href="#">Our Team</a>
</li>
<li class="menu-item "><a class="nav__link" href="#">Our Offers</a>
</li>
<li class="menu-item "><a class="nav__link" href="#">Projects</a>
</li>
<li class="menu-item "><a class="nav__link" href="#">Careers</a>
</li>
<li class="menu-item "><a class="nav__link" href="#">Get In Touch</a>
</li>
</ul>
</div>
</nav>

Submenu not opening on clicking arrow button , instead opens on clicking on the li tag i.e services

On clicking the arrow button it shows no action, however on clicking services it opens up. Well, what I want is to open on clicking the arrow button as well as service i.e. li tag. And also on clicking the arrow button, when the show class is active the caret or angle down button should horizontally rotate 180 deg. These are the two things I want in my work, let me clarify again.
On clicking the arrow button submenu should appear.
Rotation of arrow button 180deg when the submenu is open.
Link to my work is: https://codepen.io/TA0011/pen/yLjWwGQ
//for sidebar
const sidebar = document.querySelector('#mySidebar')
const toggle = document.querySelector('#sidebar-toggle')
toggle.addEventListener('click', toggleSidebar)
function toggleSidebar(e) {
toggle.classList.toggle('open')
sidebar.classList.toggle('open');
}
//for sidebar
//for sidebar submenu
const caretButton = document.querySelectorAll(".caret");
caretButton.forEach((el) =>
el.addEventListener("click", (event) => {
const subMenu = event.target.parentElement.querySelector(".sub-menu");
subMenu.classList.toggle("show");
})
);
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
text-decoration: none;
}
header {
height: 50px;
width: 100%;
background: coral;
position: fixed;
}
header img {
height: 40px;
width: 40px;
margin: 5px;
}
#sidebar-toggle {
display: inline-block;
cursor: grab;
background: rgba(0, 136, 169, 1);
border-radius: 50%;
padding: 5px 10px;
height: 40px;
width: 40px;
margin-top: 5px;
float: right;
}
#sidebar-toggle div {
width: 20px;
height: 2px;
background-color: #fff;
margin: 6px 0;
transition: all 0.3s ease 0s;
cursor: grab;
}
#sidebar-toggle.open .bar4 {
transform: translate(0, 8px) rotate(-45deg);
}
#sidebar-toggle.open .bar5 {
opacity: 0;
}
#sidebar-toggle.open .bar6 {
transform: translate(0px, -8px) rotate(45deg);
}
#mySidebar {
transition: all 0.2s linear;
transform: translateX(-250px);
display: flex;
flex-direction: column;
height: calc(100vh - 50px);
box-sizing: border-box;
top: 50px;
}
/* then a few properties removed and box-sizing added */
.sidebar {
position: fixed;
top: 0;
left: 0;
background-color: #fff;
width: 15.625rem;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
z-index: 0;
transition: all 0.5s ease;
}
.open.sidebar {
display: flex;
}
.sidebar-nav {
flex: 1;
overflow: auto;
}
#mySidebar.open {
transform: translateX(0);
}
.sidebar-header {
padding: 0px;
width: 100%;
background: rgba(0, 136, 169, 1);
height: 3rem;
}
.sidebar-header .profile {
display: flex;
color: #fff;
}
.profile .profile-image img {
flex-wrap: wrap;
pointer-events: none;
border-radius: 50%;
width: 40px;
float: none;
display: block;
object-fit: fill;
height: 40px;
margin-left: 20px;
}
.profile .profile-name {
display: inline-flex;
display: flex;
align-items: center;
justify-content: center;
margin: 0 2px 0 5px;
font-size: 14px;
font-weight: 600 !important;
}
.profile .profile-name i {
margin: -2px 5px 0 2px;
font-size: 16px;
}
.profile-stats {
margin: 10px 0;
color: #fff;
font-size: 12px;
display: flex;
flex-direction: row;
gap: 0.25rem;
align-items: center;
cursor: pointer;
}
.profile-stats .stats {
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
justify-content: center;
}
#followerCount,
#mediaCount,
#followingCount {
font-size: 10px;
}
.sidebar-nav {
margin: 0;
overflow: auto;
}
.sidebar-nav ul {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
list-style: none;
padding: 0 15px;
line-height: 30px;
box-sizing: border-box;
}
.sidebar-nav ul li {
width: 100%;
box-sizing: border-box;
color: #007bff;
padding: 5px 10px;
margin: 1px 0;
}
.sidebar-nav ul li a {
text-decoration: none;
}
.sidebar-nav ul .active,
.sidebar-nav ul .active a .icon {
background: #007bff;
color: #ffffff;
border-radius: 10px;
}
.sidebar-nav ul li:hover,
.sidebar-nav ul li:hover a .icon,
.sidebar-nav ul li:hover a {
background: #007bff;
color: #ffffff;
border-radius: 10px;
}
.sidebar-nav ul li a .icon {
color: #007bff;
width: 30px;
display: inline-block;
}
.sidebar-nav ul li a .caret {
left: 90px;
position: relative;
}
.sidebar-nav .sidebar-nav-header {
text-transform: uppercase;
font-size: 11px;
margin: -0.75rem 1.5rem;
color: #0c7db1;
}
.sidebar-footer {
background: #FF7F50;
text-align: center;
}
.sidebar-footer span a {
display: block;
padding: .5em 0;
color: #fff;
background: #FF7F50;
font-weight: 600 !important;
text-decoration: none;
}
.sidebar-footer span i {
width: 30px;
font-size: 16px;
}
.sidebar-nav ul .sub-menu {
display: none;
}
.sidebar-nav ul .sub-menu.show {
display: flex;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css">
<header>
<img src="https://www.tailorbrands.com/wp-content/uploads/2020/07/mcdonalds-logo.jpg" class="logo" alt="Logo">
<div id="sidebar-toggle">
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
</div>
</header>
<div class="sidebar" id="mySidebar">
<div class="sidebar-header">
<div class="profile">
<div class="profile-image">
<img src="https://media-exp1.licdn.com/dms/image/C560BAQHMnA03XDdf3w/company-logo_200_200/0/1519855918965?e=2147483647&v=beta&t=J3kUMZwIphc90TFKH5oOO9Sa9K59fimgJf-s_okU3zs">
</div>
<div class="profile-name">
<i class="fas fa-chess-pawn"></i><span>Umann Goswami</span>
</div>
</div>
</div>
<!--sidebar-header-->
<div class="sidebar-nav">
<ul>
<li class="active"><span class="icon"><i class="fas fa-home"></i></span>Home</li>
<li class="caret"><a><span class="icon"><i class="fas fa-chart-bar"></i></span>Services<span class="caret fas fa-angle-down"</a>
<ul class="sub-menu">
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li><span class="icon"><i class="fas fa-pen-nib"></i></span>Home
</li>
<li><span class="icon"><i class="fas fa-file-alt"></i></span>Home</li>
<li><span class="icon"><i class="far fa-comments"></i></span>home</li>
<li><span class="icon"><i class="fas fa-cog"></i></span>home</li>
</ul>
<div class="sidebar-nav-header">
Admin
</div>
<ul>
<li><span class="icon"><i class="fas fa-users"></i></span>home</li>
</ul>
<div class="sidebar-nav-header">
Profile
</div>
<ul>
<li><a href=""><span class="icon"><i class="fas
fa-user"></i></span>home</a></li>
<li><span class="icon"><i class="fas fa-user-edit"></i></span>Home</li>
</ul>
<div class="sidebar-nav-header">
Analysis
</div>
<ul>
<li><span class="icon"><i class="fas fa-user"></i></span>Home</li>
<li><span class="icon"><i class="fas fa-user-edit"></i></span>Home</li>
</ul>
</div>
<!--sidebar-nav-->
<div class="sidebar-footer">
<span><i class="fas fa-power-off"></i>Logout</span>
</div>
</div>
<!--sidebar-->

can make some changes:
const caretButton = document.querySelectorAll(".list-item");
caretButton.forEach((el) =>
el.addEventListener("click", (event) => {
if (el.tagName === "LI") {
el.querySelector(".sub-menu").classList.toggle("show")
el.querySelector(".caret").classList.toggle("rotated")
}
})
);
.rotated {
transform: rotate(180deg)
}
<li class="list-item">
<span class="icon">
<i class="fas fa-chart-bar"></i>
</span>Services
<span class="caret fas fa-angle-down" />
<ul class="sub-menu">
<li>Home</li>
<li>Home</li>
</ul>
</li>
Your HTML was with little mistakes and added one class 'rotated' and modified JS because there was a mistake when submenu was undefined because of parentElement attribute

Search Bar showing footer when any word is typed in thats not on the product cards

I have implemented a search bar on my website and when a name of a product card is typed in it works. However, if you was to type in a word such as "lol' or any other word that is not included on the product cards the footer begins to show. I'm wanting the footer to stay in its current place which is at the bottom of the page.
I will be uploading code snippets and the files to my server so you can view the entire website and the problems I am experiencing.
I hope all of the information provided shows the problem I am experiencing.
[Click the product page to see the problem I am experiencing or click run snippet below][1]
[1]: https://kipplo.co.uk/kipplov2
// JavaScript code
function search_products() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('products');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}
body {
background-color: black;
}
* {
font-family: Verdana;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.alertcontainer {
display: flex;
flex-direction: column;
height:100vh;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(139, 185, 255);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
#media (max-width: 1000px) {
.content {
width: 46%;
}
}
#media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
.boxed {
box-shadow: 0 0 15px rgb(24, 143, 190);
border-radius: 15px;
text-align:center;
padding: 4%;
margin: 10vh;
font-size:20px;
color:#00ffd5;
}
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
height: auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
#media screen and (max-width: 600px) {
.form1 {
width: 90%;
height: auto;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
/* Scroll bar */
::-webkit-scrollbar {
background: transparent;
width: 7px;
}
::-webkit-scrollbar-thumb {
background: #606060;
border-radius: 100px;
}
/* search bar */
#searchbar{
margin-left: 15%;
padding:15px;
border-radius: 10px;
}
input[type=text] {
width: 30%;
-webkit-transition: width 0.15s ease-in-out;
transition: width 0.15s ease-in-out;
}
/* When the input field gets focus,
change its width to 100% */
input[type=text]:focus {
width: 70%;
}
#list{
font-size: 1.5em;
margin-left: 90px;
}
.products{
display: list-item;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<title>Products</title>
<style>
p1 {
color: whitesmoke;
}
</style>
</head>
<body>
<!-- Alert Bar -->
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<center><strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center></div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png">
<div>
<li>Home</li>
<li><a class="active" href="products.html">Products</a></li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
<!-- input tag copy this-->
<input id="searchbar" onkeyup="search_products()" type="text"
name="search" placeholder="Search Products..">
<!-- Product Card -->
<div class="gallery">
<div class="content products">
<img src="shoes.png" class="productcard-image">
<h3>Product 1</h3>
<p3>Test product line</p3>
<h6>£100</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li></li> <i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-1 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
</div>
<div class="content products">
<img src="earphone.png" class="productcard-image">
<h3>Product 2</h3>
<p3>Test product line</p3>
<h6>£40.00</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-2 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
</div>
<div class="content products">
<img src="watch.png" class="productcard-image">
<h3>Product 3</h3>
<p3>Test product line</p2>
<h6>£70</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="false"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li></li><i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-3 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
<script src="products.js"></script>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<!-- Kipplo Footer Logo -->
<a href="index.html">
<img src="img/logo2.png" id="footer__logo" ></a>
</div>
<!-- Creative Commmons Logo -->
<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode">
<img src="img/88x31.png" id="footer__logo"></a>
<p class="website__rights">
Creative Commons - KIPPLO.CO.UK 2022.</p>
</div>
</div>
</section>
</div>
</body>
</html>

I would just wrap it with id or class and set it min-height:100vh;. Its the easiest way, not the cleanest code. Hope it helped!
// JavaScript code
function search_products() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('products');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}
body {
background-color: black;
}
* {
font-family: Verdana;
}
.wrap-nav-and-main {
min-height: 100vh;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.alertcontainer {
display: flex;
flex-direction: column;
height:100vh;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(139, 185, 255);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
#media (max-width: 1000px) {
.content {
width: 46%;
}
}
#media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
.boxed {
box-shadow: 0 0 15px rgb(24, 143, 190);
border-radius: 15px;
text-align:center;
padding: 4%;
margin: 10vh;
font-size:20px;
color:#00ffd5;
}
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
height: auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
#media screen and (max-width: 600px) {
.form1 {
width: 90%;
height: auto;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
/* Scroll bar */
::-webkit-scrollbar {
background: transparent;
width: 7px;
}
::-webkit-scrollbar-thumb {
background: #606060;
border-radius: 100px;
}
/* search bar */
#searchbar{
margin-left: 15%;
padding:15px;
border-radius: 10px;
}
input[type=text] {
width: 30%;
-webkit-transition: width 0.15s ease-in-out;
transition: width 0.15s ease-in-out;
}
/* When the input field gets focus,
change its width to 100% */
input[type=text]:focus {
width: 70%;
}
#list{
font-size: 1.5em;
margin-left: 90px;
}
.products{
display: list-item;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<title>Products</title>
<style>
p1 {
color: whitesmoke;
}
</style>
</head>
<body>
<section class="wrap-nav-and-main">
<!-- Alert Bar -->
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<center><strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center></div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png">
<div>
<li>Home</li>
<li><a class="active" href="products.html">Products</a></li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
<!-- input tag copy this-->
<input id="searchbar" onkeyup="search_products()" type="text"
name="search" placeholder="Search Products..">
<!-- Product Card -->
<div class="gallery">
<div class="content products">
<img src="shoes.png" class="productcard-image">
<h3>Product 1</h3>
<p3>Test product line</p3>
<h6>£100</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li></li> <i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-1 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
</div>
<div class="content products">
<img src="earphone.png" class="productcard-image">
<h3>Product 2</h3>
<p3>Test product line</p3>
<h6>£40.00</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-2 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
</div>
<div class="content products">
<img src="watch.png" class="productcard-image">
<h3>Product 3</h3>
<p3>Test product line</p2>
<h6>£70</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="false"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li></li><i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-3 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
<script src="products.js"></script>
</div>
</div>
</section>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<!-- Kipplo Footer Logo -->
<a href="index.html">
<img src="img/logo2.png" id="footer__logo" ></a>
</div>
<!-- Creative Commmons Logo -->
<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode">
<img src="img/88x31.png" id="footer__logo"></a>
<p class="website__rights">
Creative Commons - KIPPLO.CO.UK 2022.</p>
</div>
</div>
</section>
</div>
</body>
</html>

Issues with using Active class in Bootstrap

Currently, the ‘Active’ class is seen on the FAQ and it creates a misleading impression Example. As of now, the hovering still exists in White. I want to achieve where An active element will be in White and display accordingly when the user clicks Example. I have provided my .html and .css, however, the provided snippet output is inaccurate. Please use your preferred software such as Visual Studio, etc. Thank you.
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
i,
span {
display: inline-block;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active .dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important;
}
.dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3,
#sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar ul li a {
padding: 20px 10px;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul ul a {
padding: 10px !important;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="~/Content/mainCSS.css" />
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
<strong>BS</strong>
</div>
<!-- -->
<ul class="list-unstyled components">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-home"></i>
Home
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-briefcase"></i>
About
</a>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Pages
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-image"></i>
Portfolio
</a>
</li>
<li class="active">
<a href="#">
<i class="fas fa-question"></i>
FAQ
</a>
</li>
<li>
<a href="#">
<i class="fas fa-paper-plane"></i>
Contact
</a>
</li>
</ul>
<!-- -->
</nav>
<!-- Page Content -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<!-- Sidebar 1 -->
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>Minimise Sidebar</span>
</button>
</div>
</nav>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
Update 1
The following result is correct https://ibb.co/phP4c8d, however how do I make it White for the remaining elements? It's something like this https://codepen.io/gearmobile/pen/bByZdG. Correct me if I'm wrong but I believe it requires a JavaScript.

i dont know if i understood your question but i think what you want is this,
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #6d7fcc;
background: #fff;
}

Bootstrap sidebar and page content are merged

I am attempting to use a bootstrap sidebar which on smaller screens becomes horizontal navigation. Everything is working fine except for Page content (which has to be on right side of sidebar) appears on top of sidebar.
JS Fiddle
My code:
.nav-side-menu {
overflow: auto;
font-family:'Montserrat', sans-serif;
font-size: 12px;
font-weight: 200;
background-color: #FFF;
position: fixed;
top: 0px;
width: 250px;
height: 100%;
color: #000;
border-right:solid 1px black;
}
.nav-side-menu .brand {
background-color: #FFF;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.logoimg {
width: 70%;
margin-top: 20px;
background: url('logomedium.png');
background-size: 200px 133px;
height: 133px;
width: 200px;
/* margin-left:auto;
margin-right:auto; */
margin-left:20px;
background-position: center;
margin-bottom: 80px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #eeeeee;
background-color: #eeeeee;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #eeeeee;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
text-align: center;
/*border-left: 3px solid #2e353d; */
padding-bottom: 15px;
padding-top: 15px;
/*border-bottom: 1px solid #23282e;*/
}
.nav-side-menu li a {
text-decoration: none;
font-size:12pt;
color: #000000;
text-transform: uppercase;
vertical-align: middle;
}
.nav-side-menu li a {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li a:focus {
outline: 0;
}
.nav-side-hr {
width: 75%;
border: none;
height: 1px;
/* Set the hr color */
color: #333; /* old IE */
background-color: #333; /* Modern Browsers */
}
.nav-side-menu li:hover {
/*border-left: 3px solid##eeeeee;*/
background-color: #eeeeee;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.logoimg {
margin-top: 10px;
background: url('logohorizontal.png');
background-size: 200px 48px;
height: 48px;
margin-bottom: 10px;
width: 200px;
/* margin-left:auto;
margin-right:auto; */
margin-left: 5px;
background-position: center;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #AF2024;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
border-bottom: 1px solid black;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
<div id="wrapper">
<!-- Sidebar -->
<div class="nav-side-menu">
<div class="brand"><div class="logoimg" />LOGO PLACEHOLDER</div></div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class=""></i> About Us
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed">
<i class=""></i> Services
</li>
<li>
<ul class="sub-menu collapse" id="products">
<li class="active">CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
<li>Tabs & Accordions</li>
<li>Typography</li>
<li>FontAwesome</li>
<li>Slider</li>
<li>Panels</li>
<li>Widgets</li>
<li>Bootstrap Model</li>
</ul>
</li>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<i class=""></i> Contact us
</li>
<li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
</li>
<hr class="nav-side-hr" />
<li data-toggle="collapse" data-target="#new" class="collapsed">
<i class=""></i> RATES
</li>
<li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
</li>
<li>
<a href="#">
<i class=""></i> TRACKING SYSTEM
</a>
</li>
<li>
<a href="#">
<i class=""></i> QUOTE ME
</a>
</li>
<hr class="nav-side-hr" />
<li>
<a href="#">
<i class=""></i> FIND US
</a>
</ul>
</div>
</div>
<!-- End Sidebar -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
</div>
</div>
</div>
</div>
</div>
UPDATE: As suggested added padding to page-wrapper, but when I add text to page content, sidenav links stop working/hovering.
JS FIDDLE https://jsfiddle.net/y3eL6m8v/4/

In the media query you should add a padding-left with the value of the width from the sidenav to the page-content-wrapper class.
#media(min-width:768px) {
#page-content-wrapper {
padding-left: 250px;
position: relative;
}
}
Click here for a jsfiddle

Please add this in your css:
#media (min-width: 768px)
{
#page-content-wrapper
{
padding: 20px 20px 20px 250px;
position: relative;
}
}
Check this fiddle https://jsfiddle.net/y3eL6m8v/2/