HTML- I want to change "One Million Lines" to white
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">One Million Lines</a>
</div>
Custom.CSS
1. This is what I tried but it did not work
2. I have 2 css files in cascading order: bootstrapmin.css and custom.css
3. Code below is used to change color of "One Million Lines" in bootstrap.css
4. I want to use custom.css to change the color
.navbar-inverse .btn-link {
color: white;
}
Keep below line in custom.css file which should be loading after bootstrapmin.css file
.navbar-inverse .navbar-brand {color: white; }
Try to write a more specific selector:
.navbar .container .navbar-brand {
color: white;
}
Related
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 4 years ago.
I have tried text-decoration: none; and everything else but nothing is taking the underline off the link. Here is my current html and css:
nav-wrapper .navbar-header a h3 {
color: #fff;
font-weight: 200;
margin-top: 10px;
letter-spacing: 4px;
}
.nav-wrapper .navbar-header a :hover,
.navbar-header a :focus {
text-decoration-line: none !important;
color: #506C69;
}
<body data-spy="scroll" data-target=".navbar-fixed-top" data-offset="65">
<header>
<nav class="navbar company-top-nav navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="nav-wrapper">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#company-menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html">
<h3>Some Text</h3>
</a>
</div>
This is just a typo. Remove the space between the element and the state in your CSS:
nav-wrapper .navbar-header a h3 {
color: #fff;
font-weight: 200;
margin-top: 10px;
letter-spacing: 4px;
}
.nav-wrapper .navbar-header a:hover,
.navbar-header a:focus {
text-decoration-line: none !important;
color: #506C69;
}
<body data-spy="scroll" data-target=".navbar-fixed-top" data-offset="65">
<header>
<nav class="navbar company-top-nav navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="nav-wrapper">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#company-menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html">
<h3>Some Text</h3>
</a>
</div>
I have a Bootstrap Navbar, that I am trying to have set as simply a hamburger for the entire window except when it stretches out to about 700px (when it can show all the nabber drop downs without stacking). This works until about 400px, at which point the 'home' button and 'hamburger' seem to shift closer to the middle of the nabber, and dont drop down properly. I have tried using a pull-left and pull-right class for each but that leaves them where they are. My nav bar is as such:
<nav 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="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Home</a>
</div>
with the following CSS:
#media (max-width: 1200px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}
.navbar-header {
float:none;
}
Try to remove the container inside the nav element. see the bootstrap examples there is a container where the two iems are closer to the middle...
I've seen some similar q's but the solutions weren't working possibly because I'm using bootstrap. The body of my page is a gradient of two colors running vertically. The header is fixed and should be adopting the corresponding color of the gradient. Thus I made it transparent. I would like to hide all elements going under the header.
html
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1 id="home-h1">title</h1>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">navitem</li>
<li>navitem</li>
</ul>
</div><!--/.nav-collapse -->
</div>
css
body {
background: -webkit-linear-gradient(#99DAD2, #FEECA4);
background: linear-gradient(#99DAD2, #FEECA4);
}
.navbar-default {
/* navbar background color */
background-color:transparent;
}
I past over an afternoon to search an answer at my issue. I'm still blocked with that. I'm unable to change the height of the navbar in my /dist/css/bootstrap.css file.
I found a lot of topics who deals about this problem but any of them allow me to pass through my problem.
I have the feeling that any modifications I've done in my bootstrap.css do nothing. But when I tried to remain the script who include bootstrap in my index.php this does a major effect, so I know that bootstrap is successfully loaded.
Then I tried to modify some lines in bootstrap.css in order to test what does effect :
.navbar-nav > li > a, .navbar-brand {
padding-top:4px !important;
padding-bottom:0 !important;
height: 28px;
}
.navbar {min-height:28px !important;}
I changed the height value.
The div class I use in my html code :
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Medieval Fields</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
What I load in my head :
<link href="../bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
CSS.
Use the C. The Cascading portion of the acronym refers to the fact that linking another style-sheet after bootstrap will overwrite the bootstrap values.
As Abhitalks pointed out. Sorry just saw that.
Only 2 of my three icon-bars show when I resize my browser. Previous answers show that people have not put their icon-bars in the right nav tag, however I have done this and it is all correct. My website is viewable here, but here is my code for header.php too:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="logo">
<a href="http://http://www.franhaines.co.uk/paddlethewye/"/> <img src="wp-content/themes/BareTheme/logo.png" alt="Paddle the Wye Logo" border="0" /></a>
</div>
</div>
I found this rule on your page:
span {
color: #fff;
display: block;
font-family: centrale_sans_regularregular,helvetica;
font-size: 30px;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
z-index: 80;
}
from bootstrap.
The position absolute is breaking it; override position to be static or unset for span.icon-bar and it'll fix it.
You overide the bootstrap styles with your own stylesheet.
You must remove or specify your code (http://www.franhaines.co.uk/style.css) like so:
span:not(.icon-bar) {
color: #fff;
font-family: centrale_sans_regularregular, helvetica;
font-size: 30px;
z-index: 80;
position: absolute;
display: block;
top: 50%;
text-align: center;
width: 100%;
}
Same Code Works Fine For Me.
<link href = "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel = "stylesheet">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="logo">
<a href="http://http://www.franhaines.co.uk/paddlethewye/"/> <img src="wp-content/themes/BareTheme/logo.png" alt="Paddle the Wye Logo" border="0" /></a>
</div>
</div>
Demo Here
Note: Bootstrap CSS from Here