I have been trying for a long time to fix this for a long time i have ran through my code multiple times have kept jquery files before bootstrap files and still they just don't work!
(I am new to programming so please forgive me if this is a silly error, Thank you!)
<nav class="navbar navbar-default" 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>
<a class="navbar-brand" href="<?php echo base_url(); ?>">love</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">
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li>Help
</li>
<li>Other
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
For data-target use an ID. And the same ID on the "collapse navbar-collapse" class div.
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<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="<?php echo base_url(); ?>">love</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li>Help
</li>
<li>Other
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Order your jquery and bootstrap in correct order. Check below snippet it works correctly.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>
<nav class="navbar navbar-default" 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>
<a class="navbar-brand" href="<?php echo base_url(); ?>">love</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">
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li>Help
</li>
<li>Other
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
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>
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>
i tried to populate a dynamic navigation bar using data base.there are maintab and subtab tables.
i tried by this code but did not work :
<nav id="bb" class="navbar navbar-default">
<div class="container-fluid">
<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" href="#">home</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<c:if test="${not empty SubtabsList}">
<c:forEach var="maintab" items="${MaintabsList}">
<li>${maintab.description}</li>
<ul class="dropdown-menu" role="menu">
<c:forEach var="subtab" items="${SubtabsList}">
<c:if test="${subtab.maintab.maiTabId eq maintab.maiTabId}">
<li>${subtab.description}</li>
</c:if>
</ul>
</c:forEach>
</c:forEach>
</c:if>
</ul>
</div>
</div>
</nav>
the sample reffering nevigation bar is as follows : i want auto generate this nevigation bar by data base.but unable to include Dropdown <span class="caret"></span>
in proper place.
<!-- <nav id="bb" 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"> -->
<!-- <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> -->
<!-- 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">Link <span class="sr-only">(current)</span></li> -->
<!-- <li>Link</li> -->
<!-- <li class="dropdown"> -->
<!-- Dropdown <span class="caret"></span> -->
<!-- <ul class="dropdown-menu" role="menu"> -->
<!-- <li>Action</li> -->
<!-- <li>Another action</li> -->
<!-- <li>Something else here</li> -->
<!-- <li class="divider"></li> -->
<!-- <li>Separated link</li> -->
<!-- <li class="divider"></li> -->
<!-- <li>One more separated link</li> -->
<!-- </ul> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </div>/.navbar-collapse -->
<!-- </div>/.container-fluid -->
<!-- </nav> -->
<nav id="bb" class="navbar navbar-default">
<div class="container-fluid">
<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" href="#">home</a>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<c:if test="${not empty SubtabsList}">
<c:forEach var="maintab" items="${MaintabsList}">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false">${maintab.description}
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<c:forEach var="subtab" items="${SubtabsList}">
<c:if test="${subtab.maintab.maiTabId == maintab.maiTabId}">
<li>${subtab.description}</li>
</c:if>
</c:forEach>
</ul></li>
</c:forEach>
</c:if>
</ul>
</div>
</div>
</nav>
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>