navbar-btn and navbar-toggle issues with Bootstrap - html

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.

Related

customize bootstrap navbar color

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

Div hidden (under) bootstrap navbar

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 !

Bootstrap 3.3.4 navbar issue - positioning

Here is the MarkUp:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Kellumonline
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</li>
<li><a href="tech/index.html">Tech</li>
<li>Gaming</li>
<li>Skate</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Website where the code is currently published on
I have no CSS styling any of the containers or elements. I seriously have like 3 styles:
one is pulling a font from Google,
the second is specifying a width and height for my jumbotron,
the third is specifying the margin for my 3 columns at the bottom of
my home page.
I am working on my website and need some help figuring out why my navbar links are spaced the way they are.
Also, my contact page is not displaying correctly and it has the same code in it as the other pages.
Any help, feedback or constructive criticism is much appreciated.
Thanks
It's very stupid...
The navbar in your contact page has this following class:
class="navbar navbar-incerse navbar-static"
So
Change incerse by inverse
Looking at it, I can see the the Home link and the Tech link don't have their closing </a> tags. Add those in and that should sort it out.
Also, #yenne-info has the correct answer to your Contact page issue.

Bootstrap When lowering resolution navbar overlaps logo and it gets messed up

When I am moving down to tablet resolution from 991px to the phone resolution, my menu items overlap the logo and everything gets messed up. I am still learning Bootstrap so I would need some help with it, I'd like to fix it and make it actually look good.
The worst part is that I will have to make 2 more list items at the end of the navbar, but this has already messed it up.
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mobile-menu">
<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 hidden-xs" id="logo" href="#"><img src="images/Logo.png" alt="Recipe Website"></a>
<center><a class="navbar-brand visible-xs" id="logo-xs" href="#"><img src="images/Logo-xs.png" alt="Recipe Website"></a></center>
</div>
<div class="collapse navbar-collapse" id="mobile-menu">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Recipes
<ul class="dropdown-menu">
<li>Appetizers</li>
<li>Beverage</li>
<li>Bread</li>
<li>Fruit</li>
<li>Meat</li>
</ul>
</li>
<li>F.A.Q</li>
<li>Contact Us</li>
<form class="navbar-form navbar-right" 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>
</form>
</ul>
</div>
</div>
</nav>
Your HTML pasted here looks fine: http://www.bootply.com/I7jobETm52
You should post your custom CSS too. Without seeing it, it's hard to know for sure, but I would bet is has something to do with #logo and #logo-xs which I am guessing you've customized. Do they have set heights/widths/max/min/etc?
If so, remove those, and let the size of the image itself dictate (presumably, that's why you have two sizes). Also position, top, left, could all contribute to this problem if you're using them. First test would be, kill those IDs from the html and if the problem goes away you know where to focus.
Otherwise, try killing the visible-xs/hidden-xs options for test. And finally, try pulling the visible-xs item out of <center> and just put it in a regular div (with class="center-block" if you must).

Using Twitter Bootstrap Header Dropdown

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).