my goal is to have several parts of the navigation:
LOGO
notification icon
language selector
The proper menu.
On big screens all of the should be visible.
On small screens:
LOGO
notification
language selector AND the menu are collapsed
I have managed to achieve the functionalty based on:
Exclude menu item from the collapse of bootstrap 3 navbar
This is the fiddle:
https://jsfiddle.net/papa_zulu/0efL781p/3//
and the code:
<body>
<nav role="navigation" class="navbar navbar-default">
<div class="container">
<!-- Title -->
<div class="navbar-header pull-left">
LOGO
</div>
<!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
<div class="navbar-header pull-right">
<ul class="nav pull-left">
<!-- This works well for static text, like a username -->
<li class="navbar-text pull-left"><i class="fa fa-envelope fa-2x"></i></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>
<!-- Fix to make collapsed appear below when visible via button -->
<div class="visible-xs-block clearfix"></div>
<!-- Collapsing section to the left -->
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li><i class="fa fa-flag fa-2x"></i></li>
</ul>
</div>
<!-- Collapsing section to the right -->
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li id="menu_home"><a class="nav" href="#"><i class="fa fa-home fw fa-2x"></i><span class="visible-xs-inline menu-xs-caption">Home</span></a></li>
<li id="menu_setup"><a class="nav" href="#"><i class="fa fa-cog fw fa-2x"></i><span class="visible-xs-inline menu-xs-caption">Settings</span></a></li>
<li id="menu_logout_li"><a class="nav" href="#"><i class="fa fa-power-off fa-2x"></i><span class="visible-xs-inline menu-xs-caption">Logout</span></a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="alert alert-warning">We are but visitors on this rock, hurling through time and space at sixty-six thousand miles an hour.</div>
</div>
Notice:
The notification icon is located LEFT of the "expand button" on small screen -- this is correct.
The problem:
I would like BOTH the notification icon AND the language selector to be located to the LEFT of the menu on big screens.
So the layout on big screens should be:
LOGO envelope flag all_themenu_icons
and one small screens:
LOGO envelope button <-- this is correct now
Any ideas ?
Is this what you are looking for: jsfiddle
<nav role="navigation" class="navbar navbar-default">
<!-- Title -->
<div class="navbar-header">
LOGO
<!-- Required bootstrap placeholder for the collapsed menu -->
<button type="button" data-toggle="collapse" data-target="#navbar-main" class="navbar-toggle collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav visible-xs pull-right">
<!-- This works well for static text, like a username -->
<li class="navbar-text"><i class="fa fa-envelope fa-2x"></i></li>
</ul>
</div>
<!-- Fix to make collapsed appear below when visible via button -->
<!-- Collapsing section to the right -->
<div class="collapse navbar-collapse" id="navbar-main">
<ul class="nav navbar-nav navbar-right">
<li class="navbar-text hidden-xs"><i class="fa fa-envelope fa-2x"></i></li>
<li><i class="fa fa-flag fa-2x"></i></li>
<li id="menu_home"><a class="nav" href="#"><i class="fa fa-home fw fa-2x"></i><span class="visible-xs-inline menu-xs-caption">Home</span></a></li>
<li id="menu_setup"><a class="nav" href="#"><i class="fa fa-cog fw fa-2x"></i><span class="visible-xs-inline menu-xs-caption">Settings</span></a></li>
<li id="menu_logout_li"><a class="nav" href="#"><i class="fa fa-power-off fa-2x"></i><span class="visible-xs-inline menu-xs-caption">Logout</span></a></li>
</ul>
</div>
Related
I have such navigation and it would be responsive, but if I resize the windoes toogle button appear but it does not working.
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- Container wrapper -->
<div class="container">
<!-- Navbar brand -->
<a class="navbar-brand me-2" asp-controller="Main" asp-action="MaIndex">
<i class="far fa-grin-beam-sweat"></i> Welcome
</a>
<!-- Toggle button -->
<button class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarButtonsExample"
aria-controls="navbarButtonsExample"
aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarButtonsExample">
<!-- Left links -->
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" asp-controller="Language" asp-action="LaIndex">Learning HUB</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Upload files</a>
</li>
</ul>
<!-- Left links -->
<div class="d-flex align-items-center">
<form method="post" asp-action="logout" asp-controller="account">
<button type="submit" class="nav-link btn btn-link py-0" style="width:auto">
#User.Identity.Name
</button>
</form>
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</div>
</nav>
<!-- Navbar -->
JS Fiddler attached https://jsfiddle.net/mygus/z9o4wk7u/3/
What am I doing wrong?
Thank you,
M.
this worked for me.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Navbar brand -->
<a class="navbar-brand me-2" asp-controller="Main" asp-action="MaIndex">
<i class="far fa-grin-beam-sweat"></i> Welcome
</a>
<!-- Toggle button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<!-- Left links -->
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" asp-controller="Language" asp-action="LaIndex">Learning HUB</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Upload files</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-controller="Administration" asp-action="ListRoles">List roles</a>
</li>
</ul>
<!-- Left links -->
<div class="d-flex align-items-center">
<form method="post" asp-action="logout" asp-controller="account">
<button type="submit" class="nav-link btn btn-link py-0" style="width:auto">
#User.Identity.Name
</button>
</form>
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</div>
</nav>
Ok i have this fiddle: https://jsfiddle.net/9jb3Lp4k/ . My problem is that on smaller device when i hover over left side menu my right menu go bellow. Can i fixed that so that i get resizible right content. Any suggestion?
<nav class="navbar navbar-inverse sidebar" 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-sidebar-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>
<span class="navbar-brand"> <img src="{{asset('/assetsfront/img/night-life.png')}}"></span>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="user-info">
<img src="{{asset('/assetsfront/img/defaultuser.png')}}">
<span class="username">username</span>
</div>
<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Galerija<span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity fa fa-picture-o"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Pregledaj galerije <span style="font-size:18px;" class="pull-right hidden-xs showopacity fa fa-eye"></span></li>
<li>Dodaj galeriju <span style="font-size:18px;margin-right: 2px;" class="pull-right hidden-xs showopacity fa fa-plus"></span></li>
<li>Izmijeni galeriju<span style="font-size:18px;" class="pull-right hidden-xs showopacity fa fa-edit"></span></li>
</ul>
</li>
<li >Logout<span style="font-size:16px;" class="pull-right hidden-xs showopacity fa fa-user"></span></li>
</ul>
</div>
</div>
</nav>
You can resolve this issue through the display: flex; css property. wrap the navigation and content with a new div class (.new-class - same as like the below css example) and call the display:flex. Please see the code below.
CSS
.new-class{
display:flex;
}
Please see the updated jsfiddle.
How can I use two navbar-toggle menus next to each other? If I click on the first icon it will open normally but if I click on the second icon, the first one doesn't close.
Here is what I am trying to do
<nav class="navbar-blue" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header navbar-default">
<button type="button" class="navbar-toggle navbar-user" data-toggle="collapse" data-target="#navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle navbar-menu" data-toggle="collapse" data-target="#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="#">
Logo goes here
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-default" id="navbar-collapse-1">
<ul class="nav navbar-nav client-nav navbar-right">
<li>
<a class="active" href="#">My Projects</a>
</li>
<li>
Search
</li>
<li>
Post Project
</li>
<li class="hidden-xs">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="fa fa-user"></span><span class="fa fa-sort-desc"></span></a>
<ul class="dropdown-menu client-dropdown">
<li>My Profile</li>
<li>Account Settings</li>
<li>Sign Out</li>
</ul>
</li>
</ul>
</div>
<!-- User menu to show on screens < 768px -->
<div class="collapse navbar-collapse navbar-default" id="navbar-collapse-2">
<ul class="nav navbar-nav client-nav navbar-right">
<li>My Profile</li>
<li>Account Settings</li>
<li>Sign Out</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I had to update bootstrap to the latest version. Your demo is using 3.0.0 whereas 3.3.5 is the latest. Regardless, according to the documentation from bootstrap's site, you can accomplish this by listening for the show.bs.collapse event and triggering .collapse('hide') for the other menus.
$(function(){
$('.navbar-blue .navbar-collapse').on('show.bs.collapse', function(e) {
$('.navbar-blue .navbar-collapse').not(this).collapse('hide');
});
});
Demo: Jsfiddle
This is what I have. How do I center these 3 navbar items to the center of the page without messing everything up in mobile view? Thanks.
Any CSS tricks?
<div class ="container" id = "main">
<div class="navbar navbar-fixed-top">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button class="navbar-toggle" data-target=".navbar-responsive-collapse"
data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">
About us
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">Services <strong class="caret"></strong></a>
<li>
<ul class="nav navbar-nav">
<li class="active">
Contact
</li>
</div><!-- end nav-collapse -->
</div><!-- end container -->
</div><!-- end navbar -->
I am trying to implement the responsive bootstrap navigation bar but having trouble handling the collapsed state.
Once I resize the window I get to the state where this button appears:
When I click this button nothing happens.
Below I attached my code for my current navigation bar. Could it be the naming of the divs that is wrong? When I read the documentation it says that the collapse plugin is required - shouldn't this plugin be included in the standard bootstrap for angular?
I also tried this solution: https://stackoverflow.com/a/17672546 - but it is as if when the state is changed in the collapse="isCollapsed" no effect is achieved.
<nav class="navbar navbar-default" 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="#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="navbar-collapse-1" ng-controller="HeaderController">
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/logbook')}">Log Books</li>
<li ng-class="{ active: isActive('/logentry')}">Logs</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active: isActive('/logentry/create')}">Create Log</li>
<li ng-class="{ active: isActive('/status')}">Show Status</li>
<li ng-class="{ active: isActive('/statistics')}">Statistics</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
If you are not using twitter bootstrap's javascript then you can use angular-ui bootstrap's collapse directive to collapse your navbar. Just make sure to put an ng-click directive on the .navbar-toggle button to negate the current value of the collapse variable. Add another ng-click to the .navbar-collapse element to collapse the navbar when a link has been clicked.
Here's a DEMO
<body ng-click="collapse = false">
<div class="navbar navbar-default" ng-click="$event.stopPropagation()">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
ng-click="collapse = !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">
Title
</a>
</div>
<div class="collapse navbar-collapse"
ng-controller="HeaderController"
collapse="!$parent.collapse" ng-click="$parent.collapse = false">
<ul class="nav navbar-nav navbar-right">
<li>link</li>
</ul>
</div>
</div>
</div>
</body>
UPDATE:
1 I noticed that you have an ng-controller within the .navbar-collapse item, since an ng-controller creates a child scope, you have to use collapse="!$parent.collapse" and ng-click="$parent.collapse = false" within that element itself. The plunker has been updated above, check it out.
2 As a side note, you can take it a step further and add an ng-click="collapse = false" within your html body to collapse the navbar when the user clicks outside of the navbar, just make sure to add ng-click="$event.stopPropagation()" to the .navbar element to avoid collapsing it while the user is clicking the .navbar-toggle.
Your code seems to be fine please see here http://jsbin.com/xinujuvi/1/edit
make sure that you've got reference to bootstrap.min.js script
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Make sure to referrence this :
ui-bootstrap-tpls-0.11.0.min.js
You can download it from their site
And this is the code :
<nav class="navbar navbar-default" role="navigation" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle btn-danger" ng-click="isCollapsed = !isCollapsed">
<span class="icon-bar btn-info"></span>
<span class="icon-bar btn-info"></span>
<span class="icon-bar btn-info"></span>
</button>
<a class="navbar-brand">YouSite</a>
</div>
<div class="navbar-collapse collapse" collapse="!isCollapsed" id="navbar-collapse-1" ng-controller="HeaderController">
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/logbook')}">Log Books</li>
<li ng-class="{ active: isActive('/logentry')}">Logs</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active: isActive('/logentry/create')}">Create Log</li>
<li ng-class="{ active: isActive('/status')}">Show Status</li>
<li ng-class="{ active: isActive('/statistics')}">Statistics</li>
</ul>
</div><!-- /.navbar-collapse -->