I'm using Cordova to build a cross-platform app. I'm using bootstrap for my framework and I'm running into some trouble with the navbar. I'm not using any special CSS for it or anything. Here is my code:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<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="#">Header</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Terms & Conditions</li>
<li><a id="logout">Logout</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
Here is my viewport settings in case that matters:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi"/>
When the keyboard is shown (when I'm inside a text field), the navbar gets pushed up. If I click a button while the keyboard is open, the keyboard disappears and the navbar gets stuck halfway down the page (I'm guessing where it was when the keyboard was up). I've made a screen recording of it to better explain. It's here: https://vid.me/zIc
Also, in Cordova I have "DisallowOverscroll=true" so you can't scroll if there is no need. If I have this set to false, it still happens, but if I scroll even the slightest bit, it jumps into place!
It seems as though it WAS my viewport settings. I removed the "height=device-height" and it seems to work now!
Related
Here is the site in question http://www.qsconference.com/.
This is a screen shot of the site on a chrome window scaled to mobile size.
This is a screen shot of the site from an iPhone 7.
I need help fixing the scaling and navbar collapse on mobile devices. It seems to work when testing from chrome, but on mobile devices it doesn't work.
This is the code for the collapsable navigation bar:
<!-- Navigation -->
<div id = "nav_bar" class = "navbar-custom">
<nav class = "row navbar navbar-default">
<div class = "container-fluid">
<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>
<a class = "navbar-brand XX" style = "font-family: 'Open Sans Condensed', sans-serif;" href = "#jumbo"><i>QSC</i></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class = "nav navbar-nav navbar-right" id = "linkList">
<li >QSC 2018</li>
<li>Delegates</li>
<li>Sponsorship</li>
<li>Speakers</li>
<li>The Team</li>
</ul>
</div>
</div>
</nav>
</div>
add it in head section
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A viewport element gives the browser instructions on how to control the page's dimensions and scaling.
width=device-width is used to set the width of the document equal to the width of the actual device.
initial-scale=1.0 is used to set the zoom level when the page is first loaded by the browser.
I have tried just about everything to get the toggle navigation to work and I have had no luck. Is it just a simple mistake or piece of code I'm missing? I have tried loading different scripts but still nothing.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #f2f2f2">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#nav-collapse" style="margin-top: 20px;">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#/home" class="navbar-brand">
<img src="img/evodent-logo.png" alt="evodent-logo" style="width:190px;">
</a>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
ABOUT
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
</nav>
It seems like the code is working just fine as is. Make sure that you are including the bootstrap.min.js file on your page as well. As the collapsible components in bootstrap require this plugin/file.
Here is the official documentation on the Bootstrap Navbar that mentions that the plugin is required: http://getbootstrap.com/components/#navbar
Requires JavaScript plugin
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.
I can't seem to figure out why this is.
My code is as follows:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="container-fluid">
<div style="text-align:center"><a href="http://www.leagueofassassins.co.uk">
<img class="banner" src="../images/logos/Logo%20for%20LoA.png"></a>
</div>
<!--Navbar Begin-->
<nav class="navbar-static-top navbar-inverse navbar-inner navbar-custom" role="navigation">
<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>
<!--<a class="navbar-brand" href="#"></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>Home</li>
<li>Info</li>
<li>Roster</li>
<li>WarcraftLogs</li>
<li class="active">Apply</li>
</ul>
</div>
</div>
</nav>
<!--Navbar End-->
For some reason, it leaves a big area at the right hand side when vertical but works when my phone is horizontal. I have included pictures below. Any help would be appreicated. I want it to be full screen width.
Ignore the well at the bottom with the overflowing text, please. That's not the problem.
See http://www.leagueofassassins.co.uk/apply/
It looks like your "main-pane" cals got 60% width, try removing it and it should work fine.
CSS Class
.main-pane {
margin-top: 1%;
margin-bottom: 5%;
width: 60%; // remove this line
height: 100%;
}
It turns out that I'd accidentally missed some padding on either side of .container-custom and the bottom content was spilling over causing the page to need to be widened. It works now. Thanks.
I've been testing my bootstrap site on various devices to ensure it's responsive. I've got everything resizing correctly for different display sizes except the navbar. On my browser, when I resize the window horizontally it seems to respond, collapsing the menu as expected, but on mobile devices I still see the navbar as if it were displaying in a full screen window on a desktop or laptop. Here is the code for my navbar:
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="WinShir" src="img/rocket.png" /> WinShir
</a>
<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>
<span class="sr-only">Toggle Navigation</span>
</button>
</div>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse">
<li>Sign In</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
</div>
I've tried changing the nav element to a div to see if that helped without success. I also removed the enclosing container class div to see if that helped with no luck there either.
You probably didn't set your viewport. Put this in the <head> and see if it makes a difference.
<meta name="viewport" content="width=device-width, initial-scale=1">
I was having the same problem in one of my react projects.
Even after adding the <meta> tag the menu wasn't responsive.
But you can solve this by giving a custom onClick listener to the hamburger menu button.
Use this code for the <button> used to expand the menu in mobile devices-
<button className="navbar-toggler" onClick={()=>{document.body.style.zoom=0.8;}} type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"/>
These dog gone phone manufacturers are making our job harder. The introduction of larger phones is causing Bootstrap RWD to respond as a tablet instead of a phone. This is not a major deal sometimes because the responsiveness did take place but the dropdown menu (hamburger menu) fails to show up and forcing it to open prematurely it's not right either. Then you'll have the same problem with smaller tablets or phones in landscape mode.
Here is what I mean:
This is the way I designed it to look for col-xs-12 and instead I am getting the col-sm-12 to render in the phones as the image further below displays. "So what if the hamburger menu doesn't display", you'll say. The regular menu is still too small in a phone and hard to tap.
here is the code I am using for the header
<header>
<div class="header">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">MENU</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="images/banner.png" alt="banner" /></a>
</div>
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="navigation">
<li class="active">Home</li>
<li>about</li>
<li>testimonials</li>
<li>services</li>
<li>contact</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
Anyone knows how to get around this.
Well, I found the problem folks. I feel like doing a face palm so please, I accept all the "duh" and "doi" you throw my way. lol Here is how to fix it.
Add <meta name="viewport" content="width=device-width, initial-scale=1"> to the head and voila!
:shaking my head: