Boostrap 4 - Scrollspy issue - html

So, I'm trying to rebuild my website from scratch. And I want to add a scrollspy to the top of my navbar.
I've already tried to add the data-spy="scroll" data-target=".navbar" data-offset="100"to my body tag, and define it in jQuery by using jQuery('body').scrollspy();.
But it's just not working. I looked into DevTools on Chrome, but I can't find any issues in it.
My Navbar
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="navbar">
<a class="navbar-brand" href="/"><img height="45px" src="https://dellusion.app/assets/img/logo/textlogo.png" alt="Dellusion Records"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor" aria-controls="navbarColor" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/#top" data-easing="easeOutQuint">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#latest" data-easing="easeOutQuint">Releases</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#news" data-easing="easeOutQuint">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#artists" data-easing="easeOutQuint">Artists</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#contact" data-easing="easeOutQuint">Contact</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="https://open.spotify.com/user/dellusion_records"><i class="fab fa-lg fa-spotify"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/DellusionRec"><i class="fab fa-lg fa-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.facebook.com/DellusionRecords"><i class="fab fa-lg fa-facebook-f"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.youtube.com/DellusionRecordsOfficial"><i class="fab fa-lg fa-youtube"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.soundcloud.com/dellusion-records"><i class="fab fa-lg fa-soundcloud"></i></a>
</li>
</ul>
</div>
</nav>
My question is how to get this scrollspy working? Because it's a pain in the head for this to be working.
A full example can be found here


I mentioned the places I added in the comment lines.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>STACKOVERFLOW</title>
</head>
<body data-spy="scroll" data-target="#navbar" data-offset="0">
<!-- Added Here -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="navbar">
<a class="navbar-brand" href="/"><img height="45px" src="https://dellusion.app/assets/img/logo/textlogo.png" alt="Dellusion Records"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor" aria-controls="navbarColor" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" href="#top" data-easing="easeOutQuint">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#latest" data-easing="easeOutQuint">Releases</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#news" data-easing="easeOutQuint">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#artists" data-easing="easeOutQuint">Artists</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact" data-easing="easeOutQuint">Contact</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="https://open.spotify.com/user/dellusion_records"><i
class="fab fa-lg fa-spotify"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/DellusionRec"><i class="fab fa-lg fa-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.facebook.com/DellusionRecords"><i
class="fab fa-lg fa-facebook-f"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.youtube.com/DellusionRecordsOfficial"><i
class="fab fa-lg fa-youtube"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.soundcloud.com/dellusion-records"><i
class="fab fa-lg fa-soundcloud"></i></a>
</li>
</ul>
</div>
</nav>
<!-- Created Them for Example -->
<div id="top" style="height: 700px; margin-top: 71px;" class="bg-warning">Home</div>
<div id="latest" style="height: 700px;" class="bg-danger">Releases</div>
<div id="news" style="height: 700px;" class="bg-primary">News</div>
<div id="artists" style="height: 700px;" class="bg-info">Artists</div>
<div id="contact" style="height: 700px;" class="bg-dark text-white">Contact</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- JAVASCRIPT -->
<script>
</script>
</body>
</html>

Related

Bootstrap toggle doesn't work while resizing web

