I am new to coding and I am trying to use Bootstrap.
However, I can't find out how to overwrite the default Bootstrap code with my own CSS.
I have searched and the common suggestions were:
1. Link my own stylesheet after Bootstrap.
2. Make my references more specific than Bootstrap (such as navbar-link a instead of just a).
3. Add !important to my CSS (which should be avoided).
I tried all of these and still struggle to get my CSS applied. What am I doing wrong? Could somebody please point me in the right direction?
Below is an example using the navbar and links. The background color gets applied but none of the stylings for a elements works. I tried various grades of being more specific but none of which seem to work.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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">
<!-- my css below-->
<link rel="stylesheet" href="CSS/main.css" type="text/css">
<title>ML</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="index.html"><img src="img/logo-small.png" alt="Logo"></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" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 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>
</body>
</html>
CSS
body {
background-color: #3c896d;
}
.navbar-light .navbar-nav .nav-link a:visited {
color: #3c896d;
}
.navbar-light .navbar-nav .nav-link a:hover {
color: #db5461;
}
.navbar-light .navbar-nav .nav-item .nav-link a {
color: #db5461;
}
You've got the right styles. The reason you're not seeing your styles getting applied is because you're not targetting the selectors correctly in the CSS.
For instance,
.navbar-light .navbar-nav .nav-item .nav-link a
should be changed to
.navbar-light .navbar-nav .nav-item .nav-link
You don't need to target the "a" tag after the .nav-link. when you add a space between selectors in CSS such as ".navbar-light .navbar-nav", it means that you are selecting all the child nodes that contain the class "navbar-nav" that belong to the parent ".navbar-light".
In your case, you had ".navbar-light .navbar-nav .nav-item .nav-link a" so the browser looks for all <a> tags/selectors that are under the ".nav-link" selector. Which, in this case, does not exist. Instead, you have an <a> tag that which itself has the class "nav-link" (and not it's child elements)
Here's a great article to help you understand how to target the CSS selectors correctly so you can apply the right styles.
https://css-tricks.com/whats-the-difference/
And as for your answer, here's what the CSS should be changed to
body {
background-color: #3c896d;
}
.navbar-light .navbar-nav a.nav-link {
color: #3c896d;
}
.navbar-light .navbar-nav a.nav-link:hover {
color: #db5461;
}
.navbar-light .navbar-nav .nav-item .nav-link {
color: #db5461;
}
Related
I have a section in my header named #contact-stripe that has a space/gap between it and the navbar. However, I don't see anywhere that has padding or margin so I'm stumped.
I put this on CodePen which may make it easier to see.
I've used Chrome's inspect to try and find anything that is using margin/padding and just can't find it.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Raleway:400,400i,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="/css/style.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Listing Naples</title>
</head>
<body>
<header>
<!-- Contact Stripe -->
<section id="contact-stripe">
<div class="container">
<span class="float-left"><i class="fas fa-envelope"></i> Email Us</span>
<span class="float-right">
<div class="telephone align-middle">
<i class="fas fa-phone d-sm-inline-block align-middle"></i>
<span class="telephone-number d-sm-inline-block align-middle">(239) 248-8171</span>
</div>
</span>
<ul class="social">
<li class="align-middle"><i class="fab fa-facebook-square"></i></li>
<li class="align-middle"><i class="fab fa-twitter-square"></i></li>
<li class="align-middle"><i class="fab fa-instagram"></i></li>
<li class="align-middle"><i class="fab fa-linkedin"></i></li>
</ul>
</div>
</section>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-custom">
<div class="container">
<a class="navbar-brand" href="#"><img src="https://s3.amazonaws.com/listing-naples/assets/listing-naples-logo.png" alt="Listing Naples Team Logo"></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="#">Buying</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Selling</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About our Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<form class="form-inline my-2 ml-4 my-lg-0">
<input class="form-control-sm mr-sm-2 custom-input-sm" type="search" placeholder="MLS Number" aria-label="Search">
</form>
</div><!-- end collapse navbar-collapse div-->
</div><!-- end container div -->
</nav>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
CSS
body {
font-family: 'Source Sans Pro', sans-serif;
padding:0;
}
#contact-stripe {
background-color: #000;
border-bottom: 1px solid #353a3b;
color: rgba(255, 255, 255, 0.5);
}
ul.social{
text-align:center;
list-style-type:none;
}
ul.social li {
display:inline-block;
border-right:1px solid #353a3b;
}
ul.social li:first-of-type {
border-left: 1px solid #353a3b;
}
.telephone {
background-color:red;
}
.telephone-number {
background: teal;
}
.navbar-custom {
background-color:#000;
}
header li {
padding: .5rem;
margin:0;
}
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.5);
font-weight:400;
font-size: 1rem;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link, .navbar-custom li:hover {
color: white;
background-color: orange;
}
.active {
background-color: orange;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Lora', sans-serif;
}
h1 {
font-size: 1.8rem;
font-weight: bold;
}
Because your ul.social has a margin-bottom of 1rem.
just add this css to fix:
ul.social {
margin-bottom: 0;
}
I am trying to change the text color of my navbar to white. However, I could only change the color of the text on the right side (Logout).
Not able to change the color of the text on the left.
header.php
<link type="text/css" rel="stylesheet" href="styles//bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="styles/mediaqueries.css" media="all">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link rel="stylesheet" href="styles//bootstrap.min_1.css">
<link rel="stylesheet" href="css/main.css" media="all">
<link type="text/css" rel="stylesheet" href="styles/mediaqueries.css" media="all">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<div class="mm-page">
<div class="nav">
<header id="header" class="full_width clear"> </header>
<nav class="navbar navbar-expand-lg navbar-dark navbar-static-top" id="topNav" style="">
<img src="images/logo.png" alt=" Logo">
<div id="container">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="myNavbar">
</div>
<ul class="nav navbar-nav">
<li class="active"</li> <span class=""></span> My Profile
<li><span class=""></span> My Portal</li>
<li><span class=""></span>Contact Us</li>
<li><span class=""></span>Help</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class=""></span> Logout</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
main.css
.nav.navbar-nav.navbar-right li a {
color: white;
}
.nav.navbar-nav li a{
color: white;
}
.nav.navbar-nav.navbar-right li a {
color: white !important;
}
.nav.navbar-nav li a{
color: white !important;
}
It's difficult to test without executable code but I think you're missing the !important tag. !important tells css to ignore subsequent rules.
.nav.navbar-nav.navbar-right li a {
color: white !important;
}
.nav.navbar-nav li a{
color: white !important;
}
You can read more about !important tags in css here: What does !important in CSS mean?
I have the following bootstrap navbar: JSBin:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" ng-controller="NavCtrl">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdow <span class="caret"></span>
<ul class="dropdown-menu">
<li>New</li>
<li>Old</li>
</ul>
</li>
<li>Help</li>
</ul>
</nav>
</body>
</html>
I want to do the following:
change the default background color of the navbar to #e1e1e1
when we hover on dropdown and help, the background color of that element becomes even darker (eg, #a9a9a9)
Does anyone know how to achieve this?
Target it with these rules to overwrite the default bootstrap styling.
.navbar-default {
background-color: #e1e1e1;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
background: #a9a9a9;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.navbar-default {
background-color: #e1e1e1;
}
nav.navbar-default .navbar-nav>li>a:focus,
nav.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,
nav.navbar-default .navbar-nav>li>a:hover,
nav.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
background: #a9a9a9;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" ng-controller="NavCtrl">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdow <span class="caret"></span>
<ul class="dropdown-menu">
<li>New</li>
<li>Old</li>
</ul>
</li>
<li>Help</li>
</ul>
</nav>
</body>
</html>
You just have to select the elements you wish to change
.navbar {
background-color: #e1e1e1;
}
nav li:hover {
background-color: #a9a9a9;
}
Is this what you need?
.nav li {
background: #e1e1e1;
}
.nav li:hover {
background: #a1a1a1;
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<nav class="navbar navbar-default navbar-static-top" ng-controller="NavCtrl">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdow <span class="caret"></span>
<ul class="dropdown-menu">
<li>New</li>
<li>Old</li>
</ul>
</li>
<li>Help</li>
</ul>
</nav>
I'm having the hardest time trying to redefine the font-size of BootStrap's .dropdown-menu class.
The Firefox inspector says it's from .dropdown-menu (inherited from ul), so I tried ul.dropdown-menu, .dropdown-menu but with no luck.
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header"></div>
<div id="myMenu" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>First list item</li>
<li id="my-messages" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Messages</a>
<ul class="dropdown-menu pull-right" aria-labelledby="dLabel" role="menu">
<li>Dropdown list item</li>
...
Any advise? Thanks.
Looks like you're using it in conjunction with a nav?
I was able to do this with the nav and a bit of CSS.
BOOTPLY
CSS:
.navbar-nav > li {
font-size: 20px;
}
.dropdown-menu {
font-size: 20px;
}
Put your bootstrap above and then your regular css file in header. And then write your css in style.css file.
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
I have built my navbar navigation links to pull-right (which is how I want it) but upon collapse the links also pull-right which looks weird (see image). I would like to figure out how to modify the code so that the navigation pull-left when collapsed. Demo
Please let me know if you can help.
My template code and site-specific css is below:
![<!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 href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/static/css/site-specific.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar- collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse pull-right">
<ul class="nav navbar-nav pull-left">
<li>Home</li>
<li>About</li>
<li class="dropdown">
Browse by Neighbourhood<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Notting Hill</li>
<li>Marylebone</li>
<li>West End</li>
<li>Mayfair</li>
<li>Soho</li>
<li>Covent Garden</li>
<li>Chelsea</li>
<li>Camden</li>
<li>Shoreditch<li>
<li>Tower Bridge<li>
<li>All<li>
</ul>
</li>
<li>Contact</li>
</ul>
</div><!--.nav-collapse-->
</div>
</div>
<h1>LONDON</h1>
{% block content %}{% endblock %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>
.navbar {
background-color: #33B833;
font-family: 'Raleway', sans-serif;}
.navbar .nav > li > a {
color: #ffffff;}
.navbar .nav > li > a:hover {
color: #000000;}
.navbar-inverse .navbar-nav > .open >a:hover, .navbar-inverse .navbar-nav > .open >a:focus, .navbar-inverse .navbar-nav > .open >a {
background-color: #33CC33;
}][4]
I finally figured it out - should be .navbar-right instead of .pull-right! Hope this helps someone out in the future!
This is what you need in your styles.css Give it a try.
#media (max-width: 768px) {
.navbar-collapse {
float: left;
}
}
Add Pull-right class to dropdown-menu
Browse by Neighbourhood<span class="caret"></span>
<ul class="dropdown-menu pull-right" role="menu">
<li>Notting Hill</li>
<li>Marylebone</li>
<li>West End</li>
<li>Mayfair</li>
<li>Soho</li>
<li>Covent Garden</li>
<li>Chelsea</li>
<li>Camden</li>
<li>Shoreditch<li>
<li>Tower Bridge<li>
<li>All<li>
</ul>