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>
Related
i'm trying to create a navbar with logo, like this layout: Layout on desktop
and with mobile, like this layout: Layout on mobile
In the first layout, i need that the navbar is center vertically. I have write this snippets of code:
<div class="row">
<div class="col-md-3">
<a href="#" class="pull-left">
<img src="image/logo.png" height="300px" id="logo" class="img-responsive">
</a>
</div>
<div class="col-md-9">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#example-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>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Search</li>
<li>Archives</li>
<li>Education</li>
<li>About</li>
</ul>
</div>
</nav>
</div>
</div>
That's work, except the vertically centered navbar and the logo on mobile go under the navbar, how i can obtain this two layout? Thanks in advance. :)
Your images do not appear making the question unclear on what you're trying to achieve. From what I understand is that you run out of space on mobile causing the elements to stack. Try adding a resizing attribute to the logo to make it a compatible size for mobile. Please revise your question though.
You can try align="center":
<div align="center" style="max-height:inherit">
<div class="col-md-9">
<nav align="center" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#example-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>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Search</li>
<li>Archives</li>
<li>Education</li>
<li>About</li>
</ul>
</div>
</nav>
</div>
And please tell me if it works.
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>
Question Background:
I have a standard Bootstrap collapsible NavBar that is pulled-right.
The Issue:
This is the NavBar on a non-mobile device:
This is pulled right to allow for this desired right-aligned posistion.
This is the NavBar collpased on a mobile device:
**Note that the item in the dropdown are aligned right, this make sense as its pulled right but I want them centered when on a mobile device, whilst keeping them aligned right on a non-mobile device
The Code:
I thought that setting text-center on the <ul> list would solve the issue but it does not:
<div class="navbar">
<nav class="navbar navbar-default navbarColour" role="navigation" id="nav">
<div class="container">
<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>
<img src="~/Images/DC.png" class="dc">
</div>
<div class="middleNavPadding">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="pull-right text-center">
********Set text-center but this dosen't work********
<ul class="nav navbar-nav text-center">
<li>Services</li>
<li>Our Mission</li>
<li>Projects Gallery</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
Any help with setting these <ul> list elements centered but keep the menu items pulled right on a non mobile device would be great.
Instead of using pull-right you should use navbar-right.Just put navbar-right to the unordered-list, remove the pull-right div, and the links will be centered on small devices.Working example.
<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar">
<nav class="navbar navbar-default navbarColour" role="navigation" id="nav">
<div class="container">
<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>
<img src="~/Images/DC.png" class="dc">
</div>
<div class="middleNavPadding">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right text-center">
<li>Services
</li>
<li>Our Mission
</li>
<li>Projects Gallery
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
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'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.