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>
Related
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.
When a toggle button comes up on a small/mobile screen, I want the menu items left aligned as demonstrated upon re-sizing the screen in this example.
Here is my current code. Can anyone help so that the menu items become automatically left aligned when viewed on small/mobile screen (on desktop screen, proportionately justified centered screen is desired)?
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#mainnavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="collapse navbar-collapse" id="mainnavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
I am having a bit of trouble with my top fixed collapsible bootstrap navbar.
Whenever I click on a link of my navigation bar, a strange horizontal bar that looks like a horizontal scrollbar appears above the navbar and then disappears instantly.
I tried removing all my JS , CSS, and the rest of the page leaving only the navbar, and the bug is still there, so I assume it is something about the syntax of that navbar.
Below is the code
<nav 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">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">My Web</a>
</div>
<div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Proyecto</li>
<li>Galería</li>
<li>Planos</li>
<li>Ubicación</li>
<li>Contacto</li>
</ul>
<ul class="nav navbar-nav">
<li style="font-size:12px"><a>(0000) 4444-4444</a></li>
</ul>
</div>
</div>
</div>
</nav>
Also, bootstrap scrollspy is not working for me on this navbar. I guess it might be the same issue.
Thank you very much for your assistance
EDIT: I found that the problem is on making the navbar collapsible. If I remove the data attributes from the li elements, this problem is gone, but on mobile when I touch on some link the navbar doesnt collapse back.
There is a known bug in bootstrap, according to this post :
Bootstrap 3 nav dropdown
You have to add some CSS to fix it :
.navbar-collapse.in {
overflow-y: visible;
}
This a demo page you need to modify as you needs..DEMO Page
HTML part
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<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="#">My Application</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>Home</li>
<li>Home</li>
</ul></div>
</div></nav>
I found the solution to my problem.
The solution was adding .in class to the data-target attribute of the li elements on the navbar.
<nav 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">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">My Web</a>
</div>
<div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li data-toggle="collapse" data-target="#navbar.in">Home</li>
<li data-toggle="collapse" data-target="#navbar.in">Proyecto</li>
<li data-toggle="collapse" data-target="#navbar.in">Galería</li>
<li data-toggle="collapse" data-target="#navbar.in">Planos</li>
<li data-toggle="collapse" data-target="#navbar.in">Ubicación</li>
<li data-toggle="collapse" data-target="#navbar.in">Contacto</li>
</ul>
<ul class="nav navbar-nav">
<li style="font-size:12px"><a>(54+11) 4444-4444</a></li>
</ul>
</div>
</div>
</div>
</nav>
Maxime Mettley's comment helped. Thank you. But since I was seeing a scrollbar during the collapsing activity, I needed to fix it like this:
.navbar-collapse.in, .navbar-collapse.collapsing {
overflow-y: visible;
}
Bootstrap applies the "collapsing" class as the menu collapses, then "in" once the collapse is complete. I hope this helps someone else.
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'm trying to implement a menu in a webpage with Bootstrap that has some items which are not collapsed in extra-small screens.
I've been able to do progress implementing it. When the screen is extra-small, the items I want to not collapse are working as they should. But the problem is when I click on the navbar-toggle button, the collapsed menu shows up only on the right side of the screen and it's not screen wide as it normally is.
How can I fix this issue?
<nav role="navigation" class="navbar navbar-inverse">
<div class="container">
<!-- Title -->
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Projeto</a>
</div>
<!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
<div class="navbar-header pull-right">
<ul class="nav navbar-nav pull-left">
<li class="pull-left"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> </li>
</ul>
<!-- Required bootstrap placeholder for the collapsed menu -->
<button type="button" style="margin-left:20px;" data-toggle="collapse" data-target=".navbar-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>
</div>
<!-- The Collapsing items navbar-left or navbar-right -->
<div class="collapse navbar-collapse navbar-left">
<ul class="nav navbar-nav pull-right">
<li class="active">Inicio</li>
<li class="dropdown">
O Curso <span class="caret"></span>
<ul class="dropdown-menu">
<li>Sobre o Curso</li>
<li>Disciplinas</li>
</ul>
</li>
<li>Professores</li>
<li>Laboratórios</li>
</ul>
</div>
</div>
</nav>
Try adding navbar-fixed-top with a margin to the top of the collapsed div.