This is the code:
<nav xmlns:sec="http://www.thymeleaf.org/extras/spring-security" class="navbar navbar-expand-lg fixed-top container-fluid" id="navbar">
<div class="container px-4">
<a class="navbar-brand" href="/main"> <img src="https://i.imgur.com/BKHVvT0.png" style="width: 100px; height: auto;"> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li sec:authorize="isAnonymous()" class="nav-item"><a class="nav-link" href="/login">Inicio sesión</a></li>
<li sec:authorize="isAnonymous()" class="nav-item"><a class="nav-link" href="/register">Registro Cliente</a></li>
<li sec:authorize="isAnonymous()" class="nav-item"><a class="nav-link" href="/registrohotel">Registro Hotel</a></li>
<li sec:authorize="hasAuthority('CLIENTE')" class="nav-item"><a class="nav-link" href="/historialReservaClienteVigentes">Tus reservas</a></li>
<li sec:authorize="hasAuthority('CLIENTE')" class="nav-item"><a class="nav-link" href="/perfilcliente">Perfil</a></li>
<li sec:authorize="hasAuthority('CLIENTE')" class="nav-item"><a sec:authorize="isAuthenticated()" class="nav-link" th:href="#{/logout}"> <i class=" fas fa-door-open"></i></a></li>
<li sec:authorize="hasAuthority('HOTEL')" class="nav-item"><a class="nav-link" href="/admin">Administrador</a></li>
<li sec:authorize="hasAuthority('HOTEL')" class="nav-item"><a class="nav-link" href="/perfilhotel">Perfil</a></li>
<li sec:authorize="hasAuthority('HOTEL')" class="nav-item"><a sec:authorize="isAuthenticated()" class="nav-link" th:href="#{/logout}"> <i class=" fas fa-door-open"></i></a></li>
</ul>
</div>
</div>
Thing is that it does appear on screen, however when interacting it does nothing. The toggler bottom does appear, but when clicking, it doesn't make the nav items appear on it.

It works if you add bootstrap cdns: both the script and the css. See the code snippet below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<nav xmlns:sec="http://www.thymeleaf.org/extras/spring-security" class="navbar navbar-expand-lg fixed-top container-fluid" id="navbar">
<div class="container px-4">
<a class="navbar-brand" href="/main"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1x67c2BlI-XYmmi_J78A5Lla6ztswREYwUF2wuHuF_UpOVlEjDeVgbMcU7idPQiJJLfE&usqp=CAU" style="width: 100px; height: auto;"> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li sec:authorize="isAnonymous()" class="nav-item"><a class="nav-link" href="/login">Inicio sesión</a></li>
<li sec:authorize="isAnonymous()" class="nav-item"><a class="nav-link" href="/register">Registro Cliente</a></li>
<li sec:authorize="isAnonymous()" class="nav-item"><a class="nav-link" href="/registrohotel">Registro Hotel</a></li>
<li sec:authorize="hasAuthority('CLIENTE')" class="nav-item"><a class="nav-link" href="/historialReservaClienteVigentes">Tus reservas</a></li>
<li sec:authorize="hasAuthority('CLIENTE')" class="nav-item"><a class="nav-link" href="/perfilcliente">Perfil</a></li>
<li sec:authorize="hasAuthority('CLIENTE')" class="nav-item"><a sec:authorize="isAuthenticated()" class="nav-link" th:href="#{/logout}"> <i class=" fas fa-door-open"></i></a></li>
<li sec:authorize="hasAuthority('HOTEL')" class="nav-item"><a class="nav-link" href="/admin">Administrador</a></li>
<li sec:authorize="hasAuthority('HOTEL')" class="nav-item"><a class="nav-link" href="/perfilhotel">Perfil</a></li>
<li sec:authorize="hasAuthority('HOTEL')" class="nav-item"><a sec:authorize="isAuthenticated()" class="nav-link" th:href="#{/logout}"> <i class=" fas fa-door-open"></i></a></li>
</ul>
</div>
</div>
</body>
</html>

Bootstrap 4 Hamburger Menu Not Showing Navbar

This is for my mobile sized site. When I click the hamburger menu, the Navbar does not appear. My data-target matches the nav id so I'm not sure why it isn't working.
<section id="nav">
<nav class="navbar navbar-light navbar-expand-md py-2">
<a href="index.html">
<img src="./img/logo.png" class="img-fluid mw-121 height: auto" alt="Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarLinks"><span
class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarLinks">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flavors.html">Flavors</a>
</li>
<li class="nav-item">
<a class="nav-link" href="details.html">What's Included</a>
</li>
<li class="nav-item">
<a class="nav-link" href="reserve.html">Reserve Today</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
</ul>
</div>
</nav>
</section>

I've used your code to replicate the problem but it's working fine. Check my code below you might be missing one of the dependencies.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<section id="nav">
<nav class="navbar navbar-light navbar-expand-md py-2">
<a href="index.html">
<p>Test Image here</p>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarLinks"><span
class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarLinks">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flavors.html">Flavors</a>
</li>
<li class="nav-item">
<a class="nav-link" href="details.html">What's Included</a>
</li>
<li class="nav-item">
<a class="nav-link" href="reserve.html">Reserve Today</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
</ul>
</div>
</nav>
</section>
</body>
</html>

