The navbar that I have managed to create is working just fine. However, when I collapse the navbar by re-sizing the window it disappears as I try to open the menu in that view.
Why is the drop-down menu disappearing in mobile view. What am I doing wrong?
HTML code:
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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 page-scroll" href="#page-top">Kirori Mal College</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 navbar-right">
<li class="dropdown">
Why Recruit? <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Why Recruit?</li>
<li>Demographics</li>
<li>Faculty</li>
<li>Academics</li>
<li>Alumni</li>
</ul>
</li>
<!-- End of nav bar tabs -->
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Link to Website and
Link to CSS file.
Related
I'm currently creating a responsive Bootstrap navbar in Angular. I'm using Bootstrap v3.
However, the toggle navigation doesn't open in a mobile view and the "Manage" dropdown isn't working.
app.component.html
<div class="container">
<div class="row">
<div class="col-sm-12">
<app-header></app-header>
</div>
</div>
</div>
header.component.html
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Recipe Book</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 class="active">Recipes <span class="sr-only">(current)</span></li>
<li>Shopping Lists</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Manage <span class="caret"></span>
<ul class="dropdown-menu">
<li>Save Data</li>
<li>Fetch Data</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
i want to add a logo to the right side of the bootstrap navbar. Added it using navbar-right class. but it doesn't resize within the size of the navbar. So added some css but now it is displayed in the left side after external css. Also is there a way to increase the height of the navbar without losing responsiveness? code is as follows.
#logofpin {
max-width: 5%;
max-height: 100%;
}
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</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 class="active">Home<span class="sr-only">(current)</span></li>
<li class="dropdown">
Products <span class="caret"></span>
<ul class="dropdown-menu">
<li>Risk Engine</li>
<li>Analytics</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<img alt="Forestpin logo" src="assets/images/logofpin.png" id="logofpin">
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Try adding pull-left and pull-right css and form html as like below snippet.
.log-img {
max-height: 100%;
}
.p0 {
padding: 0 !important;
}
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="https://www.w3schools.com/cssref/w3css.gif" class="img-responsive log-img">
</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 class="active">Home<span class="sr-only">(current)</span></li>
<li class="dropdown">
Products <span class="caret"></span>
<ul class="dropdown-menu">
<li>Risk Engine</li>
<li>Analytics</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I'm new and I don't speak english very good but I think that You can understand me and help :). I just started my adventure with bootstrap.
So... my navbar when has only 4 /li/ work with all screen sizes.
Here is the code:
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- 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>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" href="index.html">Business Casual</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>
About
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
But the problem is when I modify navbar and add for example 2 more /li/ like this:
<!-- Navigation -->
<nav class="navbar navbar-default " role="navigation">
<div class="container">
<!-- 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="#">Health</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>
Main menu
</li>
<li>
<a href="#>Doctors</a>
</li>
<li>
Presciprions
</li>
#if(Auth::check())
<li>
Panel
</li>
<li>
Logout
</li>
#else
<li>
Login
</li>
<li>
Register
</li>
#endif
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
My navbar is not responsive with screen between 768 and 992 / and / 992 and 1200. I think, because It doesnt work on Tablets and my navbar is curling - I would like to be always on one line, no matter witch size screen is. Where is my mistake?
Link to page
Please add this code to your custom file css
#media screen (min-width: 768px) and (max-width:1200){
.nav>li>a {
padding: 36px 5px;
}
}
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'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.