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.
Related
Let me start with I'm not a programmer so I've been banging my head against a wall for hours. Everything works perfectly on desktop and android mobile. But on ios when I click the hamburger menu it just changes colour as expected but the navigation menu does not appear. I have read this is an issue with ios but I can't find any samples similar to get any sort of fix. Any info is appreciated. Please let me know if I need to post css etc. Thanks in advance!
<div class="navbar-header ">
<a class="navbar-brand" href="index"><img src="images/logo-white.png" alt="logo"></a>
<button type="button" class="navbar-toggle menubtn" data-toggle="collapse" data-
target=".navbar-collapse">
<span class="sr-only" >Toggle navigation</span>
TEST
<div id="nav-icon1">
<span></span>
<span></span>
<span></span>
</div>
</button>
</div>
<div class="collapse navbar-collapse">
<nav class="fill">
<ul class="nav navbar-nav navbar-right ">
<li class="dropdown">
<a href="about-us" class="dropdown-toggle" data-toggle="dropdown">About Us
<i class="icon-angle-down"></i></a>
<ul class="dropdown-menu">
<li>History</li>
<li>FAQs</li>
<li>Blog</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
The menu drop downs for a brief second and then goes back up. Can anyone please help in fixing it? If someone could suggest me a code to make it work then that would be even better.
This is the code:
<nav class="navbar transparent navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target="#main_nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html"> <strong>RESOLUTION ACCOUNTING</strong> </a>
<div id="main_nav" class="collapse nav-collapse">
<ul class="nav pull-right ">
<li>HOME</li>
<li>ABOUT US</li>
<li class="dropdown">
SERVICES <b class="caret"></b>
<ul class="dropdown-menu">
<li>Bookkeeping</li>
<li>Accounting</li>
<li>CFO Oversight</li>
<li>Equity Raises</li>
</ul>
</li>
<li>TESTIMONIALS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
You are using Bootstrap version 2.3.2 CSS with Bootstrap version 3.3.6 Javascript. They are not compatible with each other. You need to use the same version of Bootstrap for both CSS and Javascript to get the correct behavior.
(It would have been helpful if you had included the URL to the site you need help with.)
Here you go with a solution https://jsfiddle.net/wqy986bt/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar transparent navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target="#main_nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html"> <strong>RESOLUTION ACCOUNTING</strong> </a>
<div id="main_nav" class="collapse nav-collapse">
<ul class="nav pull-right ">
<li>HOME</li>
<li>ABOUT US</li>
<li class="dropdown">
SERVICES <b class="caret"></b>
<ul class="dropdown-menu">
<li>Bookkeeping</li>
<li>Accounting</li>
<li>CFO Oversight</li>
<li>Equity Raises</li>
</ul>
</li>
<li>TESTIMONIALS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</div>
</nav>
There are few things:
You have an extra closing div at the end of your code
Check the ordering of the library file
bootstrap CSS
jQuery
bootstrap JS
I've used bootstrap v3.3.7 and jQuery v2.1.1 (in snippet) and jQuery v2.2.4 (in jsfiddle)
Hope this will help you.
The following code produces "pills" of unequal width when displayed on small or extra small screens (as defined by twitter bootstrap by default).
<header>
<div id="brand" class="container">
<div class="row">
<div class="col-sm-12">
<h1>Website</h1>
<h2>header</h2>
</div>
</div>
</div>
<div id="navbar" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navs">
<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 id="navs" class="collapse navbar-collapse">
<ul class="nav nav-pills nav-justified">
<li class="active">
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</header>
The first pill seems to be exactly 2 pixels wider than the rest. I would prefer that the pills fill the entire width of the display.
Is this a bug in Bootstrap, or something I can remedy via some simple CSS?
JSFiddle: https://jsfiddle.net/elikmiller/z2og3vq7/
why don't you override bootstrap css with your custom css just add your custom class for example nav-custom and put this css into your custom css file
.nav-custom>li>a {
padding: 10px 10px;
}
fiddle
You should use another class in your html called nav-stacked. I updated your Fiddle you can see here the full example and can see here the relevant HTML part.
<ul class="nav nav-pills nav-stacked nav-justified">
<li class="active">
This one is 2px wider
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
I had downloaded a bootstrap template which has a dropdown menu in middle(mobile version).
Like this:
http://postimg.org/image/58hmpb8f5/
But i want dropdown menu on the top-right corner of my mobile screen
Like this : http://postimg.org/image/5fkeraou1/
This is my html code so far:
<header id ="top" class="mTop">
<div class="topHead">
<div class="container">
<div class="row">
<div class="topMenu">
<ul class="span12 topContact">
<li class="addresTop"><span class="icon-map-marker"></span>456 Jl.Pacar, Singapore</li>
<li class="mailTop"><span class="icon-envelope"></span>Office#Plasma.com</li>
<li class="phoneTop"><span class="icon-phone"></span>(+1) 321-9876520</li>
</ul>
</div>
</div>
</div>
</div>
<div class="headContent">
<div class="container">
<div class="row">
<div class="span4">
<div class="brand">
<img src="images/logo.png" alt="Logo">
</div>
</div>
<div class="span8">
<div class="menu" id="steak">
<nav>
<ul class="navMenu inline-list" id="nav">
<li class="current">Home</li>
<li>About</li>
<li>Service</li>
<li>Our Team</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class="clearfix"></div>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
dont you want to use the latest boostrap instead? the latest bootstrap which is 3.3.1 has the navigation that you need.
code in bs3.3.1 is something like this
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
for bootstrap 2, the basic navigation where in you will have a top right menu in mobile view will be
<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 -->
</div>
</div>
</div>
</div>
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!