I have a navigation bar where I have used the bootstrap framework.
I would like to customize that navigation bar, but the bootstrap.min.css is of course impossible to read. I would fx like to change the color, font and transparency on the nav bar. Is there anybody how knows how I could do that? Can I overwrite those part of boostrap css some how? I have looked around on stackoverflow, but there is nothing that solves my problem, even if the question related to this have been up before.
Here is my navigation bar:
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- 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>
<a class="navbar-brand topnav" href="#">Start Bootstrap</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-right">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
<!-- Login Form -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<b>Login</b> <span class="caret"></span>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
Login via
<div class="social-buttons">
<i class="fa fa-facebook"></i> Facebook
<i class="fa fa-twitter"></i> Twitter
</div>
or
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right">Forget the password ?</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
</div>
<div class="bottom text-center">
New here ? <b>Join Us</b>
</div>
</div>
</li>
</ul>
</li>
</ul>
<!-- /.Login Form -->
</div>
<!-- /.container -->
</nav>
The changing of the navbar color is relatively easy if you use the aria role="navigation".
[role="navigation"]{ background-color: #F58C14; }
You've got some bigger picture issues with regard to your bootstrap syntax. You have duplicated
<!-- Login Form -->
<ul class="nav navbar-nav navbar-right">
but you've already opened that <ul class="navbar-right a few lines up above.
You also have got the widths of the columns being specified too high. This will cause collapse issues in BOOTSTRAP when in mobile breakpoints.
Please see this fiddle for what I think you're looking for.
Dropdown side nav with aria css call
Ofcourse you can overwrite those styles provided by default bootstrap. But its very much advisable to overwrite them using another own custom stylesheet. When you do this always make sure your custom stylesheet is called after the bootstrap.css stylesheet.
Next questions comes how do you overwrite these styles and how do we know from which components do these styles come from. There are couple of ways to do it. Either you need to start going through the bootstrap components on their website and get used to the default classes and overwrite them -- or -- you can make use of your browser's Developer Tools (Ctrl + Shift + i in Chrome) to check which is the class which is responsible for the style and overwrite them.
Say now you want to change the navbar background color considering your example, now we know that the background color comes from the class named navbar-default from bootstrap.css. Now all we need to do is overwrite the already existing background-color coming from bootstrap stylesheet to our own color using our custom stylesheet. like so
.navbar-default {
background-color: green;
}
Hope this helps. Fiddle here
Related
I'm new to Bootstrap and I want to have my navbar and footer with the same structure, it means colors and font family mainly, I've took code from Bootstrap themes for each of and from different sources, I've done the navbar part and I now want the footer to be with same structure but I don't understand how to do it.
Navbar part:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
<div class="container" >
<!-- 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>
<a class="navbar-left" href="#"><img src="images/_ressources/logo.svg" height="50px"></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> ACCUEIL </li>
<li> BOUTIQUE </li>
<li> CONTACT </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> MON COMPTE </li>
<li>
<div class="input-group-btn">
<button type="button" class="btn btn-default btn-lg" style="background-color:orange"> <span class="glyphicon glyphicon-lock" ></span> </button>
</div>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recherche un produit">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container -->
</nav>
Footer part:
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 column">
<h4>Information</h4>
<ul class="nav">
<li>Products</li>
<li>Services</li>
<li>Benefits</li>
<li>Developers</li>
</ul>
</div>
</div>
</div>
</footer>
Here's what I want to have :
Thanks for the help !
You could use your own stylesheet, which overrides the bootstrap one. Just put this in the head section
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
To modify or apply additional styling to your web page, simply add the proper code to your custom.css file. There is no need to edit any of the original Bootstrap styles directly.
For example, if you decided that you did not like the rounded corners on the buttons, you could apply the following style in your custom.css file.
.btn {
border-radius: 0px;
}
Now if you add a button to your web page with the default Bootstrap styles (.btn class), the corners aren’t rounded. This is due to the fact that your custom stylesheet overrides the default Bootstrap stylesheet.
source: https://bootstrapbay.com/blog/customize-bootstrap/
I use bootstrap 3 to design my website. I defined a navbar-fixed-top.
I needed to define a div fixed top superposed on the navbar for a search form.
I used z-index (=16777271 to be sure) to put the search div over the navbar.
It works well on my Firefox browser (with any width) but when i try it on my phone, the search div doesn't appear.
Here are some parts of my code :
NavBar :
<div class="navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target="#navbar-rt-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="/toto/"><img src="/toto/img/logo.png" alt="toto" style="max-width:120px; margin-top: -15px;" /></a>
</div>
<div class="navbar-collapse collapse navbar-right" id="navbar-rt-collapse">
<ul class="nav navbar-nav">
<li><i class="fa fa-history"></i></li>
<li><i class="fa fa-user"></i></li>
</ul>
</div>
HTML for search div :
<div class="fixed-search">
<input name="query" value="" id="query" class="form-control" placeholder="Find ..." autocomplete="on" maxlength="255" type="text"/>
CSS for search div :
.fixed-search {
position: fixed;
z-index:16777271 !important;
top: 8px;
height: 35px;
}
.fixed-search-btn {
position: fixed;
z-index:16777270 !important;
top: 8px;
height: 35px;
}
I search for a solution on Google but I didn't find any discussion about this problem.
If someone have a solution to solve this problem or can explain from where it come, I am very interested.
Thank you, Best regards,
Raphael
Here is what I have achieved.
For this just replace your navbar markup along with the input with the code I provided below and also importantly remove your styles you have explicitly applied for fixed-search & fixed-search-btn. All these are unwanted codes. Just replace the navbar code with the below code, bootstrap & font-awesome will take care of the rest across all browsers.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/toto/"><img src="/toto/img/logo.png" alt="toto" style="max-width:120px; margin-top: -15px;" /></a>
</div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group fixed-search">
<input name="query" value="" id="query" class="form-control" placeholder="Find ..." autocomplete="on" maxlength="255" type="text"/>
</div>
<button type="submit" class="btn btn-default fixed-search-btn">Search</button>
</form>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-history"></i></li>
<li><i class="fa fa-user"></i></li>
</ul>
</div>
</div>
</nav>
I found a way to do what I wanted. I defined the problem differently : I want to put the search query in the fixed navbar, out of the sidebar. So my real question was : Can i put an input out of the form ? The answer is Yes. You can define the properties of your input equal to the form id. That's all and it works very well.
Thanks for help anyway !
I just followed the tutsplus lesson on the navbar (https://webdesign.tutsplus.com/courses/bootstrap-3-for-web-design/lessons/the-navbar). As far as I can tell, my code is near enough identical to his, and yet I'm having some problems. If I try to create a button using the element, anything following is pushed to a new line.
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<div class="collapse navbar-collapse" id="example-nav">
<ul class="nav navbar-nav">
<li class="active">Link 1</li>
<li>Link 2</li>
</ul>
This is a button
<p class="navbar-text">Hello!</p>
<form action="" class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
</div>
</div>
Also, nothing happens when I click on the navbar-toggle button at the top, when it should display all of the items on the navbar.
I have been trying to figure out how to fix it for hours and can't come up with a solution. Some people have said you shouldn't use an element within a navbar, but the instructor does and it works fine for him.
I'm really struggling here, can anyone figure it out?
I actually think I've figured it out now, but I'll leave this here so others can learn from my mistake.
As far as I can tell, the problem wasn't in the code, I just wasn't linking my html to jQuery, or the bootstrap javascript (I'm very new to it all).
So I added
<script src="../../../jquery/jquery.min.js"></script>
within my head element (the link to my downloaded jquery, you could also link to the online version) and
<script src="../../../bootstrap/js/bootstrap.min.js"></script>
to my body, just before the closing tag (again, this is my downloaded copy, use your own, or the online version). Everything now runs as I hoped it would.
There's one link that stays up on the top line, next to "search jobs by," in certin screen resolutions of the collapsed navbar. Also, within these same resolutions, the client login continues to work like the "desktop/laptop" client login instead of the mobile login. I'm having this problem with various tablet resolutions only (when width is between 768px and 1023px).
The "State" link, between widths 768px and 1023px, is still on the same line as the "Search jobs by:" text in the collapse navbar, as per the photo I uploaded. Also, the client login dropdown is operating like the expanded navbar version instead of the collapsed navbar version within the 768px and 1023px width range. The picture above shows this weird appearance.
See visual below:
http://www.bootply.com/Cl8RGWpCqv
What's the best way to fix this in bootstrap 3 (Note: I'm using regular css/css3, neither less nor sass)?
<nav class="navbar navbar-default navbar-static-top" 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 collapsed" data-toggle="collapse" data-target="#tusaj-main">
<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 brandmedia" href="#"><img src="img/logo_final.png" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="pspacerv20t spacerh10r">
<div class="collapse navbar-collapse" id="tusaj-main">
<ul class="nav navbar-nav navbar-right">
<p class="navbar-text">Search Jobs By:</p>
<li>State</li>
<li class="divider-vertical"></li>
<li><div class="spacerh80"> Category</div></li>
<li>Post Jobs</li>
<li class="divider-vertical"></li>
<li class="dropdown">
Client Login <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<form class="form-inline no-margin center-block" role="form">
<div class="form-group pspacerv10b pspacerv10t">
<div class="col-sm-5">
<input type="text" placeholder="Username" class="form-control">
</div>
</div>
<div class="form-group pspacerv10b">
<div class="col-sm-5">
<input type="password" placeholder="Password" class="form-control">
</div>
</div>
<!--<div class="form-group pspacerv10b">
<div class="col-sm-6">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div> /-->
<div class="form-group center-block pspacerv10b">
<div class="col-sm-3">
<button type="submit" class="btn btn-success">Sign in</button>
</div>
</div>
</form>
</li>
</ul>
</li>
</ul>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
<div class="tagline col-lg-12">
<p class="taglinealignright pspacerv15t spacerh25r">Search Jobs and Careers: Find Your Ideal Job. 1,000s of New Jobs Daily!</p>
<br />
</div>
</nav>
Demo
I have designed a whole website using Twitter Bootstrap and it works very well for the most part. I have done quite a bit of CSS in the past but had never done a framework like this.
The main problem I have is that when the browser goes under 600px the and the header condenses into a dropdown (which I want) the dropdown goes behind images and some HTML elements such as text input boxes and other dropdown menus.
Is there any way to make this header dropdown menu opaque so that it is in front of every other element? I would provide some code but I am not sure specifically what part of the Twitter Bootstrap stylesheet would be helpful.
<div class="navbar navbar-fixed-top">
<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>
</a>
<a class="brand" href="/">Exployre</a>
<div class="nav-collapse">
<ul class="nav">
<li>Find</li>
<li>Share</li>
<li>Inspire</li>
<li>Discuss</li>
<li>Groups</li>
<li>Profile</li>
<li>About</li>
<li>
<form action="/search" class="navbar-search">
<div>
<input type="text" placeholder="Search" class="search-query pull-right" name="q" size="55" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
I believe all of these classes are straight from the Twitter Bootstrap CSS without modification.
You probably have a z-index on your website content that is a higher value than the z-index defined for the Dropdowns.
If you're using the LESS version of Twitter Bootstrap, open variables.less and find the line containing #zindexDropdown (on line 144). The default setting is 1000, you can change it to a number that is higher than the z-index on your content.
If you're using the normal CSS, it is defined in the rule for .dropdown-menu (on line 2773).