I'm having a hard time figuring out how I can implement bootstrap 3 menu in a way such that it's right-floated and part of it collapse, e.g.:
Brand Item 1 Item 2 Item 3 Item 4
when collapsed look that way:
Brand Item 4 [Toggle menu]
I think I'm getting close, but can't make it work properly:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".menu-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="#">Brand</a>
</div>
<div class="navbar-right">
<div class="collapse navbar-collapse menu-collapse">
<ul class="nav navbar-nav">
<li>Test right-middle</li>
</ul>
</div>
<ul class="nav navbar-nav">
<li>Test right-most</li>
</ul>
</div>
Any ideas how I can fix "test right-most" not to get pushed to next line?
Include a separate navbar-header for the non-collapsible item
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Title -->
<div class="navbar-header pull-left">
BRAND
</div>
<!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
<div class="navbar-header pull-right">
<ul class="nav pull-left">
<li class="navbar-text pull-left">Item 3</li>
</ul>
<!-- Required bootstrap placeholder for the collapsed menu -->
<button type="button" 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>
<!-- Additional navbar items -->
<div class="collapse navbar-collapse navbar-right">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
</nav>
JSFIDDLE
Try to place the contents inside of a div with the class: navbar-header
So instead of declaring:
<div class="navbar-right">
Use the following class instead:
<div class="navbar-header pull-right">
Related
I have made a navbar with bootstrap that contains a navigation menu & a button.
The navigation menu is floating to left side and button is on the right side. I want to change their position so the menu would stick to right side & the button would be on the left side. Please help me how to do such thing.. Here's my code:
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<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="icon-bar"></span>
</button>
Wiredwiki
</div><!-- Navbar Header -->
<div class="collapse navbar-collapse" id="navbar-collapse">
Download Now
<ul class="nav navbar-nav">
<li>Feedback</li>
<li>Gallery</li>
<li>Features</li>
<li>Faq</li>
<li>Contact</li>
</ul>
</div>
</div><!-- End Container -->
</nav><!-- End Navbar -->
<div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
Download Now
I hope the above code works for you. I have made navbar-right for the whole div, navbar-left for the button.
Make use of navbar-left and navbar-right
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<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="icon-bar"></span>
</button>
Wiredwiki
</div><!-- Navbar Header -->
<div class="collapse navbar-collapse" id="navbar-collapse">
Download Now
<ul class="nav navbar-nav navbar-right">
<li>Feedback</li>
<li>Gallery</li>
<li>Features</li>
<li>Faq</li>
<li>Contact</li>
</ul>
</div>
</div><!-- End Container -->
</nav><!-- End Navbar -->
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>
Im trying to make my Bootstrap Navbar responsive and when the browser scales down to phone size, the navbar does shrink and hide everything, but the navigation button doesn't show up. Can someone take a look at my code and see if im doing something wrong? Everything seems fine. Thanks for taking a look.
<nav class="navbar navbar-default navbar-inverse" id="navpad">
<!-- Navbar -->
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target=".nav-collapse #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>
IC <!-- Brand -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Links -->
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(Current)</span></li>
<li>Nosotros</li>
<li class="dropdown">
<!-- Dropdown -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false">Ministerios<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Ministerio 1</li>
<li>Ministerio 2</li>
<li>Ministerio 3</li>
<li>Ministerio 4</li>
<li>Ministerio 5</li>
</ul>
</li>
<!-- /Dropdown -->
<li>Servicios</li>
<li>Miembros</li>
<li>Contacto</li>
</ul>
</div>
<!-- /Navbar Collapse -->
</div>
<!-- /Navbar Header -->
</div>
<!-- /Container-fluid -->
</nav>
<!-- /Navbar -->
Remove the collapse from the navbar toggle, and set the correct data-target..
<div class="container-fluid">
<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>
...
http://codeply.com/go/3kSRfMNfmj
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.