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).
Related
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
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.
I am trying to use the Boostrap 3 grid system. I have a navigation header that i'm trying to customize in the regular desktop screen resolution. The columns work fine until I size the screen down to about 1200px wide. Then the left two links - a button and a regular link start stacking. I don't know how to resolve this. When I change the column sizes the middle column menu links start stacking which I don't want either. I feel like I am missing something really basic here. And I am a newbie in advance so my apologies for lack of knowledge in certain areas.
The live link is here:
http://www.splashdesignstudios.com/template/template3.html
You can use the navbar bootstrap and the collapse plugin.
<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">
<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="Brand" src="img/mocklogo.png" style="height: 100%;">
</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">Link1 <span class="sr-only">(current)</span></li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
<li>Link6</li>
<li>Link7</li>
</ul>
<form class="navbar-form navbar-right">
<span class="fa fa-sign-in"></span>Login
<button type="submit" class="btn btn-custom"><span class="fa fa-search"> </span>Sign Up</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You can change the appearance just by changing the bootstrap-css. You can find some themes at the bootswatch.
Check this link to see how it's working. In this example, I'm using the Paper theme.
Hope it's useful!
Specifying fixed width classes to three columns gives less width to last column once your screen size reduces. I would divide the header into two columns (both with display: table-cell and vertical-align: middle) with first one containing the logo and menu and second one containing the buttons. However, to make it act properly under 1200px, you will need to use media queries and adjust the styles for every element accordingle.
I have a simple navigation bar fixed to the top of my page which can be seen here but I cannot for the life of me figure out how to change the background color. I've tried editing the a:hover code in the Bootstrap CSS files as well as overriding it in my own custom CSS file using all sorts of different class calls, but still no luck. Can anybody help me out? I know it has to be something simple, I'm just stumped.
Here's my HTML code for the navbar:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<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="index.html">Homegrown</a>
<div class="nav-collapse">
<ul class="nav nav-pills pull-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul><!-- /.nav -->
</div><!--/.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
The nav bar background is styled under .navbar-inner. An easy way to figure out what element has what style is to use debugging tools like chromes inspector (under view > developer > developer tools) or firebug for firefox (http://getfirebug.com/)
If you're using Sass or Less, you can customize these variables from _navs.scss:
//== Pills
$nav-pills-border-radius: $border-radius-base !default;
$nav-pills-active-link-hover-bg: $component-active-bg !default;
$nav-pills-active-link-hover-color: $component-active-color !default;
You can find the corresponding less values and file.
Here's the docs: http://getbootstrap.com/customize/#navbar
However, the source is much easier to follow for this sort of customization.
I'm using twitter bootstrap and I see the image below when I reduce the width of the browser window to a certain size. However, when I click on it and nothing happens. I normally have 2 elements there but can't see them when I width is too small. How do I fix this by either removing the button from showing or have the button show but then show the 2 items on click?
To stop the button from displaying, you may add below code to your css:
.navbar .btn-navbar{
display:none;
}
Additionally , you may go through this article for more information and help..
Make sure you have responsive bootstrap css and the collapse javascript plugin per the bootstrap documentation:
Heads up! The responsive navbar requires the collapse plugin and
responsive Bootstrap CSS file.
Also here is an example of it working (has bootstrap responsive css and bootstrap js referenced):
http://jsfiddle.net/ZdVcg/
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<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>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="active">Home
</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
</div>