Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
I cant seem to change the font color in my navbar, the other elements in my navbar css works but not the font color for some reason. I have tried to change the class but then my other elements in the css wont work. I cant seem to find the problem, though this is my first time using bootstrap.
CSS
.navbar {
background-color: white;
border: none;
color: #0000;
}
.navbar-brand {
font-size: 50px;
}
HTML
<head>
<title></title>
<meta charset="utf=8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar=header">
<a class="navbar-brand" href="#">TRAVELLING</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</body>
</html>
.navbar {
background-color: white;
border: none;
color: #000;
}
.navbar .navbar-nav li > a{
color: orange !important;
}
.navbar .navbar-brand {
font-size: 50px;
color: blue !important;
}
<head>
<title></title>
<meta charset="utf=8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">TRAVELLING</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</body>
</html>
Code
.navbar {
background-color: white;
border: none;
color: black;
}
.navbar-brand {
font-size: 50px;
}
.navbar a{
color:red;
}
.navbar li a{
color:red;
}
You have assigned a wrong value to color property. It should be 3 or 6 digits like color: #000 or color: #000000
CSS
.navbar {
background-color: white;
border: none;
/*color: #0000;*/ color: #000;
}
.navbar ul li > a{
color: #f00;
}
You can also use inline css in your navbar where you want to change. Try something like this
<nav class="navbar navbar-default" style="background-color:white;border:none;color:#000;">
Try something like:
.navbar {
background-color: white !important;
border: none;
}
.navbar-brand {
font-size: 50px;
}
.navbar *{
color: #000 !important; // should set font color for element contain text
}
Related
I need to style the nav-tabs by their id. The code for this was working when it had been put in html between bootstrap and css loading, but when moved to base.css only some of this code works (first set of rules).
Please tell me what to do so that all the rules are applied:
HTML
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/base.css" />
<title>Exemplary CSS error</title>
</head>
<body>
<div class ="row" style = "margin-top: 20px; margin-left: 20px">
<ul class="nav nav-tabs" id="timespan-menu">
<li class="nav-item">
<a class="nav-link active" href="#daily">Daily</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#weekly">Weekly</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#monthly">Monthly</a>
</li>
</ul>
</div>
</body>
</html>
CSS
#timespan-menu .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
background: #CBCBCB;
border-bottom: 2px solid #343a40;
}
#timespan-menu .nav-tabs > li.active > a {
font-size: 13px;
color: #212529;
}
#timespan-menu .nav-tabs > li > a {
font-size: 13px;
color: #6c757d;
}
It's because in your CSS your second and third rules are being applied to child elements of the #timestamp-menu element which have the class .nav-tabs, whereas in your markup the #timespan-menu element has the .nav-tabs class itself.
It works if you just remove the spaces between #timespan-menu and .nav-tabs in your rules, e.g.:
#timespan-menu.nav-tabs > li.active > a {
font-size: 13px;
color: #212529;
}
You probably want to tidy your CSS up, though. If you're happy that the styling should be applied by ID then you don't really need to further specify the .nav-tabs class in your second and third rules.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed last year.
Improve this question
I'm trying to style the links in my navbar by changing the font color to white, but the color remains unchanged. I've tried targeting different selectors: .navbar, .ul and .li but nothing works. What am I doing wrong? I've also tried changing it to other colors besides white, without success.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-image: url("stock.jpg");
}
.navbar{
background-color: black;
}
.navbar .li {
color: white!important;
text-decoration: none;
}
.navbar .li .a{
text-decoration: none;
}
<!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="stylesheet" href="index.css">
<title></title>
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>Menu</li>
<li>STEEPLE BREWERY</li>
<li>Reservations</li>
<li>Locations</li>
<li>Giftcards</li>
<li>Team</li>
</ul>
</div>
</body>
</html>
1.) li and a elements are no classes, therefore you must not write a dot before them in your CSS selectors:
2.) The color has to be defined for the link, i.e. the a tag, not for the li (the color for that will be overwritten by the link color, even by the default color, if you don't define one)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: url("stock.jpg");
}
.navbar {
background-color: black;
}
.navbar li a {
color: white;
text-decoration: none;
}
.navbar li a:hover {
text-decoration: underline;
color: yellow;
}
<!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="stylesheet" href="index.css">
<title></title>
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>Menu</li>
<li>STEEPLE BREWERY</li>
<li>Reservations</li>
<li>Locations</li>
<li>Giftcards</li>
<li>Team</li>
</ul>
</div>
</body>
</html>
I have written following code. However, i am not getting how to change default blue color of navigation bar. I want the color to be #1E90FF
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.row.content {height: 1500px}
.sidenav {
background-color: #f1f1f1;
height: 100%;
}
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height: auto;}
}
header {background: #1E90FF;color:white;padding: 35px;}
footer {background: #1E90FF;color:white;padding: 15px;}
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>List Of Forms</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body onload="fetchAmounts()">
<script src="prefilledform.js"> </script>
<br>
<center>
<div class="container-fluid">
<header>
<h1>Employee Reimbursement Forms</h1>
</header>
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Forms</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
<br>
<br>
</div>
<div class="col-sm-9">
<h2>Account History </h2>
<div>
<footer>Logged in as: <%out.println(request.getAttribute("name")); %></footer>
</div>
</div>
</center>
</body>
</html>
I am using bootstrap 3. I also want to add effects like hover when i will click on active tab
including this on the page <style></style> tags serves for the per page basis well
and mixing it on two shades gives a brilliant effect like:
<style>
.nav-pills > li.active > a, .nav-pills > li.active > a:focus {
color: black;
background-color: #1E90FF;
}
.nav-pills > li.active > a:hover {
background-color: #efcb00;
color:black;
}
</style>
try this style it will help you...
<style type="text/css">
ul.nav.nav-pills li.active a{
background-color: #1E90FF!important;
}
ul.nav.nav-pills li a:hover{
background-color: #1E90FF!important;
color: #fff;
}
</style>
index.html and style.css are on my local machine to practice coding.
Chrome and Safari are rendering the CSS correctly but FireFox 29 is not. Firefox recognize the css file but it's not rendering it. I've tried on a different machine and still have the same issue.
I've already validated my code and there were no errors. Am I missing any tag that is preventing this from rendering in Firefox?
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<link rel="stylesheet" type="test/css" href="style.css">
<title>Welcome!</title>
</head>
<body>
<div id="pagewrap">
<!-- Top Head of My Page -->
<div id="header">
<nav id="nav">
<div id="socialnetwork">
<img src="./Social_Icons/Linkedin.png" alt="LinkedIn">
<img src="./Social_Icons/facebook.png" alt="FB">
<img src="./Social_Icons/Instagram.png" alt="InstaGram">
<img src="./Social_Icons/Twitter.png" alt="Twitter">
<img src="./Social_Icons/Skype.png" alt="Yelp">
<!-- Icons from Dribble by Dawid Dapszus https://dribbble.com/dashoo-->
</div>
<!-- End of Social Network Links-->
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Resume</li>
<li>About Me</li>
<li>Contact </li>
</ul>
</nav>
</div>
</div>
<!--End of Page Wrap -->
</body>
</html>
body {
font-family:'Century Gothic', sans-serif;
}
a {
text-decoration: none;
}
#pagewrap {
width:950px;
margin: 0 auto;
}
#socialnetwork {
padding-top: 100px;
float:right;
}
#socialnetwork img{
height:30px;
}
#nav ul{
text-align: left;
border-bottom: groove;
}
#nav li{
margin:0 15px 0 0;
display: inline;
}
#nav li a:link{
color:#868686;
}
#nav li a:visited{
color:#868686;
}
#nav li a:hover{
color:#324EDC;
}
#nav li a:active{
color:#324EDC;
}
You are typing the wrong word in Link tag attribute value, you are typing "test/css" instead of "text/css"
Your Tag:
<link rel="stylesheet" type="test/css" href="style.css">
Updated Tag:
<link rel="stylesheet" type="text/css" href="style.css">
type="test/css"
Shouldn't it be: text/css?
Here is the HTML.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<nav class="navbar navbar-inverse">
<div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span> </a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">HOME </li>
<li>ABOUT</li>
<li>WORK</li>
<li>RESUME</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="headline">
<header class="span8">
<h1>Headline goes here</h1>
</header>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
In the CSS, I have nothing about the positioning changed or anything—just colors and spacing and whatnot. I have the .navbar .nav > ul property set to display:box; could that be affecting it?
Let me know if you need more info
Here's the jsfiddle, without bootstrap files: http://jsfiddle.net/6PRhf
Using the following styles will space out the nav bar items, depending on how you want some styles to look you can customize it. But this should be close to what you want hopefully.
CSS File
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255, 255, 255, .75);
border-right: 1px solid rgba(0, 0, 0, .1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
Similar Stack Overflow question
Bootstrap navbar justify / span menu items occupying full width
Fix the navigation bar on the page, use the following
<div class="navbar navbar-inverse navbar-fixed-top">
...
</div>