Change logo colour on scroll - html

I have tried to implement the following solution but have doing so seems to break my website. The logo I have for the website is the same color as the navbar background, so I am trying to switch to a black logo once the navbar shows up. However the website hangs on the spinner loader and fails to load in when the code block is active. Commenting out the code fixes this and the website behaves normally. Any ideas what I am missing here? Here is the relevant code:
// Javascript
// jQuery to collapse the navbar on scroll
$(window).on('scroll load', function() {
if ($(".navbar").offset().top > 20) {
$(".fixed-top").addClass("top-nav-collapse");
//$("img.logo-image").attr('src', "images/master_logo_black.svg"​);
} else {
$(".fixed-top").removeClass("top-nav-collapse");
//$("img.logo-image").attr('src', "images/master_logo_gold.svg"​)
}
});
//jQuery to change to logo colour THIS IS THE ISSUE
$(document).ready(function() {
$(window).on("scroll", function () {
if($(this).scrollTop() > 20){
$(".logo-image img").attr("src", "images/master_logo_black.svg"​);
} else {
$(".logo-image img").attr("src", "images/master_logo_gold.svg"​);
}
})
});
.navbar-custom {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
background-color: #FFBF00;
box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1);
font: 600 0.875rem/0.875rem "Open Sans", sans-serif;
transition: all 0.2s;
}
.navbar-custom .navbar-brand {
font-size: 0;
}
.navbar-custom .navbar-brand.logo-image img {
width: 20rem;
height: 5rem;
-webkit-backface-visibility: hidden;
}
.navbar-custom.top-nav-collapse {
padding: 0.375rem 1.5rem 0.375rem 2rem;
box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1);
background-color: #FFBF00;
}
.navbar-custom.top-nav-collapse .navbar-brand.logo-image img {
fill: rgba(0, 0, 0, 1)
}
<body data-spy="scroll" data-target=".fixed-top">
<!-- Preloader -->
<div class="spinner-wrapper">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<!-- end of preloader -->
<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-dark navbar-custom fixed-top">
<!-- Text Logo - Use this if you don't have a graphic logo -->
<!-- <a class="navbar-brand logo-text page-scroll" href="index.html">redacted</a> -->
<!-- Image Logo -->
<a class="navbar-brand logo-image" href="index.html"><img class="logo-image" src="images/master_logo_gold.svg" alt="alternative"></a>
<!-- Mobile Menu Toggle Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-awesome fas fa-bars"></span>
<span class="navbar-toggler-awesome fas fa-times"></span>
</button>
<!-- end of mobile menu toggle button -->
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link page-scroll" href="#header">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#research">RESEARCH</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#experience">EXPERIENCE</a>
</li>
<li class="nav-item">
<a class="nav-link page scroll" href="blog.html">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#contact">CONTACT</a>
</li>
</ul>
<span class="nav-item social-icons">
<span class="fa-stack">
<a href="https://www.linkedin.com/in/redacted/">
<span class="hexagon"></span>
<i class="fab fa-linkedin-in fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="https://github.com/redacted">
<span class="hexagon"></span>
<i class="fab fa-github fa-stack-1x"></i>
</a>
</span>
</span>
</div>
</nav>
<!-- end of navbar -->
<!-- end of navbar -->

