I'm running into an issue with scrollspy on Bootstrap v5.1. I am following along with the examples within the docs (listed below) however I can't get it to work; nothing seems to change upon scrolling.
When the user scrolls on the page, depending on which section they are viewing I want the corresponding link on the navbar to be active.
docs: https://getbootstrap.com/docs/5.1/components/scrollspy/
test site: https://Test-Site.thatsliams.repl.co
site code: https://replit.com/#ThatsLiamS/Test-Site
HTML Outline
<body data-bs-spy="scroll" data-bs-target="#navbar">
...
<nav id="navbar" class="menu">
<ul class="nav flex-column">
<li class="nav-item active"><a class="nav-link" href="#about">About me</a></li>
<li class="nav-item"><a class="nav-link" href="#skills">Skills</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
</ul>
</nav>
...
<section id="about"> ... </section>
<section id="skills"> ... </section>
<section id="services"> ... </section>
<section id="projects"> ... </section>
</body>
It looks like your code is actually working, its just that the .active class is added to the .nav-link anchor tag instead of the .nav-item list item.
Your CSS is targeting the li.active instead of a.active
.sidebar .nav li a:hover, .sidebar .nav li.active a {
color: #1d93e4;
opacity: unset;
}
try this instead:
.sidebar .nav li a:hover, .sidebar .nav li a.active {
color: #1d93e4;
opacity: unset;
}
Here is the example of how to structure the nav (with the .active class in the .nav-link)
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
https://getbootstrap.com/docs/5.1/components/navs-tabs/#base-nav
Or like this...
<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
Related
I wanted to create a navbar hamburger in mobile view. But The issue is, I have two ULs, and when I created a hamburger The two UL's will split into mobile versions. Is there any way I can fix that thing?
This is my code:
<header>
<div class="container" id="home">
<div class="container">
<nav class="navbar navbar-default">
<div id="nav-toggle">
<a href="#">
<span></span>
<span></span>
<span></span>
</a>
</div>
<div class="mr-auto">
<span class="navbar-title">PRACTICE FOR NAVBAR HAMBURGER</span>
</div>
<div class="mx-auto">
<div class="navbar justify-content-center" id="nav">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active hometext disabled">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#shop">SHOP</a>
</li>
<li class="nav-item">
<a class="nav-link hometext">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link hometext">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link hometext">CONTACT</a>
</li>
</ul>
</div>
</div>
<div class="ml-auto">
<div class="navbar" id="nav">
<ul class="nav">
<li class="nav-item">
<a class="nav-link hometext" href="#">MY ACCOUNT</a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#"><i class="fas fa-search"></i></a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#"><i class="far fa-heart"></i></a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#"><i class="fas fa-shopping-cart"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</header>
I wanted to stay the desktop view as this
The first <ul> is in the HOME section then the second <ul> is MY ACCOUNT
You can use flex for a div that includes two ul:
*{
box-sizing: border-box;
}
.container{
display: flex;
justify-content: space-between;
}
.navbar1{
width: 60%;
}
.navbar2{
width: 30%;
}
ul{
display: flex;
justify-content: space-between;
list-style-type: none;
margin: 0;
padding: 0;
}
nav1 li{
width: 20%;
}
nav2 li{
width: 25%;
}
<div class="container">
<div class="navbar1 justify-content-center" id="nav">
<ul class="nav1">
<li class="nav-item">
<a class="nav-link active hometext disabled">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#shop">SHOP</a>
</li>
<li class="nav-item">
<a class="nav-link hometext">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link hometext">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link hometext">CONTACT</a>
</li>
</ul>
</div>
<div class="navbar2" id="nav">
<ul class="nav2">
<li class="nav-item">
<a class="nav-link hometext" href="#">MY ACCOUNT</a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#">1<i class="fas fa-search"></i></a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#">2<i class="far fa-heart"></i></a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#">3<i class="fas fa-shopping-cart"></i></a>
</li>
</ul>
</div>
</div>
I think the best solution is to wrap both of your ul into a single one in mobile screen sizes using JavaScript
I am struggling to justify the scrollyspy links to the center of the navbar. Can someone please help? Thanks!
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
The alignments on this site are funky, but on VSC they are normal.
Here is my css:
.nav-pills {
display: flex;
align-content: center;
justify-items: center;
}
I tried going with the flex approach.
Thanks for the help.
Make the width of the ul element 100%. If it isn't it can't center from its own width
My element has to be clicked on for CSS to work.
I tried using bootstrap for a nav bar. With 1 logout link on the top right.
I used navbar-nav ml-auto for it.
After that, I tried to override spacing of bootstrap by adding margin-right: 50% !important;
When I refresh the page, it is not applied immediately. If I clicked on the link, it will "jump" to the left as I expected.
Here is what I've tried:
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Role Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">File and Folder Management</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li>
<a class="nav-item" id="logout-btn" href="#"> Logout </a>
</li>
</ul>
</nav>
CSS:
* {
/*display: none;*/
box-sizing: border-box;
}
#logout-btn.nav-item {
margin-right: 50% !important;
}
Can you help me explain why, or is it my browser's fault?
I find it quite weird, already cleared cached.
Remove css style for logout-btn.nav-item which you override. this get applied to the anchor tag. we need to add margin to the ul tag not to a tag. so we have bootstrap 4 in-built margin classes, so we can make use of it. so remove overrided styles and add mr-4 class to the second ul which contains the logout link.The modified code is given below.
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Role Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">File and Folder Management</a>
</li>
</ul>
<ul class="navbar-nav ml-auto mr-4">
<li>
<a class="nav-item" id="logout-btn" href="#"> Logout </a>
</li>
</ul>
</nav>
I'm trying to add a background color to the active link on my bootstrap navbar that will look similar to the one shown in the image below. I've selected nav-link active and made it red in the css but I haven't been successful.
<nav class="navbar navbar-expand-md navbar-custom">
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="Index.html">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://shop.spartansafety.co.uk/personal-protection-s/1820.htm">PPE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://shop.spartansafety.co.uk/default.asp">CLOTHING</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://shop.spartansafety.co.uk/category-s/1899.htm">FOOTWEAR</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contact.html">CONTACT</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="Contact.html">LOGIN</a>
</li>
</ul>
</div>
</nav>
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #cccccc;
}
.nav-link active {
color: red
}
You have to use . before active:
.nav-link.active {
background-color: red
}
.nav-link.active {
background-color: red}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/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.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-custom">
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="Index.html">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://shop.spartansafety.co.uk/personal-protection-s/1820.htm">PPE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://shop.spartansafety.co.uk/default.asp">CLOTHING</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://shop.spartansafety.co.uk/category-s/1899.htm">FOOTWEAR</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contact.html">CONTACT</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="Contact.html">LOGIN</a>
</li>
</ul>
</div>
</nav>
You forgot a dot before active class and also you need to get rid of the space before it, because both of the classes are in the same element. So you don't need space between them. Try this code.
.nav-link.active {
color: red
}
On the official page of agular for the nav tabs we have no bottom border for the selected tab
official page
But when I am using the same code , I get a border even on the selected nav-item
myTab example
Here is my HTML Code
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<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>
</ul>`
And My CSS :
.nav-item .active
{
background-color: rgb(119, 218, 218) !important;
border-bottom: 0px;
color:rgb(168, 19, 168);
}
Could someone tell me to remove the border bottom from active nav-item ???
Edit: I previously made a mistake. Here's the correct code (notice the corresponding css file):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
So, it's important that you link the correct css file in your header. Once you do that, no additional custom css is required to make it work. Also, make sure that none of the other custom css you potentially have interferes with this code.
Remove the nav-tabs class and will work