I have been developing a webpage with bootstrap along with some additional styles. The problem is that the navbar is not collapsing in the mobile view. I think that my multiple css files are overlaping.
Can anyone suggest me the appropriate changes?
Thanks in advance.
My html and css codes are here
Try the below solutions
1.Did you include bootstrap.min.js file in your page.
Add below in your file footer and try.
<script src="js/bootstrap.min.js"></script>
OR
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
2.just try change order of loading css files, load your custom css first and bootstrap last.
3.Inspect Page and check for errors(If any path misses make them correct.)
*Include "JQuery" if you miss this. Because Bootstrap JS Needs JQuery for proper working. Must load above bootstrap js.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
Here is the working code:
<div class="navbar navbar-default navbar-fixed-top" role="navigation" data-0="line-height:100px; height:100px; background-color:rgba(0,0,0,0.3);" data-300="line-height:60px; height:60px; background-color:rgba(0,0,0,1);">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="fa fa-bars color-white"></span>
</button>
<h1><a class="navbar-brand" href="index.html" style="line-height:50px" data-0="margin-top:20px;" data-300="margin-top:5px;">GrocShop
</a></h1>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" data-0="margin-top:20px;" data-300="margin-top:5px;">
<li class="active">Home </li>
<li>Team
</li>
<li>Careers
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</div>
Here is the JSFiddle demo of your code
(hide the Result span of JSFiddle.net to be able to click on the nav button)
What was fixed:
A style should be defined. navbar-default was added to the div class="navbar ..." that defines the navbar.
The CSS for .navbar-toggle where disabled since they made the button to look like a dot.
Related
I am working with bootstrap, and I have for example this code snippet :
<!-- Navigation -->
<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-brand" 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">
<li>
Symptoms
<li class="divider-vertical"></li>
</li>
<li>
Services
<li class="divider-vertical"></li>
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I can see the navbar, navbar-inverse, navbar-fixed-top, container, navbar-header, navbar-toggle, sr-only, icon-bar,navbar-brand, collapse, navbar-collapse, nav navbar-nav, etc...
So - Lets say I want to align the list in this code to the center. Which class, of the 12+ classes, do I have to modify with text-align? Is there a way of "backtracking" through the divs to see which one to change? The class that directly contains the list is nav navbar-nav, but if I change :
.navbar-nav > li > a
to include text-align:center; , nothing happens. Which must mean that I changed the wrong class.
If you know a way of determining which class to change, I appreciate it!
Thank you.
As rsn said in a comment, the best way is to install a developer tool that comes with the browsers. I personally like the Chrome one but the Firefox one works well too. You can select an individual item on your page using the select icon (arrow pointing to a box) and see what styles are attached to it. If you're trying to change padding, look at which element on your page has the padding, and then change that class.
Add an Id to the one you want to edit. Id overrules classes making the site then use the styling of the id instead of the class.
Or edit starting with .navbar and add classes after that...
Eg: .navbar{...} or .navbar .navbar-header .navbar-brand{...}
If you want the sub-menu (symptoms, services, contact) center aligned you can just use Bootstrap's text-center helper class on the UL as follows:
<ul class="nav navbar-nav text-center">
In Bootstrap 3 how do I get the navbar-right to work correctly on mobile? In my project for some reason when the browser shrinks down it puts my navbar-right item on the next line.
I've tried setting pull right on it, and setting pull-left on the brand image, but no luck.
I'm assuming there is something I'm doing wrong in Bootstrap or a class I need to add. Please help.
Here is what it looks like on mobile:
Here is what I want it to look like on mobile:
On desktop it works fine.
Here is my navbar html:
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a href="/">
<img src="/assets/dot-logo-91x50.png">
</a>
</div>
<div class="navbar">
<ul class="nav navbar-nav navbar-right">
<a class="navbar-brand" href="/apply/">Continue Application</a>
</ul>
</div>
</div>
</nav>
</header>
Please help.
Following Bootstrap 3 styling, your navbar element should show the mobile toggle button when in responsive resolution, like in this example.
If you want to have only those two elements of your interface in the same position inside a navbar element you could edit your html as follows:
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<img src="/assets/dot-logo-91x50.png">
</a>
<a class="navbar-brand pull-right" href="/apply/">Continue Application</a>
</div>
</div>
</nav>
</header>
But I suggest you to implement a mobile toggle button with a collapsed menu to improve your users experience.
I'm trying to change the navbar in my child theme but I'm a newbie. I read some questions here about that and even saw the bootstrap site, but I don't understand how to solve my problem. I'm sorry for my ignorance but could someone explain to me how it works?
I'm using this theme http://demos.codexcoder.com/#limo_wp and I would like to fixed the navbar instead of this "blink" and float. Just stay fixed after scroll the page.
You can find an example on the bootstrap website.
http://getbootstrap.com/examples/navbar-fixed-top/
Or you can change
<section id="headnev" class="navbar topnavbar">
to
<section id="headnev" class="navbar navbar-fixed-top">
in your header file and remove:
// Script for top Navigation Menu
jQuery(window).bind('scroll', function () {
if (jQuery(window).scrollTop() > 100) {
jQuery('#headnev').addClass('navbar-fixed-top').removeClass('topnavbar');
jQuery('body').addClass('bodytopmargin').removeClass('bodynomargin');
} else {
jQuery('#headnev').removeClass('navbar-fixed-top').addClass('topnavbar');
jQuery('body').removeClass('bodytopmargin').addClass('bodynomargin');
}
});
from custom.js
The following command:
Fixed to top:
Add .navbar-fixed-top and include a .container or .container-fluid to center and pad navbar content.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
If you want to fixed menu after scroll the page. You use fllowing javascript code. In this code fixed menu after if scrolls over a specific element. I wrote the following code based on your template.
<script>
if ( $('body').scrollTop() > $('.section-a').position.top ) {
$('#headnev').removeClass('topnavbar');
$('#headnev').addClass('navbar-fixed-top');
}
</script>
just add a class="nav navbar navbar-fixed-top"
I'll give you an example of my code, just use it and see how it works.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container" id="container">
<div class="navbar-header">
<div class="navbar-brand">Project Nature</div>
<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>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active dropdown">
Nature <b class="caret"></b>
<ul class="dropdown-menu">
<li><a href="#">Plants</a></li>
<li><a href="#">Landscapes</a></li>
<li><a href="#">Animals</a></li>
<li><a href="#">Elements</a></li>
</ul>
</li>
<li>Gallery</li>
<li>Blah</li>
<li>Contact</li>
<li class="dropdown">
Social Media <b class="caret"></b>
<ul class="dropdown-menu">
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google+</a></li>
<li><a href="#">LinkedIn</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
This will generate a navbar with a heading (title)
5 menu items of wich 2 are dropdowns.
Greetings :)
You would need to add something like the following CSS to a child theme to override this behavior in the parent theme.
#header .navbar {
animation:none !important;
}
If you aren't familiar with WordPress child themes, here is a good resource for you. There may even be a theme setting for this. Depends on what the theme developer made available in the theme's options.
In the navbar div, you should add the class name .navbar-fixed-top.
You could try my css also, simple yet effective if you are positioning it always on the top
.navbar{
position:fixed;
width:100%;
z-index: 1000000;
top:0;
}
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>