Seems to work as shown below. Try changing the image src on scroll as shown in the example.
// Javascript
// jQuery to collapse the navbar on scroll
const $window = $(window);
$window.on('scroll', function() {
let scroll = $window.scrollTop();
if (scroll > 20) {
$(".fixed-top").addClass("top-nav-collapse");
//$("img.logo-image").attr('src', "images/master_logo_black.svg");
} else {
$(".fixed-top").removeClass("top-nav-collapse");
//$("img.logo-image").attr('src', "images/master_logo_gold.svg")
}
});
.navbar-custom {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
background-color: #FFBF00;
box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1);
font: 600 0.875rem/0.875rem "Open Sans", sans-serif;
transition: all 0.2s;
}
.fixed-top {
position: fixed;
top: 0;
left :0;
width: 100%;
}
.navbar-custom.top-nav-collapse {
padding: 0.375rem 1.5rem 0.375rem 2rem;
box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1);
background-color: red;
}
.logo-img {
width: 50px;
height: 20px;
background: red;
}
.top-nav-collapse .logo-img {
background: green;
}
.nav-item {
display: inline-block;
margin: .2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-dark navbar-custom fixed-top">
<!-- Text Logo - Use this if you don't have a graphic logo -->
<!-- <a class="navbar-brand logo-text page-scroll" href="index.html">redacted</a> -->
<!-- Image Logo -->
<a class="navbar-brand logo-image" href="index.html">
<div class="logo-img"></div>
</a>
<!-- end of mobile menu toggle button -->
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link page-scroll" href="#header">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#research">RESEARCH</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#experience">EXPERIENCE</a>
</li>
<li class="nav-item">
<a class="nav-link page scroll" href="blog.html">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#contact">CONTACT</a>
</li>
</ul>
<span class="nav-item social-icons">
<span class="fa-stack">
<a href="https://www.linkedin.com/in/redacted/">
<span class="hexagon"></span>
<i class="fab fa-linkedin-in fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="https://github.com/redacted">
<span class="hexagon"></span>
<i class="fab fa-github fa-stack-1x"></i>
</a>
</span>
</span>
</div>
</nav>
<!-- end of navbar -->
<!-- end of navbar -->
<div style="height:10000px"></div>

Related

Controlling height of pre container in bootstrap

I have an app using Bootstrap 5.0 laid out as in the dashboard example. In the main content column, I have a heading followed by a set of tabs. Each tab contains a block of preformatted text in a pre tag. The preformatted text can be both wide and tall, so scroll bars are needed in both directions. I have set up a codepen to demonstrate the issue.
By default, the pre element is the full height of the content and the vertical scroll bar is attached to the page instead of the pre element. This means that in order to access the hortizontal scroll bar, users have to scroll the page down to the very bottom so they lose track of what they were looking at when they needed to scroll horizontally.
What I really want is to limit the height of the pre block to the vertical space available on the page so that both the vertical and horizontal scroll bars are attached to the pre element itself. I have managed to almost achieve what I want by setting the max-height of the pre as follows:
.scrollable-pre {
max-height: calc(100vh - 16em);
}
However, this is brittle because if add anything to the heading that increases its height, the hard coded 16em will have to be adjusted.
How do I get the pre to automatically size to the available height?
body {
font-size: .875rem;
}
.feather {
width: 16px;
height: 16px;
vertical-align: text-bottom;
}
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0;
/* rtl:raw:
right: 0;
*/
bottom: 0;
/* rtl:remove */
left: 0;
z-index: 100;
/* Behind the navbar */
padding: 48px 0 0;
/* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
#media (max-width: 767.98px) {
.sidebar {
top: 5rem;
}
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto;
/* Scrollable contents if viewport is shorter than content. */
}
.sidebar .nav-link {
font-weight: 500;
color: #333;
}
.sidebar .nav-link .feather {
margin-right: 4px;
color: #727272;
}
.sidebar .nav-link.active {
color: #2470dc;
}
.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: inherit;
}
.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}
/*
* Navbar
*/
.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
background-color: rgba(0, 0, 0, .25);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}
.navbar .navbar-toggler {
top: .25rem;
right: 1rem;
}
.navbar .form-control {
padding: .75rem 1rem;
border-width: 0;
border-radius: 0;
}
.form-control-dark {
color: #fff;
background-color: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .1);
}
.form-control-dark:focus {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
.pre-container {}
.scrollable-pre {
max-height: calc(100vh - 16em);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<div class="navbar-nav">
<div class="nav-item text-nowrap">
<a class="nav-link px-3" href="#">Sign out</a>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<span data-feather="home"></span> Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span> Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span> Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span> Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span> Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span> Integrations
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Saved reports</span>
<a class="link-secondary" href="#" aria-label="Add a new report">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span> Current month
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span> Last quarter
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span> Social engagement
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span> Year-end sale
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
<button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
<span data-feather="calendar"></span>
This week
</button>
</div>
</div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="pre-container">
<pre class="scrollable-pre">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
</pre>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

How do I stop my dropdown menu from jumping left to right?

I'm using bootstrap's responsive navbar, in mobile devices it displays a dropdown menu. This menu, be default, is aligned to the left. I changed this so that is displays to the right. I did achieve this. However, when I test on my iPhone (XR), the dropdown first shows on the left and quickly moves to the right, on its own. How can I stop this?
You can see a small video of what's happening here.
/* Navbar */
.navbar-light .navbar-toggler {
color:rgba(46, 46, 46, 1);
border-color: transparent;
}
.navbar-custom {
background-color: #ffffff;
}
.navbar-custom .navbar-brand img {
width: 75%;
}
.navbar-light .navbar-nav .nav-link {
color: rgba(46, 46, 46, 1);
font-size: 0.9em;
text-transform: capitalize;
font-weight: 600;
border-radius: 0;
}
.navbar-light .navbar-nav .nav-link:hover {
color: #DA3D0D;
text-decoration: none;
}
.navbar-custom-dropdown {
border-radius: 0;
}
.navbar-custom-dropdown li a {
font-weight: 600;
line-height: 2em;
font-size: 0.9em;
}
.navbar-custom-dropdown li a:hover,
.navbar-custom-dropdown li a:focus {
background-color: #ffffff;
color: #DA3D0D;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-light navbar-custom">
<a class="navbar-brand" href="index.html">
<img src="images/logo-briones-monolithic.svg" alt="Briones Monolithic">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-custom-link" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">INICIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PROYECTOS</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
GRUPO MONOLITHIC
</a>
<ul class="dropdown-menu navbar-custom-dropdown" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">BRIONES MONOLITHIC</a></li>
<li><a class="dropdown-item" href="#">BE MONOLITHIC</a></li>
<li><a class="dropdown-item" href="#">ELECTRIC MONOLITHIC</a></li>
<li><a class="dropdown-item" href="#">GRUPO MONOLITHIC</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACTO</a>
</li>
</ul>
</div>
</nav>
<!-- /NAVBAR -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

container-fluid doesn't take full width except for navbar

.container-fluid-1 {
padding: 0;
}
.navbar {
padding: 0 5%;
}
.navbar-section{
background-color: #fff;
width: 100%;
padding: 0 1%;
margin: 0;
position: fixed;
z-index: 1;
}
.nav-item {
padding: 0 20px;
}
.nav-link {
color: black;
}
.nav-link:focus {
color: black;
}
.nav-link:hover {
color: #feb633;
}
.navbar-brand {
font-size: 3.5rem;
font-family: 'Hind Siliguri', sans-serif;
color: #feb633;
}
.navbar-brand:hover {
color: grey;
}
/* title */
.introduction {
background-color: #fbfbfb;
padding-top: 10%;
}
.subtitle {
font-size: 1.5rem;
color: grey;
}
.twotitle {
padding-top: 220px;
padding-left: 200px;
}
.btn {
background: #feb633;
color: #fff;
}
.btn:hover {
border: 2px solid #feb633;
transition: 0.2s ease-in all;
color: #feb633;
background-color: #fbfbfb;
}
I put a container-fluid class in my whole body but it doesn't provides a full width container except for navbar.
Everything looks fine on PC (1440px) but on mobile the whole body (except for navbar)moving to left side.
Here is the screenshot on laptop that's what I want.
Here is the screenshot on iPhoneX The grey background is on the left now.
Could someone please help me with it? Thanks in advance.
*container-fluid-1 is a class for CSS.
<body>
<!--navbar -->
<div class="container-fluid-1 container-fluid">
<section id="title">
<div class="navbar-section">
<nav class="navbar navbar-expand-lg">
<a class=" navbar-brand" href="#">M</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#title">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about-me">About me</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Service</a></li>
<li class="nav-item"><a class="nav-link" href="#mini-shop">Mini Shop</a></li>
<li class="nav-item"> <a class="nav-link" href="#contact-me">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#">Log in</a></li>
</ul>
</div>
</nav>
</div>
<!--title -->
<div class="introduction row">
<div class="twotitle col-lg-6">
<h1>I'm Marcus</h1>
<p class="subtitle">Web Design& Front End Developer</p>
<br>
Hire me
</div>
<div class="profile col-lg-6">
<img src="images/fa0b3895-7e4e-4ac9-a977-1a99fdefc4dd.png" alt="profile">
</div>
</div>
</section>
</div>
</body>
<body>
<!--navbar -->
<div class="container-fluid-1 container-fluid">
<section id="title">
<div class="navbar-section">
<nav class="navbar navbar-expand-lg">
<a class=" navbar-brand" href="#">M</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#title">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about-me">About me</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Service</a></li>
<li class="nav-item"><a class="nav-link" href="#mini-shop">Mini Shop</a></li>
<li class="nav-item"> <a class="nav-link" href="#contact-me">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#">Log in</a></li>
</ul>
</div>
</nav>
</div>
<!--title -->
<div class="introduction row">
<!--use mobile responsive classes here for full width use col-xs-12 col-sm-12 col-md-12 -->
<div class="twotitle col-lg-6 col-md-12 col-sm-12 col-xs-12">
<h1>I'm Marcus</h1>
<p class="subtitle">Web Design& Front End Developer</p>
<br>
Hire me
</div>
<div class="profile col-lg-6 col-md-12 col-sm-12 col-xs-12">
<img src="images/fa0b3895-7e4e-4ac9-a977-1a99fdefc4dd.png" alt="profile">
</div>
</div>
</section>
</div>
</body>
<!-- begin snippet: js hide: false console: true babel: false -->

How do I link my navigation to the toggle?

Coded a webpage as practice using some JS, everything works how I'd like except I can't figure out how to make the toggle functional. I tried a few things but it didn't work out. The page collapses, the toggle appears, but when you click on it the nav does not pop up.
Tips and suggestions would be great, thanks for your time and patience!
Link to all code on codepen here
snippet of html below
<nav class="navbar navbar-expand-lg px-4" style="font-size:25px;">
<a class="navbar-brand"></a>
<button class="navbar-toggler" data-toggle="collapse" href="myNav" role="button" type="button" >
<span class="toggler-icon"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="myNav">
<ul class="navbar-nav mx-auto text-capitalize">
<li class="nav-item active">
<a class="nav-link" style="font-size:35px;" href="#">home</a>
</li>
<li class="nav-item">
<a class="nav-link " style="font-size:35px;" href="#about">about</a>
</li>
<li class="nav-item">
<a class="nav-link" style="font-size:35px;" href="#store">store</a>
</li>
</ul>
<div class="nav-info-items d-none d-lg-flex ">
<div class="nav-info align-items-center d-flex justify-content-between mx-lg-5">
<span class="info-icon mx-lg-3"><i class="fas fa-phone"></i></span>
<p class="mb-0">+ 123 456 789</p>
</div>
<div id="cart-info" class="nav-info align-items-center cart-info d-flex justify-content-between mx-lg-5">
<span class="cart-info__icon mr-lg-3"><i class="fas fa-shopping-cart"></i></span>
<p class="mb-0 text-capitalize"><span id="item-count">2 </span> items - $<span class="item-total">10.49</span></p>
</div>
</div>
</div>
</nav>
snippet of css below
.navbar-toggler {
outline: none !important;
}
.toggler-icon {
font-size: 2.5rem;
color: var(--mainBlue);
}
.nav-link {
color: var(--mainBlue);
font-size: 1.5rem;
transition: all 0.5s ease-in-out;
}
.nav-link:hover {
color: var(--mainYellow);
}
.cart-info__icon {
color: var(--mainBlue);
cursor: pointer;
}
I think you want Element.classList.
var toggle = document.querySelector('.toggle');
var nav = document.querySelector('.nav');
toggle.onclick = function() {
nav.classList.toggle('collapsed');
}
.nav {
background: lightblue;
transition: .2s;
}
.nav.collapsed {
opacity: 0;
}
<button class="toggle">Toggle</button>
<div class="nav">
<ul>
<li>
home
</li>
<li>
about
</li>
<li>
store
</li>
</ul>
</div>

Cannot make Bootstrap navbar transparent

I have been trying to make my navbar transparent but so far nothing has worked for me. Can someone teach me how to do it? I assume it has something to do with the space that it is taking up in regards to the body content, but I am not sure what can be done as I have already tried reversing the div tags to be outside of the body.
This is my desired result :
Fiddle : https://jsfiddle.net/zr1qh780/
My HTML :
<body>
<div id="container">
<!-- Navigation menu -->
<header>
<nav class="my-nav navbar navbar-light navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="index.html" id="dropdown08" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">ACTIVITÉS</a>
<div class="dropdown-menu" aria-labelledby="dropdown08">
<a class="dropdown-item" href="rafting.html">Rafting</a>
<a class="dropdown-item" href="canyoning.html">Canyoning</a>
<a class="dropdown-item" href="saut-parachute.html">Saut en parachute</a>
<a class="dropdown-item" href="soufflerie.html">Simulation de chute libre</a>
<a class="dropdown-item" href="saut-elastique.html">Saut à l’élastique</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OFFRES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ÉVÉNEMENTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">À PROPOS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ESPACE HANDICAP</a>
</li>
<li class="nav-item">
<a class="nav-link contact" href="contact.html">CONTACT</a>
</li>
</ul>
</div>
<div class="hamburger">
<span style="font-size:30px;cursor:pointer;color: white;" onclick="openNav()">☰</span>
</div>
</nav>
</header>
<div id="myNav" class="overlay">
×
<div class="bar overlay-content">
ACTIVITÉS
OFFRES
ÉVÉNEMENTS
À PROPOS
ESPACE HANDICAP
CONTACT
</div>
</div>
My CSS:
.logo {
margin-right:5px;
}
.my-nav{
display: flex;
align-items: center;
justify-content: space-around;
padding: 8px;
}
.navbar-light .navbar-nav .nav-link {
color: white;
}
.navbar-nav > li {
padding-left:25px;
padding-right:45px;
float:none;
display:table-cell;
text-align:center;
font-size: 15px;
font-weight: 500;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
color: #fc3218;
}
.nav-link:active {
color: #fc3218;
}
.navbar {
background: grey
}
.dropdown-menu {
color: white;
background-color: #fc3218;
}
.dropdown-item {
color: white;
font-size: 14px;
}
.navbar-collapse {
flex-grow: 0.3;
}
Have you tried something like this?
navbar{
background-color: transparent;
}
If that doesn't work, add !important to break the predefined bootstrap styles
Set the opacity of the container for nav bar to 0.
Note: Place the elements of nav bar in different div otherwise the text in nav bar will also get effected.