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>
Related
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>
my problem is on this pic:
On mobile view have the same dropdown list like normal screen.
Code Here:
<nav class="navbar navbar-default box-centered" role="navigation">
<div class="container-fluid menu-box">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">"logo here"</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav nav-justified menu" style="margin:0 auto;">
<li class="dropdown">
List ext <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="text-padding">something</li>
<li class="text-padding">other</li>
</ul>
</li>
<li class="text-padding">Two</li>
<li class="text-padding">Three</li>
<li class="text-padding">Fouuur</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
My classes for those elements from stylesheet:
http://pastebin.com/HUUShLNQ
I want to menu look like this, with each element under previous:
Can you help me solve this?
check this fiddle:
https://jsfiddle.net/1ummyodw/1/
you have removed navbar-nav class from navigation ul so if you add that this will work, Updated HTML snippet:
<nav class="navbar navbar-default box-centered" role="navigation">
<div class="container-fluid menu-box">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">"logo here"</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-justified menu" style="margin:0 auto;">
<li class="dropdown">
List ext <span class="caret"></span>
<ul class="dropdown-menu text-center" role="menu">
<li class="text-padding">something</li>
<li class="text-padding">other</li>
</ul>
</li>
<li class="text-padding">Two</li>
<li class="text-padding">Three</li>
<li class="text-padding">Fouuur</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
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.
I have created a navbar and made it container width by adding .container to the .navbar classes. I have created a new row below but its container is less wide than the navbar. I'm sure I've done something stupid but not sure what
<div class="navbar navbar-default navbar-fixed-top container" role="navigation" id="topnavbar">
<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="#"><img src="assets/newOrangelogo2.svg" width="300"></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 pull-right">
<li class="active">Home</li>
<li class="dropdown">
About <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a class="sliding-u-l-r" href="#">About Me</a></li>
<li>Services</li>
<li>Process</li>
<li>Clients</li>
<li>Prices</li>
</ul>
</li>
<li>Work</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
<div class="container">
<div class="row no-gutter">
<div class="col-md-12 mainImage">
Image
</div>
</div>
</div>
I have looked at other questions, but I just can't seem to fix the dropdown menu in my navbar.
I'm trying to make a dropdown menu like the one that is here, it's in the top right corner.
This is my code:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- You'll want to use a responsive image option so this logo looks good on devices - I recommend using something like retina.js (do a quick Google search for it and you'll find it) -->
<a class="navbar-brand" href="#">Loveland Tigers</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li class="dropdown">
Teams<b class="caret"></b>
<ul class="dropdown-menu">
<li>Freshman</li>
<li>Junior Varsity</li>
<li>Varsity</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
The dropdown menu does not show up when I click on the little arrow.
Remove those unneccessary classes from navbar-collapse div:
<div class="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li class="dropdown"> Teams<b class="caret"></b>
<ul class="dropdown-menu">
<li>Freshman</li>
<li>Junior Varsity</li>
<li>Varsity</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
Working Fiddle.