I'm testing the bootstrap navbar and how I do not know much about styles. When I click the icon, a dotted frame appears outside the image boundary, as follows:
image result
I know this is related to the page style, but do not know how to solve. Below is the exact code I'm using:
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="lib/img/mig.png">
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
</button>
<h1 class="navbar-header" href="#">Home</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
<br>
<ul class="nav nav-pills navbar-right">
<li class="active">
Home
</li>
<li class="">
About
</li>
<li class="">
Contact
</li>
<li class="">
Maps
</li>
</ul>
</br>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<body>
</body>
</html>
This wheel is standard browsers to "links"
To resolve you have two options
- Include it in your tag
a: active {
outline: none;
}
Include a height with the same height as your image
.navbar-brand {
height: 60px;
}
Helped?
Try to add this rule in your css file
a {
outline: none;
}
source: css tricks
The first posted answer may solve the problem, but it would also affect every anchor tag on the page, which seems a bit overkill.
I'd suggest this instead:
.navbar .navbar-brand:focus {
outline: none;
}
Related
HTML
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
Top
Middle
Bottom
<ul id="navigation_bar">
<li id="top">Top</li>
<li id="middle">Middle</li>
<li id="bottom">Bottom</li>
</nav>
</div>
CSS
#top, #middle, #bottom {
height: 600px;
width: 200px;
background: green;
text-decoration: none;
}
body {
padding-top: 70px;
}
I added the 'fix to top' HTML code provided by this link: https://getbootstrap.com/components/#navbar
Can someone tell me why my nav bar ceased to function after I did this?
Thank you
After looking more into this, your HTML doesn't make very much sense.
The way I see it is:
<ul id="navigation_bar">
<li id="top">Top</li> // <-- <a> tag with a meaningless href and no innerText
<li id="middle">Middle</li>
<li id="bottom">Bottom</li>
</ul>
My only guess is that you are trying to use the above code as your content sections?
In which case, you would need to move your closing </nav> tag above that code to look like so:
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
Top
Middle
Bottom
</nav>
<ul id="navigation_bar">
<li id="top">Top</li>
<li id="middle">Middle</li>
<li id="bottom">Bottom</li>
</ul>
</div>
Your code is a little confusing, not sure why there are two sets of links. I usually use the nav from http://getbootstrap.com/examples/starter-template/ instead of https://getbootstrap.com/components/#navbar. I believe it's the same thing with more detailed code where the ellipses are on your link. Here is a nav using most of your code based on the template from my link.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
#top, #middle, #bottom {
height: 600px;
width: 200px;
background: green;
text-decoration: none;
}
body {
padding-top: 70px;
}
</style>
</head>
<body>
<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>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li id="top" class="active">Top</li>
<li id="middle">Middle</li>
<li id="bottom">Bottom</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
I'm trying to change the navbar's background color to blue and the links color to white. I am not able to change the links on the navbar to white. I'm not doing something right. Not sure what. Appreciate the help!
.navbar-default {
background-color: #2196f3;
}
.navbar a{
color:white;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap/css/index.css">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Home</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li>Shop</li>
<li>Drive</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Zipcode</li>
<li>Help/FAQ's</li>
<li>Conatct us</li>
</ul>
</div>
</nav>
<script src = "js/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
You need to be more specific with your CSS rules. See Specificity
Working Example:
.navbar.navbar-default {
background-color: #2196f3;
}
.navbar.navbar-default ul > li > a,
.navbar.navbar-default .navbar-brand {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<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="#">Home</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-left">
<li>Shop
</li>
<li>Drive
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Zipcode
</li>
<li>Help/FAQ's
</li>
<li>Conatct us
</li>
</ul>
</div>
</div>
</nav>
Bootstrap have many default style.
You code is not working is because bootstrap override your css(same as #Kirito mention).
You can change css to this, it work:
.navbar div{
background-color: #2196f3 !important;
}
.navbar a{
color:white !important;
}
However, better solution is customize your bootstrap. link: http://getbootstrap.com/customize/
This approach will get cleaner code and less problem
Remove the .navbar a rule set and add:
/* change brand text color */
.navbar-default .navbar-brand
{
color:white;
}
/* change list links text color */
.navbar-default .navbar-nav > li > a
{
color:white;
}
You need to be more specific about your selectors or other selectors (defined in bootstrap's CSS) will apply as they are likely more specific
This is all better explained in the specificity rules
See sample code below.
nav.navbar-default {
background-color: #2196f3;
background-image: none;
}
nav.navbar-default .navbar-brand,
nav.navbar-default .navbar-nav>li>a {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-fixed-top navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Home</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li>Shop
</li>
<li>Drive
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Zipcode
</li>
<li>Help/FAQ's
</li>
<li>Conatct us
</li>
</ul>
</div>
</nav>
</html>
No matter how many times I've changed my folder and file names, made sure they are relative paths, etc., I can't seem to have my background image appear in my Jumbotron.
I just want it to show up behind in my Jumbotron DIV, but it's not.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mock Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style1.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- LOGO -->
<div class="navbar-header">
<!-- BUTTON FOR MENU ITEMS AS IT SHRINKS -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Mock Website
</div>
<!-- COLLAPSE MENU ITEMS -->
<div class="collapse navbar-collapse" id="mainNavBar">
<!-- MENU ITEMS -->
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li>ABOUT</li>
<!-- DROP DOWN MENU -->
<li class="dropdown">
PORTFOLIO <span class="caret"></span
<ul class="dropdown-menu">
<li>PHOTOS</li>
<li>VIDEOS</li>
<li>MUSIC</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</div> <!-- Container Fluid -->
</nav> <!-- Nav -->
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">View navbar docs »</a>
</p>
</div> <!-- CONTAINER -->
</div> <!-- JUMBOTRON -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Here's my CSS:
/* NAVBAR */
.navbar {
margin-bottom: 0px;
border-radius: 0px;
}
/* JUMBOTRON */
.jumbotron {
background-color: ;
background-image: url("/images/blue.jpg");
background-repeat: no-repeat;
background-size: cover;
color: #FFF;
}
.dropdown li {
text-align: right;
}
Change and condense your CSS from background-image to just background to keep things nice and clean.
e.g. background: url(/images/blue.jpg) cover no-repeat;
The code itself looks functional though. Is image in the same directory? Perhaps reviewing this post will help: Links not going back a directory?
Check the permissions on the folder where the images are being stored. Your code is correct, check this working fiddle with an external image url working perfectly:
/* NAVBAR */
.navbar {
margin-bottom: 0px;
border-radius: 0px;
}
/* JUMBOTRON */
.jumbotron {
background-color: ;
background-image: url("http://vignette2.wikia.nocookie.net/p__/images/0/0c/Superman%27s_classic_pose.png/revision/latest?cb=20131218234907&path-prefix=protagonist");
background-repeat: no-repeat;
background-size: cover;
color: #FFF;
}
.dropdown li {
text-align: right;
}
<!-- LOGO -->
<div class="navbar-header">
<!-- BUTTON FOR MENU ITEMS AS IT SHRINKS -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Mock Website
</div>
<!-- COLLAPSE MENU ITEMS -->
<div class="collapse navbar-collapse" id="mainNavBar">
<!-- MENU ITEMS -->
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li>ABOUT</li>
<!-- DROP DOWN MENU -->
<li class="dropdown">
PORTFOLIO <span class="caret"></span
<ul class="dropdown-menu">
<li>PHOTOS</li>
<li>VIDEOS</li>
<li>MUSIC</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</div> <!-- Container Fluid -->
</nav> <!-- Nav -->
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">View navbar docs »</a>
</p>
</div> <!-- CONTAINER -->
</div> <!-- JUMBOTRON -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
The navbar doesn't align properly to the left and right-hand margin of my website. I am using Bootstrap's 'pull-left' & 'pull-right' functions.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Microbiology Bootstrap!</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>Contact</li>
</ul>
<ul class="pull-right">
<li>By Industry</li>
<li>By Matrix</li>
<li>By Vial</li>
<li>All Studies</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Microbiology <br>Bootstrap</br></h1>
<p>Find the validation study you need. <br>Search by industry, matrix or vial.</br></p>
Learn More
</div>
</div>
CSS:
.nav {
background-color: #efefef;
}
.nav a {
color: #5a5a5a;
font-size: 12px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
Illustration:
Home | Contents By Industry | By Matrix | By Vials etc
Microbiology
Bootstrap
Any help would be greatly appreciated!
Since you are already loading bootstrap, you can achieve the same thing by using bootstrap's navigation. You will need two classes navbar-left and navbar-right on navbar's ul. Here is a sample code taken from bootstrap's documentation.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li class="active">Link</li>
<li>Link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You will have to add classes accordingly to your code. Add navbar class to the div having class nav.
Use navbar-left , navbar-right instead of pull-left and pull-right
Using the following code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
div[class^='span'] {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<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>
</a>
<a class="brand" href="#">Bootstrap Test</a>
<ul class="nav pull-right nav-collapse collapse">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="containter-fluid">
<div class="row-fluid">
<div class="span12">
<h1>Hello, world!</h1>
</div>
</div>
<div class="row-fluid">
<div class="span2">2</div>
<div class="span10">10</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I get the following:
Yet, in the example on the Bootstrap site, all of its collapsed links form a vertical list. Any ideas on what I'm doing wrong?
EDIT: Taking .pull-right out of the nav <ul> and replacing it with <div class="span8"> solved some of it. Unfortunately, it looks like my .brand element is causing some issues.
If I shrink my browser to the point where the collapsable nav button is next to my .brand, the links below don't form a list:
If I shrink the browser so the links form a list, then the button pops below the .brand:
Is there a way to keep the button on the same line as the .brand and force the links below to form a vertical list?
From the looks of your code, you are missing a very important piece of code in there.
You need to link bootstrap-responsive.css or bootstrap-responsive.min.css
Additionally, this is what your menu should look like:
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<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>
</a>
<a class="brand" href="#">Bootstrap Test</a>
<div class="pull-right nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
You must be using inline-block or float:left.
If so then remove float and use display:block