I am using bootstrap navbar and I have a collapsible navbar. But I am facing a strange problem, whenever I am going to open my site on small devices i.e mobile phone or tablet (actually for which devices I need the collapsible navbar), it is by default opening the navbar. This should not happen. If I click on the navbar button (three line button) then only the navbar should expand. But my navbar is expanding first time by default on small devices.
Here is my code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header"><%= image_tag("logo.png", alt: "industryPrime") %></div>
<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>
<div class="navbar-collapse collapse in" id="myNavbar">
<ul class="navigation pull-right">
<li class="dropdown">
<div class="dropdown">
<button id="feature_button" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" style="background-color: transparent; color: #51a3af; border: none; font-size:11px;">FEATURES
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Paperless purchase</li>
<li>Efficient stores</li>
<li>Peace of mind</li>
</ul>
</div>
</li>
<li>
<%= link_to "Case Study", user_maan_case_study_path %>
</li>
<li class="req_demo">
<%= link_to "Request Demo", user_request_demo_page_path , :onclick => "demo_clicked()" ,:onmouseover => "start_count()" , :onmouseout => "stop_count()" %>
</li>
<li id="Login button section"><%= link_to 'Login', {controller: 'sessions', action: 'new'} %></li>
<li>Contact Us</li>
<li><%= image_tag("contact_us.png") %>+91 98302-15353</li>
</ul>
</div>
</div>
</div>
</nav>
My website link is http://www.industryprime.com
please help me to fix it.
Thanks in advance!!!
Please remove class in in <div class="navbar-collapse collapse in" id="myNavbar"> . Hope it will help you.
Related
I was wondering how I could collapse the content of my navbar on a mobile devise so it could have a home link and then the three dashes that when clicked drop down and show all the other links. Here is my _navigation.html.erb file:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- 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" 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>
</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 nav-pills">
<li><%= link_to "Home", root_path %></li></a>
<li><%= link_to "About Me", about_path, target: :_blank %></li>
<li class="dropdown">
Music<span class="caret"></span>
<ul class="dropdown-menu">
<li><a target="_blank" href="https://soundcloud.com/officialyungdremusic">Soundcloud</a></li>
</ul>
</li>
<li class="dropdown">
Social Media<span class="caret"></span>
<ul class="dropdown-menu">
<li><a target="_blank" href="https://www.youtube.com/user/OfficialYungDreMusic">Youtube</a></li>
<li><a target="_blank" href="https://twitter.com/yungdremusic">Twitter</a></li>
</ul>
<li><%= link_to "Pictures", pictures_path, target: :_blank %></li>
<li><%= link_to "Contact Me", contact_path, target: :_blank%></li>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-->
</nav>
What I'm trying to accomplish works when I resize my desktop window. But for some reason on a phone(720x1280 pixels) it doesn't resize. I am familiar with media queries in css, would I just need another media query that would be just for screens of 720 and bigger?
Any help is greatly appreciated!
Default breakpoint for bootstrap navbar is 768px. I tried to reproduce your example and it does collapse below 768px. However, there are tablets with screen size of 768px or more where it won't collapse. You have to either write your own media query or change the default value of #grid-float-breakpoint bootstrap variable.
Check Changing the collapsed mobile navbar breakpoint on bootstrap guide for further information.
My Bootstrap navbar links including search goes away whenever I resize the page anywhere less than about 600px. What would be the cause of this? Only the logo does not move. The navbar is fine and does not resize, so I was surprised that the links went away when the page resize. I do not want any of my links to move from where they are regardless of page resizing.
code is here: HTML
http://jsfiddle.net/Crisp3333/2u0tgh5r/
<div class="menubar">
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="yancii_logo.jpg" width="40px" height="50px">
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search events, places, contacts......" class="form-control">
</div>
</form>
<ul class="nav navbar-nav">
<li>CreateEvent</li>
<li>MyEvents</li>
<li>Contacts</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Account</li>
</ul>
</div>
</nav>
The problem is this piece of code: /* min-width: 1400px; */
And you can find it in your class -> .navbar
It basically causes your drop-down menu not to show. And the menu buttons don't resize along as you want them to.
Hope this helps you out!
Cheers
I am trying to customize bootstrap default fixed top nav to make it like one in images below. I am using latest twitter bootstrap 3.1.1. If you know please help me. You can even help me with any repository for it. The one in image is from i purchased which is using bootstrap 2x but i want to update it to 3x and use it in another template.
<div class="topHeaderSection">
<div class="header">
<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="index.html"><img src="assets/custom/img/logo.png" alt="My web solution" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
<li>About us</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
You need to take your dropdown button out of the div with the collapse class, and put it into the navbar-header div. Then create an additional navbar-header for the application title.
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Title - manually pull it left-->
<div class="navbar-header pull-left">
#Html.ActionLink("Application name", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
<!-- Buttons that won't collapse - and manually pull right-->
<div class="navbar-header pull-right">
<!-- Your drop down button that is not part of the collapse group -->
<ul class="nav pull-left">
<li class="dropdown pull-right">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
<!-- The normal bootstrap button to show collapsed menu items -->
<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>
</div>
<!-- Regular collapsed items -->
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav pull-right">
<li>About us</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
Check out this answer to a similar question: https://stackoverflow.com/a/22978968/1721571.
Included in this answer is a link to a fiddle which should help you. I tried it out and it worked well without any changes.
Here's the link if you want to jump straight in. Fiddle: http://jsfiddle.net/nomis/n9KtL/1/
UPDATE
Your additional requirements may require some JavaScript. From my understanding you want the navbar to be static until the user scrolls down to the point where the navbar reaches the top of the window. Then you want it to be fixed.
Add your Contact div above the first navbar element. I have made it a navbar-default so the difference is more clear. You don't have to use the bootstrap nav or container classes. You can create your own and get the style to your liking:
<div class="navbar navbar-default navbar-static-top" style="margin-bottom:0px" role="navigation">
<div class="container">
<div class="text-info">Small div with contact information</div>
</div>
</div>
Now change the original navbar to static to start off with. We will also give it a menu class so we can select it with jQuery:
<div class="navbar navbar-inverse navbar-static-top menu" role="navigation">
For the JavaScript:
$(document).ready(function () {
var menu = $('.menu');
var origOffsetY = menu.offset().top;
function scroll() {
if ($(window).scrollTop() >= origOffsetY) {
$('.menu').addClass('navbar-fixed-top');
$('.body-content').addClass('menu-padding');
} else {
$('.menu').removeClass('navbar-fixed-top');
$('.body-content').removeClass('menu-padding');
}
}
document.onscroll = scroll;
});
Notice how I have added a class to the body-content, this stops the content disappearing behind the navbar-fixed when it changes class.
.menu-padding {
padding-top: 80px;
}
Here is the complete fiddle: http://jsfiddle.net/seanobr/wsNYQ/
I made a Navbar with Bootstrap 3. My questions is how to have it be shaded when selected?
Everything works fine otherwise. I believe it required some JavaScript, but I don't know how to implement it.
This is my code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="font-family:Webdings;">
<%= link_to "lalala", root_path, class: 'navbar-brand' %>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><%= link_to "laaa", lal_path %></li>
<li class="dropdown">
lala<b class="caret"></b>
<ul class="dropdown-menu">
<li><%= link_to "lala", laa_path %></li>
<li><%= link_to "lalala", lala_path %></li>
<li><%= link_to "lalala", lala_path %></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Follow #lalala
</li>
<li>
<div class="fb-like" data-href="lalala" data-width="600" data-layout="button_count" data-show-faces="true" data-send="false"></div>
</li>
<li><%= link_to "lala", contact_path %></li>
<li><%= link_to "lalalala", register_path %></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
CSS3 is all you need! Go here: http://css3generator.com/. After you generate the shadow, gradient or text shadow you like, apply that css3 chunk of code to the element by adding :active selector. See here for :active selector: http://www.w3schools.com/cssref/sel_active.asp
NB: :active MUST come after :hover (if present) in the CSS definition in order to be effective!
In my web page I have a Bootstrap 3 navbar:
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Teachlab</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Sign in", '#' %></li>
</ul>
</div>
</nav>
<div class="container">
<%= yield %>
</div>
</body>
The problem is that navigation is to close to the edge of the screen. If I remove navbar-fixed-top from the navigation bar, it's working as I want.
Any hints?
Use .container-fluid as of 3.1.1.
The structure is not correct. .navbar-right goes on the .collapse container not on the ul.
SAMPLE: http://jsbin.com/eQIROsE/2/edit
<div class="navbar navbar-fixed-top navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
<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>
</div>
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
I ended up with overriding following:
.navbar-nav.navbar-right:last-child {
margin-right: 0;
}
But maybe there's another solution?
It's broken and won't fix in 3.x. Hack it.
.navbar-right {
margin-right: 0px;
}
The solution to this could be
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
It worked for me.
I really can't see why you'd have two .navbar-nav.navbar-right. Just wrap the navs in .navbar-right instead.
<div class="navbar-right">
<ul class="nav navbar-nav">...</ul>
<ul class="nav navbar-nav">...</ul>
</div>
I got exactly the same issue today!
According to Bootstrap doc <ul class="nav navbar-nav navbar-right"> is correct.
Like you, I solved the problem by setting the nav navbar-nav navbar-right margin-right to 0px without noticing unwanted effects.
Notice that the margin-right value of .navbar-text.navbar-right:last-child is 0px while .navbar-nav.navbar-right:last-child margin-right value is -15px... Bizarre?
https://github.com/twbs/bootstrap/issues/13325
My not so elegant solution, but does the job very quickly, add a last list item;
<li><span> </span></li>
If you have problem with
margin-right: -15px;
in .navbar-right then just add in your css styles
.navbar-right {
margin-right: 0px;
}
and if this still doesn't work clear your browser from all history when your webstie was running and debug it again. It works :)
(Fixed in asp.net mvc)
I had the same problem in asp.net mvc c#, the way i fix it was by going to Contents/bootstrap.css i located the .navbar{} class and i add it a padding of 5 px,that worked for me.
Heres how it looks when you find it..