This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 2 years ago.
So when the default color for my Nav items is black. Now i'm trying to use my css to change the color to white but it isn't working. bothe the nav brand and the nav links
could it be the scripts on the page affecting it? if not how do i change the default bootstrap css settings
.navbar{
padding: 20px 0px;
box-shadow: none;
background-color: transparent;
}
.navbar-brand{
font-size: 28px;
font-weight: 700;
color: #3a3a3a;
}
.navbar .navbar-expand-md .navbar-nav .nav-link{
position: relative;
font-size: 16px;
font-weight: 300;
color: #ffffff;
padding: 0px 30px 0px;
transition: all .5s ease-in-out;
}
.navbar-nav .nav-item .nav-link::before {
content: '';
position: absolute;
bottom: 0px;
left: 0;
width: 0px;
height: 2px;
background: #ffffff;
transition: all .5s ease-in-out;
}
.navbar-nav .nav-item .nav-link:hover::before,
.navbar-nav .nav-item .nav-link.active::before {
width: 40px;
}
<nav class="navbar navbar-expand-md navbar-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#page-top">Otikes Fitness</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#page-top">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#About">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
The problem is with the CSS selector. Instead of .navbar .navbar-expand-md .navbar-nav .nav-link it should be .navbar.navbar-expand-md .navbar-nav .nav-link because .navbar-expand-md isn't a child of .navbar, it's the same element.
.navbar.navbar-expand-md .navbar-nav .nav-link {
position: relative;
font-size: 16px;
font-weight: 300;
color: #ffffff;
padding: 0px 30px 0px;
transition: all .5s ease-in-out;
}
Related
My app requires Bootstrap. However, it is overriding my custom CSS then the navbar that I have set is now displayed in a weird manner. What am I doing wrong and what can do to fix it? My end goal is to let the bootstrap work along side with the css.
Here is the image for more clarification:
The HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Client Server Application Project</title>
<link rel="stylesheet" href="faq.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
/>
<!--BootStrap CSS-->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous"
/>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"
></script>
</head>
<body>
<nav>
<div class="logo">Revolutionary Fitness</div>
<ul>
<div class="items">
<li>Home</li>
<li>
Our Services
<ul>
<li>Gyms Training</li>
<li>Gym Location</li>
</ul>
</li>
<li>
Login
</li>
</div>
<li class="search-icon">
<input type="search" placeholder="Search">
<label class="icon">
<span class="fas fa-search"></span>
</label>
</li>
</ul>
</nav>
<div class="container">
<div class="header">
<h1>Frequently Asked Questions</h1>
</div>
<br><br>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-whatsapp"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<ul class="list">
<li>
About Us
</li>
<li>
Contact Us
</li>
<li>
FAQs
</li>
</ul>
<p class="copyright">
<small>©2022 Singapore Polytehnic</small>
</p>
</footer>
<!--BootStrap JavaScript-->
</body>
</html>
The CSS code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav{
background: #1b1b1b;
}
nav:after{
content: '';
clear: both;
display: table;
}
nav .logo{
float: left;
color: white;
font-size: 27px;
font-weight: bold;
line-height: 70px;
padding-left: 60px;
}
nav ul{
display: flex;
justify-content: center;
align-items: center;
list-style: none;
float: right;
margin-right: 40px;
}
nav ul li{
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a{
color: white;
text-decoration: none;
line-height: 70px;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover{
color: cyan;
border-radius: 5px;
box-shadow: 0 0 5px #33ffff,
0 0 5px #66ffff;
}
nav ul ul li a:hover{
color: cyan;
box-shadow: none;
}
nav ul ul{
position: absolute;
top: 90px;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
nav ul li:hover > ul{
top: 70px;
display: flex;
flex-direction: column;
opacity: 1;
visibility: visible;
}
nav ul ul li{
position: relative;
margin: 0px;
width: 150px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
nav ul ul li a{
line-height: 50px;
}
nav ul .search-icon{
height: 40px;
width: 240px;
display: flex;
background: #f2f2f2;
border-radius: 5px;
}
nav ul .search-icon input{
height: 100%;
width: 200px;
border: none;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
border-radius: 5px 0 0 5px;
}
nav ul .search-icon .icon{
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border: 1px solid #cccccc;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
nav ul .search-icon .icon:hover{
background: #e6e6e6;
}
nav ul .search-icon .icon span{
color: #222222;
font-size: 18px;
}
#media screen and (max-width:968px){
nav .logo{
display: none;
}
nav ul div.items{
flex: 3;
}
nav ul .search-icon{
display: none;
}
}
.header{
width: 100%;
height: 100px;
margin-top: 100px;
background-color: crimson;
color:white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container{
display: block;
margin: 0 auto;
width: 100%;
height: 700px;
}
.footer{
padding: 40px;
background-color: chartreuse;
}
.footer .social{
text-align: center;
padding-bottom: 25px;
color:#4b4c4d;
}
.footer .social a{
display: inline-block;
height: 40px;
width: 40px;
background:rgb(0, 0, 0);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color:#ffffff;
transition: all 0.5s ease;
}
.footer .social a:hover{
color:#24262b;
background-color: #ffffff;
}
.footer ul{
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a{
color:inherit;
text-decoration: none;
opacity: 0.8;
}
.footer ul li{
display: inline-block;
padding: 0 15px;
}
.footer ul li a:hover{
opacity: 1;
}
.footer .copyright{
margin-top: 15px;
text-align: center;
font-size: 20px;
color:black;
}
Much help is appreciated!
I think Your Bootstrap link is not working properly.
actually, Bootstrap purpose is reducing css No of line codes.
simply, You can follow my steps..
Try to use this Link:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
Finally, you can search on bootstrap, what you want to use.
https://getbootstrap.com/docs/5.1/components/navbar/
If you want to use Navbar? simply copy and paste your project..
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
I have the below code (you can see it in a CodePen here, because for some reason the .navbar {position: fixed;} doesn't work in the snippet here), where, when you scroll down, some of the .nav-link CSS attributes have to change. In order to do so, I've added a JS script that adds the .is-scrolled-down class when scrolling down.
However, it seems to only work on the first .nav-link. To make it more visible what's going wrong, I've changed the font color in .nav-link.is-scrolled-down to red.
.nav-link applies to all the links, why doesn't .nav-link.is-scrolled-down?
var navbar = document.querySelector (".navbar");
var navbarlink = document.querySelector (".nav-link");
var navbarbrand = document.querySelector (".navbar-brand");
var IsScrolledDownClass = ("is-scrolled-down");
var ScrollDownClassTreshold = 50;
window.addEventListener ("scroll", function() {
if (!navbar) return;
if (window.scrollY >= ScrollDownClassTreshold) {
navbar.classList.add(IsScrolledDownClass);
navbarlink.classList.add(IsScrolledDownClass);
navbarbrand.classList.add(IsScrolledDownClass);
}
else {
navbar.classList.remove(IsScrolledDownClass);
navbarlink.classList.remove(IsScrolledDownClass);
navbarbrand.classList.remove(IsScrolledDownClass);
}
});
body {
height: 200vh;
}
.navbar {
background-color: #105565;
position: fixed;
width: 100%;
}
.navbar-brand {
color: white;
font-family: 'Julius Sans One';
font-style: normal;
font-weight: 400;
font-size: 40px;
}
.navbar-brand:hover {
color: white;
}
.navbar-nav {
margin-right: 4.4%;
}
.nav-link {
font-family: 'roboto';
font-size: 14px;
font-weight: 300;
color: white;
text-decoration: none;
padding-left: 12px;
padding-right: 12px;
padding-top: 28px;
padding-bottom: 29px;
}
.nav-link:hover {
color: #105565;
background: white;
padding-top: 29px;
padding-bottom: 29px;
}
#media (min-width: 1001px) {
.navbar-brand {
padding-left: 67px;
margin-bottom: 3px;
margin-left: 1.9%;
transition: 0.4s;
}
.navbar.is-scrolled-down {
padding-top: 0;
padding-Bottom: 0;
}
.navbar-brand.is-scrolled-down {
font-size: 28px;
padding-top: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.nav-link.is-scrolled-down {
color: red;
padding-top: 15px;
padding-bottom: 12px;
}
}
#media (max-width: 1000px) {
.navbar-brand {
height: 52px;
line-height: 52px;
padding-top: 0;
padding-bottom: 0;
margin-left: 2.5%;
transition: 0.4s;
}
.fas {
color: rgba(255,255,255,1.00);
}
.nav-link {
margin-top: 15px;
margin-bottom: 14px;
}
.navbar-brand.is-scrolled-down {
font-size: 28px;
padding-top: 0.4%;
padding-bottom: 0.3%;
height: 40px;
line-height: 40px;
}
.nav-link.is-scrolled-down {
padding-top: 15px;
padding-bottom: 14px;
}
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Navbar learning</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/v4-shims.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<nav class="navbar navbar-expand-lg m-0 p-0">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar Inc.</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="fas fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">TEAM</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
Using querySelector returns only one of the .nav-link elements, that's why the class is being added to one element.
While querySelectorAll returns all elements that match the selctor. Then you should iterate through the resulting array and add or remove the class
// JavaScript Document
const navbar = document.querySelector(".navbar");
const navbarlink = [...document.querySelectorAll(".nav-link")];
const navbarbrand = document.querySelector(".navbar-brand");
const IsScrolledDownClass = "is-scrolled-down";
const ScrollDownClassTreshold = 50;
addEventListener("scroll", _ => {
if (!navbar) return;
if (scrollY >= ScrollDownClassTreshold) {
navbar.classList.add(IsScrolledDownClass);
navbarbrand.classList.add(IsScrolledDownClass);
navbarlink.forEach(link => link.classList.add(IsScrolledDownClass));
} else {
navbar.classList.remove(IsScrolledDownClass);
navbarbrand.classList.remove(IsScrolledDownClass);
navbarlink.forEach(link => link.classList.remove(IsScrolledDownClass));
}
});
#charset "utf-8";
/* CSS Document */
body {
height: 200vh;
}
.navbar {
background-color: #105565;
position: fixed;
width: 100%;
}
.navbar-brand {
color: white;
font-family: 'Julius Sans One';
font-style: normal;
font-weight: 400;
font-size: 40px;
}
.navbar-brand:hover {
color: white;
}
.navbar-nav {
margin-right: 4.4%;
}
.nav-link {
font-family: 'roboto';
font-size: 14px;
font-weight: 300;
color: white;
text-decoration: none;
padding-left: 12px;
padding-right: 12px;
padding-top: 28px;
padding-bottom: 29px;
}
.nav-link:hover {
color: #105565;
background: white;
padding-top: 29px;
padding-bottom: 29px;
}
#media (min-width: 1001px) {
.navbar-brand {
padding-left: 67px;
margin-bottom: 3px;
margin-left: 1.9%;
transition: 0.4s;
}
.navbar.is-scrolled-down {
padding-top: 0;
padding-Bottom: 0;
}
.navbar-brand.is-scrolled-down {
font-size: 28px;
padding-top: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.nav-link.is-scrolled-down {
color: red;
padding-top: 15px;
padding-bottom: 12px;
}
}
#media (max-width: 1000px) {
.navbar-brand {
height: 52px;
line-height: 52px;
padding-top: 0;
padding-bottom: 0;
margin-left: 2.5%;
transition: 0.4s;
}
.fas {
color: rgba(255, 255, 255, 1.00);
}
.nav-link {
margin-top: 15px;
margin-bottom: 14px;
}
.navbar-brand.is-scrolled-down {
font-size: 28px;
padding-top: 0.4%;
padding-bottom: 0.3%;
height: 40px;
line-height: 40px;
}
.nav-link.is-scrolled-down {
padding-top: 15px;
padding-bottom: 14px;
}
}
<nav class="navbar navbar-expand-lg m-0 p-0">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar Inc.</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="fas fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">TEAM</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
In this codepen demo, I able to animate the displaying of an underline on nav elements. But, how do I keep the underline on the current page? The current page is titled Support-Tracker.
css:
.navbar .navbar-nav .nav-item .nav-link {
position: relative;
text-decoration: none;
font-size: 1.2em;
font-weight: bold;
color: white;
cursor: pointer;
padding-right: 2em;
padding-left: 2em;
justify-content: center;
}
.navbar .navbar-nav .nav-item .nav-link::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #FFF;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.navbar .navbar-nav .nav-item .nav-link:hover::before {
visibility: visible;
transform: scaleX(1);
}
nav element:
<nav class="navbar navbar-expand-lg navbar-dark navbar-custom">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link">EU34</a></li>
<li class="nav-item"><a class="nav-link">Support-Tracker</a></li>
<li class="nav-item"><a class="nav-link">CNDNet Rolling Log</a></li>
</ul>
</nav>
When you access the specific page you add the "targeted" navigation item (.nav-item) an class, like "active" or "current-page".
If you done this and added the following CSS Code to your css file, everything should work fine.
.navbar .navbar-nav .nav-item.current-page .nav-link::before {
visibility: visible;
transform: scaleX(1);
}
--
So your navbar on the current page looks something like that:
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link">EU34</a></li>
<li class="nav-item current-page"><a class="nav-link">Support-Tracker</a></li>
<li class="nav-item"><a class="nav-link">CNDNet Rolling Log</a></li>
</ul>
I am using this code LINK.
When i click on Parent Menu like Services then sub-menu of services menu will be open but when i click on other menu then other sub menu will also open.
I want when i click on other sub menu then previous sub-menu will be close.
Kindly provide me solution for this.
Thank you
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">
</script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed active">
<i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="products">
<li class="active">CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
<li>Tabs & Accordions</li>
<li>Typography</li>
<li>FontAwesome</li>
<li>Slider</li>
<li>Panels</li>
<li>Widgets</li>
<li>Bootstrap Model</li>
</ul>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
<li data-toggle="collapse" data-target="#new" class="collapsed">
<i class="fa fa-car fa-lg"></i> New <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
<li>
<a href="#">
<i class="fa fa-user fa-lg"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg"></i> Users
</a>
</li>
</ul>
</div>
</div>
Basically you need to know the concept of not() in jQuery, so that you can hide the element except clicked one. Here is the working example.
$('#menu-content').children("li").on('click', function(){
$("li[data-toggle='collapse']").not(this).addClass('collapsed');
$("li[data-toggle='collapse']").not(this).next('ul').removeClass('in');
//alert('clicked');
});
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed active">
<i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="products">
<li class="active">CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
<li>Tabs & Accordions</li>
<li>Typography</li>
<li>FontAwesome</li>
<li>Slider</li>
<li>Panels</li>
<li>Widgets</li>
<li>Bootstrap Model</li>
</ul>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
<li data-toggle="collapse" data-target="#new" class="collapsed">
<i class="fa fa-car fa-lg"></i> New <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
<li>
<a href="#">
<i class="fa fa-user fa-lg"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg"></i> Users
</a>
</li>
</ul>
</div>
</div>
Another version of code which works for me.
$(".submenu").not('.submenu-child').click(function()
{
$(".submenu").not(this).find(".collapse").collapse('hide');
});
Where submenu class is applied to parent menu and submenu-child class applied to submenus.
This is my html and css.please help me with the scrollspy as I dont know what exactly is the problem .If possible let me know the code you have written to solve the problem
MY HTML:
<nav class="navbar navbar-default center navbar-fixed-top" id="navbar">
<button class="navbar-toggler hidden-sm-up"type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">☰</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#"></a>
<div class="navbar-inner">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" data-target="#jumbotron">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#skills">SKILLS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<div class=" jumbotron" id="jumbotron"></div>
<div id="about"></div>
<div id="skills"></div>
<div id="contact"></div>
MY CSS
and the divs are of 750px in heights
body
{
background: none;
position: relative;
margin: 0;
padding: 0;
font-family: 'Droid Serif', Georgia, Times, serif;
}
/* --------------------------------------------Navbar CSS--------------------------------------------------- */
.navbar-default
{
background-color: #610B0B ;
border-radius:0px;
}
.navbar-default .navbar-nav > li > a
{
color: white;
font-size: 15px;
font-family: 'Droid Serif', Georgia, Times, serif;
letter-spacing: 1px;
margin: 3px 10px -3px 10px;
border: 2px solid transparent;
padding: 8px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus
{
border: 2px solid white;
border-radius: 5px;
color: white;
padding: 8px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus
{
border: 2px solid white;
border-radius: 5px;
color: #555;
background-color: #E7E7E7;
}
There are a couple of things wrong.
First, 3 of your nav-link anchors have data-target= when they should have href=
Second, you need to set the data-target= to the <body> of the navbar. This allows Javascript to find what to target with Scrollspy:
<body data-target="#navbar">
and third, if you haven't, you need to call Scrollspy via Javascript:
$('body').scrollspy({ target: '#navbar' })
Here is a Codepen with a working example:
http://codepen.io/charliebeckstrand/pen/NrWpXP
I had same problem in bootstrap 5 and downloaded bootstrap 4.3.1
and replace it with previous version.