I'm currently trying to make and ecommerce site by using html, and css, got a navigation bar template from bootstrap. My problem goes when i want to style the .navbar-light .navbar-nav .nav-link classes, and I can't figure out what I'm doing wrong, I'm currently learning so I'm not so experimented, also is my first time using bootstrap
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
font-family:'Poppins', sans-serif;
}
h1{
font-size: 2.5rem;
font-weight: 700;
}
h2{
font-size:1.8rem;
font-weight:600;
}
h3{
font-size: 1.4rem;
font-weight:800;
}
h4{
font-size:1.1rem;
font-weight:600;
}
h5{
font-size:1rem;
font-weight:400;
color:#1d1d1d;
}
h6{
color:#d8d8d8;
}
.cash{
color:rgb(231, 215, 66);
font-family: 'Amita';
font-size:50px;
font-weight: 900;
}
.aside{
color:rgb(255, 179, 0);
font-family: 'Playfair Display';
font-size:50px;
font-weight: 900;
font-style:italic;
}
.logo{
width:3.5%;
display:flex;
}
.navbar{
font-size: 16 px;
}
.navbar-light .navbar-nav .nav-link{
padding: 0 20px;
color: black;
transition:0.3s ease;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar i:hover,
.navbar-light .navbar-nav .nav-link.active{
color:coral;
}
.navbar i{
font-size:1.2rem;
padding:0 7px;
cursor:pointer;
font-weight:500;
transition:0.3s ease;
}
</pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Amita:wght@700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair Display:wght@600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>
<title>CashCavaleria</title>
</head>
<body>
<!--Navigation-->
<nav >
<div >
<img src="img/logo.png" alt="">
<a href="#"><span >Cash</span><span >Cavaleria.</span></a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarSupportedContent">
<ul >
<li >
<a aria-current="page" href="#">Acasă</a>
</li>
<li >
<a aria-current="page" href="#">Magazin</a>
</li>
<li >
<a aria-current="page" href="#">Despre Cashcavaleria</a>
</li>
<li >
<a aria-current="page" href="#">Contact</a>
</li>
<li >
<i ></i>
<i ></i>
</li>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
CodePudding user response：
Bootstrap is a CSS framework that has awesome styling right out-of-the-box. It's a versatile tool during wireframing because you can just add a class here and there and you'll be all set. The downside, however, is that most of the styling that is attached to those classes have been written in such a specific way, that browsers naturally will favor Bootstrap styling over custom styling.
You see, browsers will favor more specific 'element-targeting' over more general targetting. e.g.:
html body #wrapper ul li is more specific than ul li and thus browsers will overwrite the latter with the former.
In case of Bootstrap, this leaves you with a few options:
Option 1
Be more specific, i.e. make use of the html body prefix for your styling, and make sure your elements are more specifically targeted.
Option 2
Use !important as a suffix for your CSS properties. This will communicate to the browser that your styling has to have top-priority over anything else that is applied to that element. However, if two CSS target statements receive the !important tag, browsers will still favor the more specific:
html body ul li{ display: none !important; }
body ul li{ display: block !important; }
<!-- result: <li> will be hidden. -->
Furthermore, it is usually considered bad practise to use !important so always try this as a last resort.
Option 3
Think of new classes which you can apply to your elements. If you target a specific 'unique' class that has not styling declared anywhere else, browsers will be more likely to favor that styling - i.e. a class named .flaviusPopaStyling will surely not be used by Bootstrap and thus can be considered unique enough.
.navbar-light .navbar-nav .nav-link.flaviusPopaStyling{
padding: 0 20px;
color: black;
transition:0.3s ease;
}
.navbar-light .navbar-nav .nav-link.flaviusPopaStyling:hover,
.navbar i:hover,
.navbar-light .navbar-nav .nav-link.flaviusPopaStyling.active{
color:coral;
}
Make sure to add the class to your HTML as well, for instance:
<a aria-current="page" href="#">Acasă</a>
Bonus option
Instead of using Classes, I personally prefer using a non-reserved attribute name called contains.
<nav contains='customNavBar' >
Because, by doing so, I both add more semantic meaning to my HTML as well as use obviously unique identifiers for CSS targetting, as well as prepare my HTML to be handled by JavaScript in such a way that will never influence its styling, for instance by toggleClass etc. You've written that you're quite new to styling so I'll take the liberty to assume you're kind of fresh to the front-end game so it might be a bit unclear as to why exactly you'd want to do this. But that's a topic for a later time.
Hope this helps!
CodePudding user response：
You need to learn Css selectors Weight:
Css Specificity
In your example, there are some some selectors which have more weight and overrite your custom-css Codes. For Example if you add:
nav .container-fluid .navbar-nav .nav-link.active{
color:red ;
}
then you overrite the current css.
CodePudding user response：
First of all you forgot to close the <ul> tag.
Second, you are using v4.1.3 for bootstrap.min.css but v5.0.2 for bootstrap.min.js. You should use the same version for all bootstrap files.
Finally, your styles.css should go after bootstrap.min.css:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Amita:wght@700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair Display:wght@600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>
<!-- put this last so it can overwrite bootstrap styles -->
<link rel="stylesheet" href="styles.css" />
<title>CashCavaleria</title>
</head>
<body>
...
</body>
</html>