Bootstrap toggle doesn't work while resizing web - html

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>

Related

bootstrap 4 nav bar not covering full width when dropdown

This is what my code looks like for the nav bar, when I press the dropdown button, this is how it will look like on my page
https://docs.google.com/document/d/1gHsqAZ9QTaJX4A-1PXrVVoXi2KWBWqa6YTA_-QtG8wo/edit?usp=sharing
<nav class="navbar navbar-expand-lg navbar-dark bg-color mb-3">
<a class="navbar-brand" href="/"><img src="/img/logo.png" alt="" width="100px" height="40px">RYCE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">OUR CARS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SHOP PARTS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">TEST DRIVE</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SERVICING</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SUPPORT</a>
</li>
<li class="nav-item dropdown">
STAFF
<div class="dropdown-menu">
Users Management
Bookings Management
Products Management
Orders Management
</div>
</li>
<li class="nav-item">
<a class="nav-link text-white" href=""><i style='font-size:24px' class='fas'></i></a>
</li>
<li class="nav-item dropdown">
<i class="material-icons"></i>
<div class="dropdown-menu">
LOGIN
SIGN UP
PROFILE
</div>
</li>
</ul>
</div>
</nav>
I have tried changing the width of the navbar and some of the bootstrap properties but none of my attempts have worked so far. I am unsure if the problem lies with the navbar or dropdown menu.
Thank you so much for all your inputs!

You can add .dropdown-menu-right to .dropdown-menu to align the dropdown to the right when it is shown -- this way it stops it from increasing the width of the page. Is this what you wanted?
Otherwise consider using Bootstrap collapse, I can change my example if you want!
body { height: 100vh }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="bg-dark h-100">
<nav class="navbar navbar-expand-lg navbar-dark bg-danger bg-color mb-3">
<a class="navbar-brand" href="/"><img src="/img/logo.png" alt="" width="100px" height="40px"> RYCE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">OUR CARS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SHOP PARTS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">TEST DRIVE</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SERVICING</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SUPPORT</a>
</li>
<li class="nav-item dropdown">
STAFF
<div class="dropdown-menu dropdown-menu-right">
Users Management
Bookings Management
Products Management
Orders Management
</div>
</li>
<li class="nav-item">
<a class="nav-link text-white" href=""><i style='font-size:24px' class='fas'></i></a>
</li>
<li class="nav-item dropdown">
<i class="material-icons"></i>
<div class="dropdown-menu dropdown-menu-right">
LOGIN
SIGN UP
PROFILE
</div>
</li>
</ul>
</div>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

Boostrap 4 - Scrollspy issue

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>

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>

Codeigniter 3.1 - Bootstrap 4 navbar won't collapse

I am using this code inside CodeIgniter 3.1.6 + Bootstrap 4.0 - beta 2 and the navbar when it collapses is no longer navigable; clicking the button does not happen anything. The same code tried on bootply instead works correctly, can someone explain me why?
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container">
{url type="anchor" url="" text=$header.site_title|escape:"html":"UTF-8" attr="class='navbar-brand'"}
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
{if $current_user.user_role eq 'Admin'}
<li class="nav-item">
<a class="nav-link" href="/index.php">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/admin">Admin</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/inbox">Inbox{if $count_unread_messages gt 0} {$count_unread_messages}{/if}</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/account">Account</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/logout">Logout</a></li>
{elseif $current_user.user_role eq 'Buyer'}
<li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/inbox">Inbox{if $count_unread_messages gt 0} {$count_unread_messages}{/if}</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/account">Account</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/logout">Logout</a></li>
{elseif $current_user.user_role == 'Vendor'}
<li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/inbox">Inbox{if $count_unread_messages gt 0} {$count_unread_messages}{/if}</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/account">Account</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/logout">Logout</a></li>
{elseif $current_user.user_role == 'half'}
{if $allow_guests eq TRUE}
<li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
{/if}
<li class="nav-item"><a class="nav-link">Logout</a></li>
{else}
{if $allow_guests eq TRUE}
<li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
{/if}
<li class="nav-item"><a class="nav-link" href="/index.php/login">Login</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/register">Register</a></li>
{/if}
</ul>
</div>
</div>
Here is the link to the bootply: https://www.bootply.com/cl3LVVqW5y
Executing the code and scaling/zooming the window the menu remains clickable
HTML Generated
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container">
<a href="/index.php" class='navbar-brand'>Brand</a>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/login">Login</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/register">Register</a></li>
</ul>
</div>
</div>

First you should know that CodeIgniter cannot change the way your HTML behaves after it's generated. A modern browser should display the generated HTML just fine.
I used the Bootstrap 4 starter template: https://getbootstrap.com/docs/4.0/getting-started/introduction/#starter-template
The code you posted (and the generated HTML) is missing a closing nav tag. Even without the closing nav tag, your code works when inserted into the starter template. This may mean that the source of the error is in your template, or code that you're not showing us.
Since you are using .navbar-expand-sm , the navbar switches to small device mode at 576px. I am not experiencing any problems when I view the following code in my browser:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Stack Overflow Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container">
<a href="/index.php" class='navbar-brand'>Brand</a>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/login">Login</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/register">Register</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
If you run this in your browser, and if you are still having problems, perhaps your browser doesn't support the newer features of bootstrap 4. I know this isn't really a good answer, but was trying to help you figure your problem out.

Fixed, missing popper.js in header!