I am using bootstrap to make menu upper-right.
For desktop there are four menu shown on the upper-right correctly
If I make browser narrower for mobile environment.
The icon with there line appears, but even I click it, nothing happens.
These are my source code , is there any point???
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a href="/whitebear/web/app_dev.php/" class="navbar-brand">
<img height="30px;" src="/whitebear/web/bundles/acmetop/img/whitebearLogo.png"></a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar-main" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Nice</li>
<li>Q & A</li>
<li>login</li>
<li><a href="/whitebear/web/app_dev.php/register/" >register</a></li>
</ul>
</div>
</div>
</div>
Add a div to wrap the menu list with id of data-target attribute value(#navbar-main)
<div id="navbar-main" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
// li list
</ul>
Related
bootstrap 4 Navbar scrolling to fixed top Working But when Browser reloading time same times mouse scrolling Navbar fixed not working. why not working i'm not understand?
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Home"></a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Exam Notic</li>
<li>Student List</li>
<li>Contact Us </li>
</ul>
</div>
</div>
</div>
</nav>
I have done a Bootstrap NavBar and I want that when screen size would be sm, md or lg this item: <a class="navbar-brand" href="http://www.upct.es/"><span id="idTextoLogotipo">UPCT</span></a> would be hidden and text-left my menuItems. And when screen size would be xs this <a href... re-appear.
My NavBar code is:
<nav id="idNavMenu" class="navbar navbar-default" role="navigation">
{/*<a class="navbar-brand" href="/inicio"><img id="idFotoLogotipo" width="200px" src="./assets/images/cabecera_CE.jpg"/></a>*/}
<a class="navbar-brand" href="http://www.upct.es/"><span id="idTextoLogotipo">UPCT</span></a>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Menú</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<MenuNavItem to='/alumno/inicio' index={true}>Inicio</MenuNavItem>
<MenuNavItem to='/alumno/nueva_incidencia'>Nueva Incidencia</MenuNavItem>
<MenuNavItem to='/alumno/mis_incidencias'>Mis Incidencias</MenuNavItem>
</ul>
<ul class="nav navbar-nav navbar-right">
<MenuNavItem to=''><span class="glyphicon glyphicon-off"></span> Salir</MenuNavItem>
</ul>
</div>
</nav>
How could I do this? Thank you.
Bootstrap has a class called visible-xs-block which makes elements only visible on xs. Attach that to the <a> tag.
<a class="navbar-brand visible-xs-block" href="http://www.upct.es/"><span id="idTextoLogotipo">UPCT</span></a>
Now the navbar-brand will only be seen on widths corresponding to xs (<768px)
I'm creating a responsible navigation bar using Bootstrap. Now it looks like:
in expanded view, and:
in collapsed view.
In the normal view it looks okay, however in collapsed view I'd like to keep in the bar Sign Up links and not to have it in the collapsed list. Something like this (this screenshot was created in graphical editor):
This is my code:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
</ul>
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
</div>
</div>
</nav>
Fiddle: https://jsfiddle.net/aqgtmy6w/4/
I found this post but collapsed list there is broken, some links shifted left and right.
How can I achieve keeping some links in navbar on collapsing, and how to exclude them from list (so that not to duplicate them)?
Just put the sing up link inside <div class="navbar-header"> and add class="navbar-brand pull-right" to your sign up link. That's it.
Working Snippet
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
#media(min-width:768px){
#sm-view {
display:none;
}
}
#media(max-width:767px){
#lg-view {
display:none;
}
#sm-view {
font-size: 14px;
}
}
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
<a id="sm-view" class="navbar-brand pull-right" href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li id="lg-view"><span class="glyphicon glyphicon-user"></span> Sign Up</li>
</ul>
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
</div>
</div>
</nav>
To have same styling as the nav-links and not like the navbar-brand just add this--- #sm-view {font-size: 14px;} to your media query #media(max-width:767px).
I have a webpage which has a standard bootstrap header (with a logo and dropdown section) and a sidebar for navigation.
I'm trying to make the sidebar collapse when the screen size is small. For this, I've made a toggle button which collapses the menu just fine. But the problem is that it seems that even when the collapse-able menu is closed, some contents still show up on top of everything.
Here's a screenshot to show you what I mean.
The purple box shows that even when the menu is closed, its contents somehow show up on top of the other elements.
Is there a fix for this?
Here's the code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<span class="caret"></span>
<a class="navbar-brand pull-right" href="#">Company Logo</a>
</div>
<ul id="side" class="nav navbar-nav collapse visible-xs">
<li>Home</li>
<li>Stuff</li>
<li>List Example</li>
<li>Contacts</li>
<li class="dropdown">User <span class="caret"> </span>
<ul class="dropdown-menu">
<li>Profile</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</nav>
Try adding this to the navbar-header
<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>
</div>
and remove the visible-xs too from there.
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 -->