Bootstrap 4 align Logo to the left, Center Menu and top links on the right

I am currently having trouble creating 2 rows and getting align logo(heading) to the left, 'Home' and 'User' menu links to the top right corner. The second row should display 'Link1', 'Link2', 'Link3' menu in the center. The following code doesn't seem to align properly.
I have tried to use 'navbar-nav mr-auto' for logo but it didn't work. Also tried 'Home', 'About' links 'ml-auto'. It doesn't work.
*******************************************************************************************
Home About User
Logo Heading1
Link1 Link2 Link3 Link4
*******************************************************************************************
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand mr-auto" href="">
<img style="width: 72px; height: 71px;" src="logo-1.png">Heading
</a>
<div class="d-flex flex-column flex-wrap" id="navbarCollapse">
<ul class="navbar-nav mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="ace.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="User.aspx" >User</a>
</li>
</ul>
<div id="divSubMenu" runat="server" >
<ul class="navbar-nav mx-auto mt-auto">
<li class="nav-item active" id="liDashboard" runat="server">
<a class="nav-link" href="Dashboard.aspx">Link1</a>
</li>
<li class="nav-item" id="liaint" runat="server">
<a class="nav-link" href="ation.aspx">Link2</a>
</li>
<li class="nav-item" id="liign" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item" id="lise" runat="server">
<a class="nav-link" href="Search.aspx">Link4</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

Try this code. hope will help You.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto text-md-center mt-5">
<li class="nav-item active" id="liDashboard" runat="server">
<a class="nav-link" href="Dashboard.aspx">Link1</a>
</li>
<li class="nav-item" id="liaint" runat="server">
<a class="nav-link" href="ation.aspx">Link2</a>
</li>
<li class="nav-item" id="liign" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item" id="lise" runat="server">
<a class="nav-link" href="Search.aspx">Link4</a>
</li>
</ul>
<div class="nav-item flex-row justify-content-md-center justify-content-start flex-nowrap">
<ul class="navbar-nav mb-5">
<li class="nav-item">
<a class="nav-link" href="ace.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="User.aspx" >User</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

Hope below code will help you
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Logo Heading1</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto">
<li class="nav-item active" id="liDashboard" runat="server">
<a class="nav-link" href="Dashboard.aspx">Link1</a>
</li>
<li class="nav-item" id="liaint" runat="server">
<a class="nav-link" href="ation.aspx">Link2</a>
</li>
<li class="nav-item" id="liign" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item" id="lise" runat="server">
<a class="nav-link" href="Search.aspx">Link4</a>
</li>
</ul>
<div class="nav-item">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="ace.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="User.aspx" >User</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
If u want out put like you have provided text above logo above middle on below
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light align-items-start">
<a class="navbar-brand" href="#">Logo Heading1</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto mt-5">
<li class="nav-item active" id="liDashboard" runat="server">
<a class="nav-link" href="Dashboard.aspx">Link1</a>
</li>
<li class="nav-item" id="liaint" runat="server">
<a class="nav-link" href="ation.aspx">Link2</a>
</li>
<li class="nav-item" id="liign" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item" id="lise" runat="server">
<a class="nav-link" href="Search.aspx">Link4</a>
</li>
</ul>
<div class="nav-item">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="ace.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="User.aspx" >User</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>

You can try stacking multiple navbars in bootstrap 4 as shown below. Please see if this answer is acceptable for you requirements. Hope this helps!
EDIT: Updated my code to only have two rows as requested in the question. Good luck champ..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Stack Answer</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark py-0">
<div class="container">
<div class="collapse navbar-collapse" id="navbarResponsive1">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">User</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark pt-0">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item">
<a class="navbar-brand" href="#">
<img style="width: 72px; height: 71px;" src="http://placehold.it/72x71?text=Logo">
Stack Answer
</a>
</li>
</ul>
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link4</a>
</li>
</ul>
</div>
</nav>
<!-- Page Content -->
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
</body>
</html>

Why won't the navbar collapse/expand when I click the icon?

I'm using bootstrap for my navbar to have a list of links collapse and grow when clicking on the icon, but I can't seem to get it to work. I think I have all of the ids matching but something must be a miss.
<nav class="navbar navbar-expand-lg bg-dark navbar-dark d-flex" style="background-color:#7E0B2A !important;">
<!-- Logo -->
<a>
<img src="images/scc1logo3.jpg" class="d-none d-lg-block" style="max-height:80px; max-width:80px;">
</a>
<div class="d-lg-none d-block" style="color:white; font-size: 1.3rem;">
Company Name
</div>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse align-items-left justify-content-between" id="collapsibleNavbar">
<ul class="navbar-nav text-left d-flex justify-content-center">
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;" href="index.html">Home</a>
</li>
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;" href="about.html">About SCC</a>
</li>
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;" href="Project.html">Projects</a>
</li>
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;" href="Collaborators.html">Collaborators</a>
</li>
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;">Calender</a>
</li>
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;">Contact Us</a>
</li>
<li class="nav-item pl-lg-1 d-block d-lg-none">
<a class="nav-link" style="color:white;">Donate</a>
</li>
</ul>
<div class="d-lg-block d-none">
<a class="nav-link" style="color:white;">Donate</a>
</div>
</div>
</nav>

I am not sure what is the problem? Are you including bootstrap libraries?
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark d-flex" style="background-color:#7E0B2A !important;">
<!-- Logo -->
<a>
<img src="images/scc1logo3.jpg" class="d-none d-lg-block" style="max-height:80px; max-width:80px;">
</a>
<div class="d-lg-none d-block" style="color:white; font-size: 1.3rem;">
Company Name
</div>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse align-items-left justify-content-between" id="collapsibleNavbar">
<ul class="navbar-nav text-left d-flex justify-content-center">
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;" href="index.html">Home</a>
</li>
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;" href="about.html">About SCC</a>
</li>
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;" href="Project.html">Projects</a>
</li>
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;" href="Collaborators.html">Collaborators</a>
</li>
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;">Calender</a>
</li>
<li class="nav-item pl-lg-1">
<a class="nav-link" style="color:white;">Contact Us</a>
</li>
<li class="nav-item pl-lg-1 d-block d-lg-none">
<a class="nav-link" style="color:white;">Donate</a>
</li>
</ul>
<div class="d-lg-block d-none">
<a class="nav-link" style="color:white;">Donate</a>
</div>
</div>
</nav>
</body>

How do I put hamburger icon on next line?

I have a line of menu tabs below which there is a line of breadcrumbs. When the screen collapses the line of menu tabs is replaced by the hamburger icon on the right, which is correct. However, in bootstrap 4.0.0 alpha 6 the hamburger icon dropped down onto the line of breadcrumbs but in version 4.1.3 it stays on its own line. Is there any way in 4.1.3 that I can force the previous behaviour? Displaying 2 lines instead of 1 is a waste of space, and on a small screen this is annoying. Here is a code snippet:
<!DOCTYPE html>
<html xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Put hamburger icon onto breadcrumb line</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>Put hamburger icon onto breadcrumb line</h1>
<nav class="navbar navbar-expand-md navbar-light">
<span class="navbar-brand"></span>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav nav-tabs mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Tab #1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #8</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #9</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #10</a>
</li>
</ul>
</div>
</nav>
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">Crumb #1</a>
<span class="breadcrumb-item active">Crumb #2</span>
<span class="breadcrumb-item active">Crumb #3</span>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>
</body>
</html>

Does this suit your needs?
#media (max-width: 767px) {
.navbar .navbar-toggler {
position: absolute;
right: 5px;
bottom: -44px;
}
.breadcrumb {
padding-right: 66px !important;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid">
<h1>Put hamburger icon onto breadcrumb line</h1>
<nav class="navbar navbar-expand-md navbar-light">
<span class="navbar-brand"></span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav nav-tabs mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Tab #1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #8</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #9</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab #10</a>
</li>
</ul>
</div>
</nav>
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">Crumb #1</a>
<span class="breadcrumb-item active">Crumb #2</span>
<span class="breadcrumb-item active">Crumb #3</span>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">
</script>