I would like to show both the logo and the button on my page in mobile version. I currently using bootstrap navbar:
<div class="navbar-header">
<a class="navbar-brand" href="#first" >
<img src="assets/logotech500px.png" alt="" style="width:20px;height:20px;">
</a>
</div>
<div class="navbar-collapse collapse" id="bs-navbar">
<ul class="nav navbar-nav">
<li>
<a class="page-scroll" class="active" href="#first">Home</a>
</li>
<li>
<a class="page-scroll" href="#one">About</a>
</li>
</ul>
</div>
With the following code only the logo inside the navbar-header is shown on mobile not the buttons, Home, About etc. I have no problems on desktop.
First: Base on your html you don't have
<nav class="navbar navbar-default">
</nav>
It should be
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#first">
<img src="assets/logotech500px.png" alt="" style="width:20px;height:20px;">
</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>
</button>
</div>
<div class="navbar-collapse collapse" id="bs-navbar">
<ul class="nav navbar-nav">
<li>
<a class="page-scroll" class="active" href="#first">Home</a>
</li>
<li>
<a class="page-scroll" href="#one">About</a>
</li>
</ul>
</div>
</nav>
Second: Bootstrap hides the navbar-collapse in mobile but you can toggle it using a button..
A fiddle without the button..
A fiddle with the button..
Try to remove the classes navbar-collapse collapse and the id bs-navbar. These classes are related to the bootstraps library and it makes the menu colapse when the viewport detects a given width of the screen (mobile devices). By removing these classes, the buttons will always be displayed, even in mobile devices.
Related
I have a slightly different form of navigation. The structure is like so
<nav class="navbar navbar-fixed-left vertical-center" role="navigation">
<ul class="nav navbar-nav">
<li><a class="page-scroll" href="#hero"><span>H</span><span>O</span><span>M</span><span>E</span></a></li>
<li><a class="page-scroll" href="#portfolio"><span>W</span><span>O</span><span>R</span><span>K</span></a></li>
<li><a class="page-scroll" href="#about"><span>A</span><span>B</span><span>O</span><span>U</span><span>T</span></a></li>
<li><a class="page-scroll" href="#contact"><span>C</span><span>O</span><span>N</span><span>T</span><span>A</span><span>C</span><span>T</span></a></li>
</ul>
</nav>
And with the CSS I display the menu vertically down the side of the page. I have set up a JSFiddle to demonstrate.
My question relates to how I can get this to switch to the standard bootstrap mobile menu on mobile devices?
Thanks
Something like this?
Pnkr
<nav id="mainNav" class="navbar navbar-fixed-left vertical-center">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navCollapsed">
<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="collapse navbar-collapse" id="navCollapsed">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#hero"><span>H</span><span>O</span><span>M</span><span>E</span></a></li>
<li><a class="page-scroll" href="#portfolio"><span>W</span><span>O</span><span>R</span><span>K</span></a></li>
<li><a class="page-scroll" href="#about"><span>A</span><span>B</span><span>O</span><span>U</span><span>T</span></a></li>
<li><a class="page-scroll" href="#contact"><span>C</span><span>O</span><span>N</span><span>T</span><span>A</span><span>C</span><span>T</span></a></li>
</ul>
</div>
</div>
</nav>
Added a button for when the menu is collapsed, which will show up when the navbar breakpoint is reached. The list items are then added under this button.
I use media queries to switch up the style and removing the vertical alignment of the navbar.
I have the following navbar in my site:-
<nav class="navbar navbar-default no-margin show">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="fa-stack"> <i class="fa fa-bars fa-stack-2x "></i></span></button>
</li>
</ul>
<div style="text-align: center; font-size: 20px; padding-top: 7px;">
<img src="images/logo.png">
<p style="display: inline"><b>Congress API</b></p>
</div>
</div>
</nav>
This navbar is visible on medium screens like laptop but it is hidden in mobile displays. There is just a white strip in the mobile display. I dont have any CSS for the large devices should I set any CSS properties to get it shown in mobile devices. The toggle button is also not visible. Pretty new at this.
Your entire navbar is wrapped in the collapse class which is supposed to be hidden in the mobile display and toggled by the toggle button. But since your toggle button is in the collapse class it is being hidden in mobile widths. Your navbar structure should have a .navbar-header class where your toggle button and logo should be placed. Then your links should be placed in the .collapse class so the button will be displayed in moblile widths and then your content can be toggled. Here is an example of how your structure should look.
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Your Logo</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>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Your Links</li>
<li>Your Links</li>
<li>Your Links</li>
</ul>
</div>
</div>
I am trying to make a fixed bottom navbar that will slide up when it is collapsed. As far as I can tell i have it set up right, but when I click the collapse button nothing happens.
here is my html:
<nav class="navbar navbar-inverse navbar-fixed-bottom " role="navigation">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll animated infinite pulse" href="#page-top"><img src='assets/images/logo.png'></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a class="page-scroll" href="#troposphere">TROPOSHPERE</a>
</li>
<li>
<a class="page-scroll" href="#stratosphere">STRATOSPHERE</a>
</li>
<li>
<a class="page-scroll" href="#mesosphere">MESOSPHERE</a>
</li>
<li>
<a class="page-scroll" href="#thermosphere">THERMOSPHERE</a>
</li>
<li>
<a class="page-scroll" href="#exosphere">EXOSPHERE</a>
</li>
</ul>
</div>
</div>
</nav>
I'd love some help if you can see what I've done wrong.
I have a bootstrap 3 collapse menu.
It looks like this in iphone:
Here is the code:
<div class="navbar navbar-fixed-top visible-phone">
<div class="navbar-inner">
<div class="container">
<!--Button to collapse the Navigation-->
<a class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse">
<img src="images/expand-menu-button.png"></a>
<div class="nav-collapse collapse">
<ul class="nav nav-justified">
<li>Velkommen</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="Personale"</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
But I need to show normal menu in ipad and desktop. Now this menu button applying for ipad and desktop as well. How can I overcome that issue?
Take a look at this, maybe it'll help. If you scale it in your desktop window it'll appropriately jump to mobile display when necessary.
<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>
Welcome
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</nav>
I believe the problem is in your navbar class. You are missing role="navigation" which makes the navbar accessible from different devices and sizes. You should not need the visible-phone either.
Change:
<div class="navbar navbar-fixed-top visible-phone">
To:
<div class="navbar navbar-fixed-top visible-phone" role="navigation">
Another problem may be fixed by changing:
<div class="nav-collapse collapse">
To:
<div class="collapse navbar-collapse">
Possibly you're missing the viewport meta tag that's used to enable responsiveness, as mentioned in the Bootstrap docs?:
<meta name="viewport" content="width=device-width, initial-scale=1">
I am having issue with using bootstrap navbar with an image logo that overflows on the navbar. The issue is on the collapsed menu when opened on the iPhone. It looks something like this:
Here's the link to my site. Here's how I handle the image logo on the navbar:
<div class="navbar navbar-default navbar-fixed-top brandon-grotesque-bold">
<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 nav-title-logo" href="http://test.com/"> </a>
</div>
<div class="navbar-collapse in" id="navbar-collapse" style="height: auto;">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="/">
Home
</a>
</li>
<li>
<a href="/tentang-kami">
Apaan sih ni?
</a>
</li>
<li>
<a href="/cara-bergabung">
Mau gabung?
</a>
</li>
<li>
<a href="/faq">
Faq
</a>
</li><li>
<a href="/contact">
Contact Us
</a>
</li>
</ul>
<ul id="registerCart" class="nav navbar-nav navbar-right">
<li>
Register
</li>
<li class="divider-vertical"></li>
<li>
Login
</li>
</ul>
</div>
</div>
I am using a background image for the logo. Any ideas on how to fix this? It seems that when I remove: webkit-box-sizing: border-box; from bootstrap it works just fine. I am not sure if this is the way to go.
What about adding something like
.navbar-collapse {
min-width: 100px;
}