I have searched this problem in multiple threads here on SO and it is a real head-scratcher as to why this isn't working. The below example (which is from a SO thread on this issue) works when it is in jsFiddler, but doesn't work when I serve it from my local machine.
So, I literally copy-pasted the code from jsFiddler to my own file and loaded that file in the same browser that rendered it correctly in the fiddler preview window.
I have tried adding the !doctype html tag and I have tried it with and without head tags around the title/link rel sections, with no change. The navbar is rendered with the brand name and globe on the left, then "link 1 link 2 link3", then a gap, then sign in/register/log out renders on the right side of the navbar. I have also tried serving this as a django page from the dev server and I have tried putting it in a flat HTML file and drag-dropping it from the filesystem. I have also tried several very similar examples from SO with the same basic result.
Here is the page on my server:
http://www.walesdata.com/test.html
Here is a screen shot of how it is rendering for me:
http://www.walesdata.com/Screen.png
I like the look and function of this when I see the working example, but I have not gotten it to work locally.
<!DOCTYPE html>
<html lang="en">
<title>
Site title
</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
<i class="fa fa-globe" aria-hidden="true"></i> Brand Name
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-angle-double-down"></i>
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">Link 1</li>
<li class="nav-item">Link 2</li>
<li class="nav-item">Link 3</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">Sign In</li>
<li class="nav-item">Register</li>
<li class="nav-item">Log Out</li>
</ul>
</div>
</nav>
</div>
<div class="container">
<nav class="navbar navbar-inverse fixed-bottom text-center">
<!--<a class="navbar-brand" href="#">Fixed bottom</a>-->
<h6 class="text-center">Footer</h6>
</nav>
</div>
<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>
</html>
System info: Mint Linux and Mozilla Firefox. Served from django 2.0 and also from a flat HTML file on the file system.
In Bootstrap 4.1, I fix this issue by manually invoking the JS to toggle with an onclick handler in a button:
<button onclick="$('#navbar-main-collapse-1').toggleClass('collapse')" type="button">
<i aria-hidden="true" class="fa fa-bars"/>
</button>
Example here: https://www.xn--javiercaon-09a.com/2018/01/servicio-atencion-cliente-social-crm-scrm.html
The result of this was that the navbar-collapse will render as a regular navbar on a laptop, and then become the collapsed version on a smaller screen. So if you go into mobile view (Ctl+Shift+M in firefox) you'll see the collapse correctly.
Related
to rework an old webpage, based on Bootstrap 3, I tried to build up a new page from scratch with Bootstrap 4. I started with the navbar element, which should be always shown on top, have a brand logo and the left and some page links on the right - in priniciple not special, but I didn't manage it.
I reduced my wishes more and more and I want solve the problem, I have with the toggling between icon menu and links.
I am only able to get the icon menu button always visible (without "collapse" in button class), also for large screens, or never visible (with "collapse" in button class). The rest of the code should be nearly standard as read in many many examples and tutorials. Could you please have a hint, what is it running wrong?
Thanks in advance,
Ralf
Updated:
I investigate with the Inspector and the it seems the navbar toogle button is there, but completely transparent!? Is this my problem and I have to define a color to this button (it works in principle with background-color, but I missed the lines inside) or could this a problem with Javascript and the switching function?
Here is the code - should be standard (all cosmetics are doesn't matter, I will care about later with css).
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Testseite</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-default bg-light navbar-fixed-top py-lg-0">
<div class="container-fluid">
<img src="./img/smile.png" width="60" height="60" alt="Logobeschreibung">
<button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false" aria-label="Toogle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item active">Startseite<span class="sr-only">(current)</span>
</li>
<li class="nav-item"><a class="nav-link" href="#">Seite1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Seite2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Seite3</a></li>
</ul>
</div>
</div>
</nav>
<!-- Menu -->
<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.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx " crossorigin="anonymous "></script>
</body>
</html>
I am assuming you want to always see this block of Bootstrap always shown in your header, correct?
<button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false" aria-label="Toogle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
Because Bootstrap controls its appearance based on the viewport width using media queries, a simple hack to force it to always show would be the following. Add this to your style sheet:
.navbar-toggle {
display:inline-block !important;
}
I am not a fan of Bootstrap navigation for this reason and many more. It just feels incomplete and difficult to customize with CSS.
Can you please check the below code? Hope it will work for you. You need to use navbar-toggler class in toggle button instead of navbar-toggle as per bootstrap documentation. We have given background in navbar-toggler because you used navbar bg-light class.
Please refer to this link:
https://jsfiddle.net/yudizsolutions/3vmuec5g/10/
.navbar .navbar-toggler {
background: #0000ff;
}
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Testseite</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-default bg-light navbar-fixed-top py-lg-0">
<div class="container-fluid">
<img src="./img/smile.png" width="60" height="60" alt="Logobeschreibung">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toogle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item active">Startseite<span class="sr-only">(current)</span>
</li>
<li class="nav-item"><a class="nav-link" href="#">Seite1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Seite2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Seite3</a></li>
</ul>
</div>
</div>
</nav>
<!-- Menu -->
<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.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx " crossorigin="anonymous "></script>
</body>
</html>
I am unable to open the navbar options, it's just a solid button and forms somewhat of a ring around it when clicked.
I had tried some various solutions including adding and removing the scripts, changing the navbar attributes, etc
This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pan Indus Exim Enterprises</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/vdnewlogo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ab">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#con">Connect</a>
</li>
</ul>
</div>
</div>
</nav>
At first, make sure your computer is connected to the internet. This to ensure the CDN loaded and saved by your browser.
Secondly, open the Developer tools ctrl + shift + i (chrome keyboard shortcut) and check on the tabbed console there is no error. If there have an error message, please fix it first (the most problem is the CDN link is not work or there is a typing error).
If Navbar on mobile is still not collapsing, please clear your browser data ctrl + shift + del (chrome keyboard shortcut) and reload the page.
Note: It's not recommended or bad practice to embed your script to tab head, please embed them to the end of the tag body or before </body>
It is working just make sure you have JavaScript cdn and a proper browser like Chrome, sometimes bootstrap does not support other browsers. Also make sure you are connected to Internet Especially when you are Cdn.
I have a navbar with a dropdown and I want to have one of its items marked as active, my HTML is:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nb">
<span class="navbar-toggler-icon"></span>
</button>
<div id="nb" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active dropdown justify-content-center text-center">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">User guide</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="link1.html">Link 1</a>
<a class="dropdown-item active" href="#">Active Link</a>
</div>
</li>
</ul>
</div>
</nav>
I am using these styles and scripts:
<head>
...
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" integrity="sha256-zmfNZmXoNWBMemUOo1XUGFfc0ihGGLYdgtJS3KCr/l0=" crossorigin="anonymous" />
<link rel="stylesheet" href="CSS/my_style.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function() {$('body').scrollspy({offset:0.02*window.innerHeight});})
</script>
</head>
However, this works in MS Edge, but it for some reason DOESN'T work in chrome. The .active class disappears from the dropdown item after a document is loaded.
Chrome: Version 77.0.3865.90 (Official Build) (64-bit)
MS Edge: Microsoft Edge 44.18362.329.0, Microsoft EdgeHTML 18.18362
Any ideas why chrome does that and how to stop it?
Thanks
EDIT
Problem seem to be in a scrollspy
<body data-spy="scroll" data-target="#side-nav" data-offset="0">
that is used on a sidenav
<div id="sidebar" class="col-md-3 col-lg-3 col-xl-2 d-none d-md-block">
<nav id="side-nav" class="navbar navbar-light bg-dark sticky-top">
<nav class="nav nav-pills flex-column">
<a class="nav-link arrow" href="#top"><i class="fas fa-arrow-circle-up fa-2x"></i></a>
<a class="nav-link" href="#intro">Introduction</a>
<a class="nav-link" href="#usage">Usage</a>
<a class="nav-link" href="#properties">Properties</a>
<a class="nav-link arrow" href="#footerInfo"><i class="fas fa-arrow-circle-down fa-2x"></i></a>
</nav>
</nav>
</div>
When I add the active class to a dropdown-item manually in dev. tools and then scroll down a bit - it disappears in chrome (not in MS edge).
...
$(function() {$('body').scrollspy({offset:0.02*window.innerHeight});})
Please try to clear the browser data (cache, cookie or history) first, then, retest your code. I have created a sample using your code, it seems that everything works well on my side, the result like this.
If still not working, please try to use F12 developer tools to check the CSS, and check your code, whether it contains other JavaScript script which will remove the active class?
The problem is ScrollSpy will remove active class from all dropdown-item elements (in order for it to work like this) within your target which in most cases is body. The solution is to exclude some dropdowns from being targeted by ScrollSpy by using a different active class (eg. selected), and create custom CSS for the new selected class .dropdown-item.selected.
I am using BootStrap 3.4.1 and collapse is not working. I am using PHPStorm and it is not recognizing data-toggle and data-target. Although no typo on them.
I am learning bootstrap from PluralSight. Tried solution from different websites including w3schools and stackoverflow.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width , initial-scale=1" />
<title>TESTING</title>
<script src="../js/bootstrap.js"></script>
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/bootstrap-theme.css">
</head>
<body>
<div class="navbar navbar-default">
<div class="navbar-header">
<button class="btn btn-success navbar-toggle collapsed"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
</div>
<div id="MINE" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav"> Home </li>
<li class="nav"> About</li>
<li class="nav"> Books</li>
<li class="nav"> Films</li>
<li class="nav"> Contact</li>
</ul>
</div>
</div>
</body>
</html>
the button should be able to show and collapse class navbar-collapse. but is not responding.
before Clicking the button
After Clicking
This is the Navigation bar
Working code Demo
Just went through your question. I've found a few unconventional things in your code that put me into unease. Mentioning them below. First point will solve your issue while others are hopefully for your knowledge.
Bootstrap needs jquery to be loaded first to perform almost all of it's dynamic activities (in your case it's triggering a toogle event).
It is a good practice to load css files in header and javascripts down in the body (usually before closing tag of body) untill and unless specific purpose is required. It makes your page loading into client's browser faster.
I noticed you're linking two js files. "bootstrap.js" and "bootstrap.min.js". Both files have same javascript code but later one is just minified version. So just include one of them.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width , initial-scale=1" />
<title>TESTING</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" />
</head>
<body>
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button class="btn btn-success navbar-toggle collapsed"
data-toggle="collapse" data-target="#MINE">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
</div>
<div id="MINE" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav"> Home </li>
<li class="nav"> About</li>
<li class="nav"> Books</li>
<li class="nav"> Films</li>
<li class="nav"> Contact</li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>
</body>
</html>
I am currently teaching myself web based languages and I am a bit stuck on my bootstrap/html code. Currently I am running into some trouble with bootstrap. I am trying to make a navbar and I have copied code I found online and pasted on Atom and then ran the local site.
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>testing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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>
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Links -->
<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>
<li class="nav-item">
<a class="nav-link" href="\Users\sealc\.atom\Web Dev\testing\pagethree.html">page three</a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\sealc\.atom\Web Dev\testing\pagetwo.html">Page two</a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\sealc\.atom\Web Dev\testing\pagefour.html">Page four</a>
</li>
</ul>
<!-- Links -->
</div>
<!-- Collapsible content -->
</nav>
</body>
</html>
it works when I fiddle with it on codeply, but when I try to run the local site I keep getting this:navbar
It is probably an easy fix, but I am no expert, I already tried using different links for bootstrap an I copied the template on their website, but nothing changed
I tested your code on my environment the link might not work. I changed the link and it worked again. Here it is:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
Check the conflict something like:
How many .JSFile Version you are using?
If you have A master page i guess that is the cause. (Cause by the other pages)
To Resolve:
Try to comment some other .JS and run to check the cause.
May check also your .CSS using inspect element.
By Forcing the style you want or to By pass the old css, you can add in your style !important to the affected area.
Like for Example:
<style>
.sampleclass{
color: red !important
}
</style>
Hello #Jacob Dubois I have check your code. Your code is perfect but bootstrap css has a problems. Please use this bootstrap latest version. For Example :=> https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css