This is my navbar code :
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" 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>
</button>
<a class="brand" href="sampale.html"><font color="#125EAA">Downloads</font></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Browser</li>
</ul>
<div class="btn-group">
<a class="btn dropdown-toggle btn-primary" data-toggle="dropdown" href="#">
Guides
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
<li>User Guide 1</li>
<li>Option 2</li>
</ul>
</div> <!-- dropdown -->
<div class="btn-group">
<a class="btn dropdown-toggle btn-primary" data-toggle="dropdown" href="#">
<span class="caret"></span>
</a>
and this is my css file ( custom.css )
.navbar-inverse .navbar-inner {
background-color: #FFDD00; /* fallback color, place your own */
background-image: none;
background-repeat: no-repeat;
filter: none;
}
Result is :
In the code portion Browser
Browser
the background of the Browser portion still shows the default color ( black ) but I want it to show the background-color of yellow (#FFDD00).Can we fix that part ?
Also , can we edit the btn-primary class in css . I want to change the color of the button.
I had these 2 questions. Any help greatly appreciated ! danke!
For your first question use:
background-color: #FFDD00 !important;
For your second use:
.btn-primary {
background-color: red;
}
Related
Whenever a dropdown item is clicked its color changes to white that makes the white text unreadable.
I've already tried this but the solution doesn't work for me. Here is my snippet
<div class="container-fluid">
<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 asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Demo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Applications<span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-left">
<li>Communications</li>
<li>Environmental</li>
<li>General</li>
<li>Programmable</li>
</ul>
</li>
<li>Product Selector</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" style="background-color:#000;margin-top:15px; border-radius: 0">
<div class="input-group-btn">
<button class="btn btn-default" type="submit" style="background-color:#000;margin-top:15px;border-radius: 0"><i class="glyphicon glyphicon-search" style="color:#fff;"></i></button>
</div>
</div>
</form>
</li>
<li><i class="glyphicon glyphicon-shopping-cart logo-small"></i></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="glyphicon glyphicon-user logo-small"></i></a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a asp-area="Identity" asp-page="/Account/Login">Login</a></li>
<li><a asp-area="Identity" asp-page="/Account/Register">Register</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
I want the background of the active selection to be the same color as the dropdown item background. Thanks in advance!
This is the relevant selector.
Change it to whichever color you need. Updated example
.dropdown-menu > li > a:focus {
background-color: initial; /* Equivalent to background-color: transparent */
}
Bootstrap applies focus classes. You will need to override those as well.
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
/* Your styles here. */
}
But you've done it with the following CSS selector, .nav.navbar-nav li a:hover. Add to the selector you already have (if you want the same styles for hover and focus) for :focus.
.nav.navbar-nav li a:hover,
.nav.navbar-nav li a:focus {
/* Your existing styles. */
}
FWIW, the link to the other StackOverflow post you have is related to the Navbar, not Dropdowns.
I would like to know how to make an image fit bootstrap navbar height (proportionally), here's a descriptive image:
Any idea?
I'm using this structure:
<nav class="navbar navbar-default">
<divclass="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
If you're simply trying to adjust the size of an image to correspond to the height of a default navbar (min-height: 50px), simply use the below CSS as a base depending on how you want the image to fit.
In this example, the image will cover it's part of the navbar completely.
See working Snippet.
body {
padding-top: 70px;
}
.navbar.navbar-inverse {
border: none;
}
.navbar .navbar-brand {
padding-top: 0px;
}
.navbar .navbar-brand img {
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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="#">
<img src="http://placehold.it/350x150/f00/fff">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<img src="http://placehold.it/350x150/f00/fff" />
<h4>The Same Image At Full Scale</h4>
</div>
in a previous project of mine I also encountered some issues with this. Here is how I solved the problem:
HTML:
<nav id="myNavbar" 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" class="smoothScroll"><img src="img/logo.png" ondragstart="return false;" alt="logo"/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" >
<li>
<a>Menu Item1</a>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container -->
</nav>
And the CSS for it:
.navbar-fixed-top {height: 40px;}
.navbar-brand img {height: 40px;}
So setting the navbar and the logo-image to the same height (and not giving it width, thus it will be automatically adjusted) solved the problem for me with good positioning. Two possible cases:
you want a fixed navbar:
.navbar-brand img {position:fixed;right:0;top:0}
you want a header on top:
.navbar-brand img {position:absolute;right:0;top:0}
In both cases I set it to top-right corner of the site, but you can adjust that easily. So the key is: same height navbar and image, with the image positioned well. (Then margin-padding or exact position of the image can easily be set in CSS)
Hope it helped,
Andrew
EDIT: Regarding fixed navbar please check the Bootstrap documentation (it has built-in class like navbar-fixed-top and such).
I'm trying to make my navbar semitransparent on this code but I'm not able to do it:
<nav class="navbar navbar-default navbar-fixed-top transparent" >
<div class="container">
<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">
<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">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>Searches</li>
<li>Contact</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Legal <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Terms</li>
<li>DMCA</li>
<li>RTA</li>
<li class="divider"></li>
<li>Contact</li>
Try this in your code, it worked for me -
give an id to the nav
like this-
<nav class="navbar navbar-default navbar-fixed-top transparent" id="nav1">
Then apply this in your css-
#nav1
{
background-color:#F00; /*whichever you want*/
opacity: 0.5;
filter:(opacity=50);
}
in your bootstrap.css find the navbar you are using, for example, if you're using the default navbar search for .navbar-default or .navbar-inverted as per your case and set the opacity simply using the CSS opacity command.
Did the job for me.
It would be nice to see the orginal CSS.
Paste the css code that shows the opacity.
The way I see your problem I think you did not write the path correct enough so it doesn't overwrite the original css from bootstrap.
<div id="wrapper">
<div class="container">
<div class="nav">
<p>tessssssssssssssst</p>
<div>
</div>
</div>
#wrapper .container .nav{
background-color: red;
opacity: 0.3;
}
#wrapper .nav {
opacity: 1.0;
}
http://jsfiddle.net/7h4hrvhu/
I want to change the background color of my active link to orange in the header. I am using bootstrap and not sure how would I do that. I trield using
ul.nav a:active {
color: orange !important;
}
but that didnt work... any idea? below is my code
<style>
div.navbar.navbar-inverse.navbar-fixed-top{
background-color: #f1f1f1;
border-color: #f1f1f1;
}
</style>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My-H</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
you have <li class="active">Home</li>,your active link (<a> tag) is placed in a <li> tag with active class.so try using this css instead :
ul.nav li.active a {
color: orange !important;
}
I have this Bootstrap head menu, and i want the Login anchor, allways on the right, after the UL nav, and collapsed button.
I've tried a .pull-right on that, but didn't work.
<header id="main-header">
<nav class="navbar navbar-default navbar-custom 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>
<a class="navbar-brand" href="#">
<img alt="Logo" src=""></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul id="nav" class="nav navbar-nav nav-pills navbar-right">
<li>home</li>
<li class="dropdown">link2</li>
<li class="">link3</li>
<li class="">link4</li>
<li class="">link4
<ul class="dropdown-menu">
<li>sublink</li>
<li>sublink2</li>
</ul>
</li>
</ul>
<a href="#" class="btn btn-primary">
Login</a></div>
</nav>
</header>
Because there's problem with jsfiddle currently, I'll paste modified code here:
<header id="main-header">
<nav class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="pull-right">
<a id="rightAnchor" href="#" class="btn btn-primary">
Login</a>
</div>
<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>
<a class="navbar-brand" href="#">
<img alt="Logo" src=""/></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul id="nav" class="nav navbar-nav nav-pills navbar-right">
<li>home
</li>
<li class="dropdown">link2
</li>
<li class="">link3
</li>
<li class="">link4
</li>
<li class="">link4
<ul class="dropdown-menu">
<li>sublink</li>
<li>sublink2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
Firsltly, you're missing one closing div, just before the nav closing tag. Next, I've added div with pull-right class just before button in navbar-header. Finally, add some margins so that login anchor would look same as menu:
#rightAnchor {
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
}
UPDATE: I did not check how it behaves when we have different resolution. How about this: we create 2 login anchors and controll theirs appearance with media queries? With this HTML would look like this:
<header id="main-header">
<nav class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div id="rightAnchorMobile" class="pull-right">
<a href="#" class="btn btn-primary">
Login</a>
</div>
<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>
<a class="navbar-brand" href="#">
<img alt="Logo" src=""/></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<div id="rightAnchor" class="pull-right">
<a href="#" class="btn btn-primary">
Login</a>
</div>
<ul id="nav" class="nav navbar-nav nav-pills navbar-right">
<li>home
</li>
<li class="dropdown">link2
</li>
<li class="">link3
</li>
<li class="">link4
</li>
<li class="">link4
<ul class="dropdown-menu">
<li>sublink</li>
<li>sublink2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
And CSS:
#media screen and (min-width:768px) {
#rightAnchorMobile {
display: none;
}
}
#media screen and (max-width: 768px) {
#rightAnchor {
display: none;
}
}
#rightAnchorMobile > a {
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
}
#rightAnchor > a {
margin-top: 8px;
margin-left: 15px;
margin-bottom: 8px;
}