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.
Related
Below is the relevant HTML for my _Layout.cshtml page. My issue is that when you click the dropdown menu, Supporting Tables, nothing happens - nothing drops down. I have even tried many other examples after searching Google, but none worked. Finally, one stylesheet link from an online how-to worked, but it changed the styles of my page, so am looking for a solution that won't do that.
Would appreciate it if someone could take a look and see what I might have wrong/be missing. I think it must be a script src or stylesheet link, but I do not know which one I would need to add or replace. Very new to this, so am sorry for my ignorance. Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - EmergencyContactsWeb</title>
<link rel="stylesheet" href="~/css/bootswatch_darkly.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.2/font/bootstrap-icons.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">PHECWeb</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="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-page="/InfoSites/Index">Site Information</a>
</li>
<!--Dropdown Below-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Supporting Tables</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" asp-area="" asp-page="/MDSpecialties/Index">MD Specialities</a>
<a class="dropdown-item" asp-area="" asp-page="/ResCategories/Index">Residence Categories</a>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">...
Found this on another stackoverflow post (I had searched here prior to posting the question, but must have used other search terms. I found this on Google.)
I needed to include these script srcs under my link rels and in this order:
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
The link to the original solution is here:
Bootstrap 4 Dropdown Menu not working?
Hope that can help others! I had no idea there was a particular order.
You are using Bootstrap but cdn of bootstrap CSS is not included in your head tag. The only thing you have to do is to add this to your head tag :
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
My cart icon in the navbar toggle is not showing up when I go into a smaller display.
I am using bootstrap 5 for the navbar, I can click on the bottom of the toggler and it brings me to the my cart page but I can't see the actual icon.
Anyone have an idea on how I can fix this?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
Meat
<ul class="navbar-nav">
<li class="nav-item px-4">
Fruits & Vegetables
</li>
<li class="nav-item px-4">
Dairy & Eggs
</li>
<li class="nav-item px-4">
Snack
</li>
<li class="nav-item px-4">
Drinks
</li>
<li class="nav-item px-4">
Bakery
</li>
<i class="bi bi-basket2-fill h2 cart-color"></i>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
your cart icon element is exist but on a tablet, the size would go out of range of the screen.
you can fix this issue by trying to use one of these methods :
1 - try to re-responsive the navbar (with bootstrap you can use COl styling)
for this method try to read grid doc from the bootstrap website: https://getbootstrap.com/docs/5.1/components/navbar/
2 : you can give the icon "position absolute".
but I won't suggest this method because it is not so professional.
I am trying to make a navbar that changes the style of a particular navbar link to active as the user scrolls down the page. I am trying to do this using Bootstrap's scrollspy feature.
I checked and there are many comprehensible tutorials on this (e.g. https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp or https://mdbootstrap.com/docs/standard/navigation/scrollspy/#example-3).
Although I believe I followed them to the letter, the effect just does not seem to work. I am afraid this may have to do something with the changes to mechanics of the spyscroll feature due to the abandonment of JQuery by BS5. But it very well may by an error in my code, although I did my best to follow the tutorials to the letter.
My code:
(a) included external files:
<link rel="stylesheet" href="BS5/css/bootstrap.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="BS5/css/styles.css" /> <!-- BS customising css -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="BS5/js/bootstrap.js"></script>
<script src="BS5/js/jsko.js"></script> <!-- non related custom scripts -->
(b) style tag
<style>
body
{
position: relative;
}
</style>
(c) body tag
<body data-spy="scroll" data-target="#navbarko">
(d) navbar tag
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top nav-larger" id="navbarko">
<div class="container">
<a class="navbar-brand" href="#"><img src="logo.png"/></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 justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mission">Our mission</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#debt">Debt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#finadv">Finland</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#references">References</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
(e) beginning of the section tags throughout the page:
<section class="feature grad_third" id="mission">
<section class="feature grad_third" id="debt">
<section class="feature grad_third" id="finadv">
<section class="companies references" id="references">
<section class="feature grad_third" id="contact">
Many thanks beforehand for your time and help.
Things have changed slightly in Bootstrap 5 - and the W3Schools tutorial is Bootstrap 4.
So you need to change your body tag to (note the 'bs', for Bootstrap):-
data-bs-spy="scroll"
More on this here:-
https://getbootstrap.com/docs/5.0/migration/#javascript
Data attributes for all JavaScript plugins are now namespaced to help
distinguish Bootstrap functionality from third parties and your own
code. For example, we use data-bs-toggle instead of data-toggle.
Hi I am trying to build a small website using HTML, bootstrap and css (I am a newbie). However in the css background-image does not work. I have checked the path and the file format and it is fine (infact am using brackets ide and it shows a thumbnail of the image when I hover the mouse over the path). Here is my code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles.css">
<meta charset="UTF-8">
<title>My First Web Project</title>
</head>
<body>
<!-- NAVIGATION HEADER -->
<div class="header" id="topheader">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container text-uppercase p-2">
<a class="navbar-brand" href="#">MY WEBSITE</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="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">ABOUT US</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">SERVICES</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">CONTACT US</a> </li>
</ul>
</div>
</div>
</nav>
<!-- BODY SECTION -->
<section class="header-section">
<div class="center-div">
<h1 class="font-weight-bold">Lorem ipsum dolor sit</h1>
<p>Hello we are developing this site</p>
</div>
<div class="header-buttons">
EXPLORE
CONTACT
</div>
</section>
</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>
</body>
</html>
CSS:
*{padding:0; margin:0; box-sizing: border-box;}
.header
{
background: url('../images/background.jpg');
}
Please help!
Have you checked your browser DevTools (right click on page and hit Inspect or CTRL+SHIFT+I in Chrome) to see if there is anything overriding your CSS?
It could also be the URL needs to change.. try changing it to the following:
background-image: url('images/background.jpg');
If you've tried to put in a URL directly from the web as mentioned and it still didn't work, then I suggest checking out if something is overriding the code, maybe declare !important in your CSS line to see if that makes a difference.
I've also experienced a few cases where the image was a JPEG and had to change it from JPG in the CSS. Check your browser Dev Tools to see what's going on. Hope this helps!
Change your CSS code to this and try it out:
.header
{
background: url('images/background.jpg');
}
you should give width and height to div that has a background image with background-size: cover
.header
{
background: url('images/background.jpg');
height:auto;
width:100%;
background-size:contain
}
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.