I'm trying to make a custom header for my website using boostrap navbar class, I'd like to change the links text color to white, the navbar background color to black and also change the links highlight color when the mouse goes over them.
Here is my html:
<html>
<head>
<meta charset="UTF-8" />
<!-- css files -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="main.css">
<!-- javascript -->
<script src="jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!-- webiste header -->
<nav class="navbar navbar-default navbar-fixed-top header">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>link1</li>
<li>link2</li>
</ul>
</div>
</div>
</nav>
<body>
<html>
and here is my css:
.header{
background-color:#333333;
color:red;
font-size:1.5em;
}
.header li{
border-bottom:3px solid #333333;
}
.header li:hover{
background-color:black;
border-bottom:3px solid orange;
}
Everything seems to work but the links color is grey instead of white as you can see on this screenshot.
screenshot
.header a {
color: #fff;
}
.header a:hover {
color: #f00;
}
Related
Need some help getting my background image to display on my page.
I'm having trouble getting it to work and I can't figure out why because to me it seems like I spelled everything correctly. Any help would be appreciated.
HTML
'<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<div class="pageOne">
</div>
<body>
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
</body>
</html>'
CSS
'body{
background-color: white;
}
.nav-pills{
font-family:Orbitron;
font-size: 1.7em;
background-color: black;
};
.pageOne{
background: url("../images/mountains.jpg");
};'
Your <div> is empty, which means that it is 0px tall (there needs to be some content to force it to "expand"). Try setting the height explicitly in your CSS.
.pageOne {
height: 100px; /* or whatever height you want */
background: url("../images/mountains.jpg");
};'
.pageOne is an empty div. Your current content is in your <body> tags. If you put the background on your body instead, it would appear. A div shouldn't be outside the body tag anyways. If you leave your div outside of the body, it could render faulty.
Checkout this example
You made several mistakes in your html and css
pageOne is empty put some content in it or you can give height of that div from css
don't add ; semicolon like this .pageOne{}; remain part of css will not execute
Hope this will helps you
body{
background-color: white;
}
.nav-pills{
font-family:Orbitron;
font-size: 1.7em;
background-color: black;
}
.pageOne{
background: url("http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1-600x319.gif");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 100px;
width: 100%;
text-align: center;
}
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<div class="pageOne">
hi
</div>
<body>
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
</body>
</html>
Kind of a peculiar thing happening here...
I'm using ASP.NET in Visual Studio 2015. When I add custom CSS within a <style> tag in the header of my HMTL document, my CSS will override Bootstrap's CSS, but when I reference my CSS in an external .css file it does not... Here is my code (the CSS in the style tag is the exact same as what's in the external css sheet):
<head runat="server">
//BOOTSTRAP CSS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<%--<link rel="stylesheet" href="App_Code/MainStyleSheet.css" type="text/css" />--%>
//UNCOMMENTING THIS WILL NOT OVERRIDE BOOTSTRAP CSS
<style>
//THIS CSS WILL OVERRIDE BOOTSTRAP CSS
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
border-radius: 0px !important;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">X.com</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Projects</li>
<li>Contract</li>
</ul>
</div>
</div>
</nav>
</body>
All searches on Google for a resolution say that putting my .css link underneath the Boostrap CSS links should override it, but that's what I've tried and it's not working. Any suggestions?
Move your MainStyleSheet.css file outside your App_Code folder. App_Code folder has a default Compile build action instead of Content.
Try and wrapping your html code inside a div and give it a class/id and try to override with that wrapping div.
HTML:
<div class="wrapping_class">
<nav class="navbar navbar-default">
</nav>
</div>
CSS:
.wrapping_class .navbar.navbar-default{
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
border-radius: 0px !important;
}
This is a solution based on CSS specificity that plays a role in overriding certain CSS rules based on their power.
Refer to this link for table of specificity values (for Star Wars fans a treat):
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
I've seen a few examples that try to center the Bootstrap navbar but I can't get any of them to work. I've tried style="text-align:center" on the nav, div and ul but it doesn't have any effect.
Any ideas what I'm doing wrong?
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav nav-pills">
<li><a role="presentation" href="#">Link1</a></li>
<li><a role="presentation" href="#">Link2</a></li>
<li><a role="presentation" href="#">Link3</a></li>
<li><a role="presentation" href="#">Link4</a></li>
</ul>
</div>
</nav>
</div>
</body>
</html>
https://plnkr.co/edit/EDf9leSPZVoS4l9dQCfv?p=preview
The problem is that ur "nav nav-pills li" have a default "float:left" in ur css. That makes that ur text-align never work because float will always overwritte any other text properties.
One way to fix this is copying the next declarations in ur css file:
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
text-align: center;
}
.nav-pills>li {
float: none !important;
display: inline-block;
}
Hope this works
.nav {
padding-left: 0px;
margin-bottom: 0px;
list-style: none;
display : table; // Add this
margin: auto; // Add this
}
Add last two css styles in bootstrap 3963 no line.
https://plnkr.co/edit/HAvko7diBJvtZRB5Vuxn?p=preview
I add this menu in bootstrap.
i wanted them to display in the following ways:
case-1: If menu get drop down then display text color white,
background-color green.
case-2: if any menu option is hovered then, reverse their colors in
hover effect.
But the <a> tags are not getting the colors that i define in a class 'menu' for <ul> under which all <a> tags reside.I want to change their color in way so that other <a> tags outside of menu won't change their style.
Please check image given below:
please suggest me on fixing this problem.
Here is the source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style media="screen" type="text/css">
.menu{
background-color:#4da309;
color: #FFFFFF;
font-size:20px;
}
</style>
</head>
<body>
<div class="container" >
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:24px;">
File Menu<span class="caret"></span>
</a>
<ul class="dropdown-menu menu">
Text gets Correct color
<li>Text gets Correct color Information wrong color</li>
<li>Information wrong color</li>
<li>Information wrong color</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
please let me know if any further information is required.
Thanks :)
You need to target the "a tag" inside the Ul > Li.
As for the hovering state, just add a ":hover" to whatever you're trying to give a custom hover state CSS to.
<style media="screen" type="text/css">
.menu{
background-color:#4da309;
color: #FFFFFF;
font-size:20px;
}
.menu li a{
color: #FFFFFF;
}
.menu li a:hover{
color: #000000;
}
</style>
Put this in your CSS so that <a> tags outside of menu won't change their style:
.menu li a{
background-color:#4da309;
color: #FFFFFF;
font-size:20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style media="screen" type="text/css">
.menu{
background-color:#4da309;
color: #FFFFFF;
font-size:20px;
}
.menu li a{
background-color:#4da309;
color: #FFFFFF;
font-size:20px;
}
</style>
</head>
<body>
<div class="container" >
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:24px;">
File Menu<span class="caret"></span>
</a>
<ul class="dropdown-menu menu">
Text gets Correct color
<li>Text gets Correct color Information wrong color</li>
<li>Information wrong color</li>
<li>Information wrong color</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
The problem is that bootstrap overrides your CSS because its selector is more selective:
.dropdown-menu > li > a {
color: #333;
}
If you want to override bootstrap, you need to take precedence over the bootstrap selector (after the inclusion of bootstrap.css):
.dropdown-menu > li > a {
color: #FFFFFF;
}
Your should learn how CSS precedence works, here is a good article (maybe you'll understand why CSS is called CSS!).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style media="screen" type="text/css">
.menu{
background-color:#4da309;
color: #FFFFFF;
font-size:20px;
}
.menu a{
color: #FFFFFF !important;
}
.menu a:hover{
color: #4da309 !important;
}
</style>
</head>
<body>
<div class="container" >
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:24px;">
File Menu<span class="caret"></span>
</a>
<ul class="dropdown-menu menu">
Text gets Correct color
<li>Text gets Correct color Information wrong color</li>
<li>Information wrong color</li>
<li>Information wrong color</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
You need to bind a hover event on ".dropdown-toggle". For example
if($("."dropdown-menu").is(':visible')){
var anchor = $(this).find("a");
anchor.addClass("greenText"); // Add your css style in this class
anchor.hover(function(){
$(_this).addClass("whiteText") // Add hover css style
}, function(){
$(_this).addClass("greenText") // Add hover css style
})
}
I cannot figure out why the container-fluid div in my body has a grey background on top nor how to get rid of it. I'm assuming it's something that bootstrap is adding.
I was able to get rid of it with
container-fluid *{
background-color:#fff;
}
but then that caused problems with the button background of the jumbotron.
<!doctype html>
<html>
<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">
<title>Resuarant Name</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/custom.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<nav class="navbar navbar-right">
<div class="container">
<ul class="menuItems">
<li>Menu</li>
<li>Reservations</li>
<li>Reviews</li>
<li>Photos</li>
</ul>
<form id="searchForm">
Search
<input type="text" name="search"><br/>
</form>
</div>
</nav>
<nav class="navbar-header">
<div class="container">
<ul class="mainMenu">
<img id="logo" src="images/logo001.png"/>
<li>Home</li>
<li>History</li>
<li>Recipes</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</body>
</html>
css:
.menuItems{
display:inline-block;
list-style:none;
float:right;
}
.menuItems li{
float:right;
padding: 0 10px;
}
#searchForm{
float:right;
}
#logo{
float:left;
max-height:80px;
padding-left:200px;
}
.mainMenu{
float:left;
width:100%;
margin-right:auto;
margin-left:auto;
padding:20px 50px;
border-top:dotted thin;
border-bottom:dotted thin;
}
.mainMenu li{
display:inline-block;
float:right;
padding: 20px 25px;
}
.welcomePost *{
}
.jumbotron *{
float:right;
padding: 0 150px;
}
Grey background is coming from jumbotron which is its default color just change jumbotron color like this
.jumbotron {
background-color: // whatever color you want or you can also make it "none"
}
For more on Jumbotron: https://getbootstrap.com/