Bootstrap 4 navbar layout works using CDN, breaks using downloaded code - html

Navbars load collapsed and improperly formatted using downloaded Bootstrap 4 Alpha code, but appear fine using the Bootstrap 4 Alpha CDN. Using the downloaded code is necessary for this project.
Navbar appearance using downloaded Bootstrap 4 Alpha code:
View image
Navbar appearance using Bootstrap 4 Alpha CDN (the look I want): View image
This is my HTML, it doesn't change:
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">About Us <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Meet the Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log In</a>
</li>
</ul>
</div>
</div>
</nav>
No idea what's wrong or how to fix this. Anyone familiar with this issue? Thanks

From Bootstrap 4 alpha 6 to beta, navbar-toggleable-* changed to navbar-expand-*, so if you're using navbar-expand-* with alpha it wouldn't work.
If you want it to work in alpha 6, it would be:
<nav class="navbar navbar-toggleable-md navbar-light">..</nav>
If you want it to work in beta, it would be:
<nav class="navbar navbar-expand-lg navbar-light">..</nav>

Related

Bootstrap burger menu not worked

I copied the navbar from the bootstrap navbar documentation, but when I click, the hamburger menu does not work for me, it just does not display the nav items for me.
my hamburger menu
My code in bs-navbar.component.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<img src="../../assets/images/logo.png" alt="" width="55" height="60"/>
<a class="navbar-brand fw-bold ms-4" href="#">medochek</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Замовити</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Контакти</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Галерея</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Про мед</a>
</li>
</ul>
<span class="navbar-text">
+380 66-842-45-32
</span>
</div>
</div>
</nav>
I use Angular so I'm imported bootstrap like this: #import "~bootstrap/dist/css/bootstrap.css" in styles.css
You need the following imports in your framework's import style to be imported for the bootstrap navbar button to work and also for all the styles visible completely.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
The compatible versions of the above links you can check & replace for the bootstrap version you are using.
The second option is you can write your own javascript code to add/remove dynamic CSS active class from your navbar menu.

toggle menu button works on index page but not on other pages despite identical code- why?

Spending hours trying to fix issue I am having with toggle menu button. Works perfectly on small screen on index page- but not working on portfolio & contact page. Despite same code & files (jquery & bootstrap files attached in same order). Any suggestions? Here is the website link: https://www.jophilippa.com/
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="portfolio.html"></a><img src="../img/logo.jpg" class="logo" width="200" height="90" alt="Jo Philippa logo"/>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="nav-link" href="../index.html">ABOUT </a> </li>
<li class="nav-item active"> <a class="nav-link" href="portfolio.html">PORTFOLIO <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="contact.html">CONTACT</a> </li>
</ul>
</div>
</nav>
By quick look at your website & source code, you are linking to your jquery files by relative paths, to be more specific i mean this block of code:
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
This works at https://www.jophilippa.com/ (as it loads https://www.jophilippa.com/js/jquery-3.4.1.min.js), but won't work at https://www.jophilippa.com/pages/portfolio.html, because that loads https://www.jophilippa.com/pages/js/jquery-3.4.1.min.js, which obviously doesn't exist).
Put a / in front of the paths, to make them absolute from the root of website:
<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap-4.4.1.js"></script>

Can't get navbar to expand in bootstrap4

how can i get my navbar to expand , i have done everything right , i am using bootstrap4 and jquery source files.
Am i missing something?
Here is my code:
<body>
<nav class="navbar py-3 navbar-light navbar-expand-sm">
first website
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarlink" aria-controls="navbarlink" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarlink">
<ul class="navbar-nav">
<li class="nav-item active">
home
</li>
<li class="nav-item">
skills
</li>
<li class="nav-item">
about
</li>
<li class="nav-item">
projects
</li>
</ul>
</div>
</nav>
<script src="js/jquery-3.5.0.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
The code works when I test it here using the Bootstrap CDN. My guess is there might be an issue with linking the files. also make sure you have linked the Bootstrap CSS file in your code.

Bootstrap 4 navbar not working properly on small screen sizes [duplicate]

This question already has answers here:
bootstrap 4 nav doesn't display hamburger on resize
(2 answers)
Closed 4 years ago.
I'm currently trying to implement a navbar that turns the navbar selections into a dropdown at small screen sizes (as the documentation shows here. However, the button which should toggle the navbar items displaying is not showing up. It is rendered in the html but the button is empty and upon clicking the button which is responsible for collapsing the navbar, nothing displays (no dropdown of options, where id expect a "home" link and a "login/regiser" button)
Navbar markup:
<nav class="navbar navbar-expand-lg primary">
<a class="navbar-brand" href="/">Blazor Finances</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a id="login-register-btn" class="btn btn-primary primary" href="/login">Login/Register</a>
</li>
</ul>
</div>
</nav>
which works fine on large screen sizes, but looks as follows on small devices:
and a screenshot showing the navbar toggling button is rendered but doesn't seem to be displayed and isn't operable:
Add navbar-light or navbar-dark (for a dark background) to your navbar - these classes are responsible to add the hamburger. See demo below:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" />
<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.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-light navbar-expand-lg primary">
<a class="navbar-brand" href="/">Blazor Finances</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a id="login-register-btn" class="btn btn-primary primary" href="/login">Login/Register</a>
</li>
</ul>
</div>
</nav>

Get 'hamburger icon' to float right in nav bar, Bootstrap 4

I've created a nav bar that collapses, based on the browser size. I cannot seem to stop the nav bar from stacking, and the icon goes beneath the nav bar brand when the browser size is reduced. I would like to get it to show on the right side of the nav bar, rather than underneath the brand.
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top navbar-custom" id="mainNav">
<a class="navbar-brand" href="#home">
<img class="logo" src="img/unicornActive.png" onmouseover="hover(this);" onmouseout="unhover(this);" alt="logo">
</a>
<button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" role="navigation">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link active" href="#home" data-toggle="tab">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about" data-toggle="tab">About</a></li>
<li class="nav-item"><a class="nav-link" href="#work" data-toggle="tab">Work</a></li>
<li class="nav-item"><a class="nav-link" href="#technique" data-toggle="tab">Technique</a></li>
<li class="nav-item"><a class="nav-link" href="#contact" data-toggle="tab">Contact</a></li>
</ul>
</div>
</nav>
Any help would be really appreciated! I've tried floating it right and it doesn't seem to work.
Which version of bootstrap and jquery do you use?
I created an instance on jsfiddle with the newest version of the bootstrap framework and I do not get your issue.
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css
https://code.jquery.com/jquery-3.2.1.slim.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js
JSFiddler