I'm using the default collapse navbar from bootstrap 3, but when I resize the browser window or open the page on a mobile device, the menu will first collapse and reduce nice to just the button and when I hit this button to expand the menu, all the menu items are too far on the left side so you can't read them properly an the language selection (just a flag) disappears completely. I tried several things like inline styling in html (left margin/padding, width, max width etc) and I also tried to remove the negative margin for .navbar-nav in my bootstrap css. I'll attach a screenshot and here is the code for my navigation (of course it's nested in a container div):
<div class="row formRow">
<div class="col-sm-12 searchCol">
<form class="searchBox" action="/en/search.html" method="get">
<div class="form-group" style="display:inline;">
<div class="input-group">
<input type="text" name="q" class="form-control" maxlength="2048">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" ><!--aria-controls="navbar"-->
<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="/en/"><img class="img-responsive" src="/img/primeralogo.png" alt="Primera Technology Europe Logo"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav" style="padding: auto; max-width: 100%;">
<li class="dropdown" style="padding: auto; max-width: 100%;">
PRODUCTS
<ul class="dropdown-menu">
<li>Slide Printer</li>
<li>Cassette Printer - Autoloader</li>
<li>Cassette Printer - Manual</li>
<li>Medical IT Equipment</li>
<li role="separator" class="divider"></li>
<li>LX500e Color Label Printer</li>
<li>Disc Publishers</li>
<li role="separator" class="divider"></li>
<li>Product Brochure</li>
<li>Portable All-in-One Printer</li>
</ul>
</li>
<li class="dropdown" style="padding: auto; max-width: 100%;">
SUPPORT
<ul class="dropdown-menu">
<li>Contact Support</li>
<li>Knowledge Base</li>
<li role="separator" class="divider"></li>
<li>Product Registration</li>
<!-- <li>Sign up for training</li>-->
<li role="separator" class="divider"></li>
<li>Slide Printer</li>
<li>Cassette Printer</li>
<li>LIS Integration</li>
</ul>
</li>
<li class="dropdown" style="padding: auto; max-width: 100%;">
COMPANY
<ul class="dropdown-menu">
<li>About Primera </li>
<li>Press</li>
<li>Contact Primera </li>
</ul>
</li>
<li class="dropdown" style="padding: auto; max-width: 100%;">
<span class="lang-sm" lang="en"></span>
<ul class="dropdown-menu"> <li><span class="lang-sm lang-lbl-full" lang="en"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="de"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="fr"></span></li>
<!--<li><span class="lang-sm lang-lbl-full" lang="es"></span></li>-->
<li><span class="lang-sm lang-lbl-full" lang="nl"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="bg"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="cz"></span></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</nav>
</div>
</div>
<div class="row formRowBelow">
<div class="col-sm-12 searchCol">
<form class="searchBoxAlt" action="/en/search.html" method="get">
<div class="form-group" style="display:inline;">
<div class="input-group">
<input type="text" name="q" class="form-control" value="" maxlength="2048">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
</form>
</div>
</div>
Screenshot of the problem
EDIT: It seems that if the window gets small enough (320px width) the navigation gets displayed almost correct. As the window gets larger, the text goes to the left and disappears "letter for letter" until it hits the breaking point where it becomes a normal navbar again
If you're using Chrome, then this is a browser bug that I've experienced as well. When moving to a different breakpoint from mobile view sometimes Chrome zooms in. Try just resetting your browser zoom level (Ctrl/Cmnd + 0).
You also have a JS error in your console that you should consider resolving.
Related
I have a navbar that does collapse as it should in mobile view but on the tablet (or ipad pro) there is a break or large padding/gap that breaks the navigation. The testing site is at:
padding or margin bottom occurs in tablet view
I have tried a number of things like adjusting the viewport and adding links to bootstraps transition.js and collapse.js files but that is not working either.
<!--navigation bar-->
<nav class="navbar navbar-default transparent navbar-static-top" role="navigation" id="navbar-main">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-lg-12"> <a class="navbar-brand" href="http://patskailua.com/index.php"><img src="http://patskailua.com/images/kailua-beach-properties-llc.png" alt="pats kailua hawaiian Flower" usemap="#Map" class="img-responsive">
</a></div>
</div>
</div>
</div>
</div>
<div class="navbar-header">
<div class="text-center">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCollapse">
<span class="sr-only">Toggle Navigation</span>
<span class="fa fa-chevron-down"></span> Menu
</button>
<div class="collapse navbar-collapse" id="navCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active goleft1">vacation rentals</li>
<li>kailua activities</li>
<li class="dropdown">
rentals by size<span class="caret black"></span>
<ul class="dropdown-menu">
<li><a href="http://patskailua.com/wp/three-bedrooms.php" >Three Bedrooms</a></li>
<li>Two Bedrooms</li>
<li>One Bedrooms</li>
<li>Studios</li>
</ul>
</li><li>contact us </li>
<li>about us</li>
<li class="dropdown">
property management and sales<span class="caret black"></span>
<ul class="dropdown-menu">
<li>Property Management</li>
<li>Buying a Property</li>
<li>Selling a Property</li>
<li class="goleft">home</li>
</li>
</ul>
</div>
</nav>
<!--end nav bar-->
If anyone has any ideas on how to fix this, that would be great. Thanks so much. -Beth
You could try changing the class col-lg-12 by col-md-12 or even col-sm-12.
This should make your navbar adapt better smaller resolutions.
I am using bootstrap to create a web site.
Here is the code for navbar
Edit: Fiddle http://jsfiddle.net/cb6rxu2h/
<header>
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<div class="navbar-header col-md-4 col-sm-12">
<a class="navbar-brand" href="#">BargainKart</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="badge pull-right">4</span><i class="fa fa-shopping-cart"></i>
</a></li>
<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-sign-in"></i>
Sign in</a></li>
</ul>
</div> <!--container fluid-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
<li>About</li>
<li class="dropdown">
Categories <span class="caret"></span>
<ul class="dropdown-menu">
<li>Electronics</li>
<li>Fashion</li>
<li role="separator" class="divider"></li>
<li>All</li>
</ul>
</li>
</ul>
<div class="col-sm-6 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
</div>
</div><!-- /.navbar-collapse -->
</nav>
</header>
And the code for sidebar
<div class="wrapper">
<aside>
<div class="categories-bar content-fluid col-md-3 col-sm-12">
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<li>About</li><li class="active">Home</li>
<li>About</li><li ">Home</li>
<li>About</li> <li>Shop</li>
</ul>
</div>
</aside>
The css I've used is
aside {
padding-bottom: 5000px;
margin-bottom: -5000px;
background-color: white;
font-size: 1.5em;
}
.wrapper {
position: relative;
overflow: hidden;
}
I've messed up a lot but still can't figure out why the sidebar and wrapper div is overlapping into header.
I can use padding but when I scale the browser there's lot of empty space for small screen browsers.
Since you use the navbar-fixed-top giving the body a padding of the navbars height should fix this problem. Replace XX with your value of the height in pixels.
body {
padding-top: XXpx;
}
You can get this tip here.
I'm developing a web with Ruby on Rails, using Twitter-Bootstrap and Simple-Navigation gem. The navigation menu works fine on any browser, something like this:
When displaying the web on a mobile device and clicking the nav button, the whole menu is displayed on vertical block, enlarging the size of the header to a max. height than can hold the menu. The problem is that opening any submenú increases the size of the menu, overflowing and hiding the last options, as you can see in the comparison:
Any idea?
The code of nav_menu on the mobile version:
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="brand">
<img alt="NRG Consulting logo" src="/assets/nrg-logo.png" title="NRG Consulting">
</div>
<span class="development" id="rails-env"><span>development</span></span>
<div class="container nav-collapse in collapse" style="height: 496px;">
<ul class="nav pull-right align-top">
<li>
<a href="manual_path">
Help
</a>
</li>
<li>
Español <img alt="Switch to English" class="lang" data-locale="en" src="/assets/lang-es.png" title="English">
</li>
</ul>
<ul class="nav pull-right align-bottom">
<li id="home">Home</li>
<li id="formulas">Formulas</li>
<li id="deals">Deals</li>
.
.
.
<li class="active dropdown" id="admin">
Admin <b class="caret"></b>
<ul class="dropdown-menu">
<li id="subscription">Subscriptions</li>
<li class="divider" id="nav_header"></li>
<li id="historic">Recalculate historic prices</li>
<li class="divider" id="nav_header"></li>
<li id="export">export data</li>
<li id="import_tuple_eod_check">Check data</li>
<li class="divider" id="nav_header"></li>
<li id="alerts">Alert</li>
<li id="product_price_alerts">Price alerts</li>
<li id="import_tuples">Import tuple</li>
<li id="fixing_errors">fixing errors</li>
<li class="divider" id="nav_header"></li><li id="redis">Resque</li>
<li id="copycopter">Translate</li>
<li class="divider" id="nav_header"></li>
<li class="active simple-navigation-active-leaf" id="client">Clients</li>
<li id="user">Users</li>
<li id="user_activities">User activity</li></ul></li>
<li id="user">Users</li>
</ul>
</div>
</div>
</div>
</div>
Collapsed nav menu appears to set a fixed height value when displaying nav menu, preventing the div to enlarging when submenu dropdowns display:
<div class="container nav-collapse in collapse" style="height: 496px;">
Adding this lines to style.css set height property to auto, allowing the div to enlarge when needed, showing the whole menu:
.container.nav-collapse.in.collapse{
height: auto !important;
}
Perhaps there is a cleaner solution, but this worked pretty fine for me, and don't want to change Bootstrap code itself.
A link displaying some usefull info about similar issues.
My navbar-brand goes down when I resize my browser or either I use it on my low resolution mobile device.
Here's my jsfiddle
My NavBar Code:
<div class="navbar navbar-default" id="page">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img src="img/feueac-logo.png" style="position:absolute; width:30px; height:35px; top:7px; left:5px;" /><span style="padding-left:25px; padding-top:0px;" class="navbar-brand" >FEU - EAC E - Project System</span></a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Client Application</li>
<li>About Us</li>
<li>Contact Us</li>
<li class="dropdown">
Login <b class="caret"></b>
<ul class="dropdown-menu">
<li id="modal_trigger" href="#modal" class="btn_red">Faculty</li>
<li id="modal_trigger2" href="#modal2" class="btn_red">Student</li>
<li class="divider"></li>
<li id="modal_trigger3" href="#modal3" class="btn_red">Guest</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<p style="padding-left:20px; padding-top:4px;">
<input type="text" class="form-control col-lg-8" placeholder="Search" style="width:300px; height:30px;">
</form>
</div>
</div>
Here's some examples:
Good:
Bad:
Worse:
I've had luck using FitText, a jQuery plugin that fits text to it's parent element.
From their website:
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
Not exactly an "answer" (which there may be none of for this question), but a decent solution.
Good luck!
Ok I have looked all over the css and can't seem to figure out what is determining the width between the top level links on my navbar. I need to make them just barely smaller so when it adjust for a sub 900px screen it doesn't turn it into a 2 row navbar instead of the usual 1 row.
I tried something like navbar > li but had no success getting them to move. But to no avail so I am asking
Thank You here is my navbar code
<div class="navbar-wrapper">
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
<button type="button" 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>
</button>
<a class="brand" href="index.html">PC3</a>
<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
About Us <b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Services</li>
<li>Core values</li>
<li>Staff</li>
<li>How To Know God</li>
<li>Volunteering</li>
<li>Giving</li>
<li>Directions & Contact</li>
</ul>
</li>
<li class="dropdown">
Adult Ministries<b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Overview</li>
<li>Personal Spiritual Trainer</li>
<li>Care Team</li>
<li>Hospitality team</li>
<li>Intercessory Prayer</li>
<li>Women's Ministry</li>
<li>Amplified Worship</li>
<li>Sermons</li>
</ul>
</li>
<li class="dropdown">
Student Ministries<b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Overview</li>
<li>Just For Parents</li>
</ul>
</li>
<li class="dropdown">
PC Kids<b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Overview</li>
<li>Videos</li>
</ul>
</li>
<li class="dropdown">
Life Groups<b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Schedule</li>
<li>Leaders & Group Info</li>
</ul>
</li>
<li>Events</li>
<li>Missions</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
</div> <!-- /.container -->
</div><!-- /.navbar-wrapper -->
I figured out what I was looking for, didn't look in the second css, which has the responsive css and didn't edit the padding for the .inner class.
That was my fault thank you tho