<!-- navbar-->
<nav class="navbar navbar-default">
<div class="container-fluid">
MYSITE
<ul class="nav navbar-nav">
<li class="dropdown">
Tags <span class="caret"></span>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
<li>menu6</li>
<li>menu7</li>
<li>menu8</li>
<li>menu9</li>
<li>menu10</li>
<li>menu11</li>
<li>menu12</li>
<li>menu13</li>
<li>menu14</li>
<li>menu15</li>
<li>menu16</li>
<li>menu17</li>
<li>menu18</li>
<li>menu19</li>
</ul>
</li>
</ul>
</div>
</nav>
I am learning bootstrap and i am trying to create a layout through the same. My dropdown menu is not working and am not able to detect the fault. Please help!
Its working fine, You need to add jquery, Bootstrap ja, Bootstrap CSS` then if will work
<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"/>
<!-- navbar-->
<nav class="navbar navbar-default">
<div class="container-fluid">
MYSITE
<ul class="nav navbar-nav">
<li class="dropdown">
Tags <span class="caret"></span>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
<li>menu6</li>
<li>menu7</li>
<li>menu8</li>
<li>menu9</li>
<li>menu10</li>
<li>menu11</li>
<li>menu12</li>
<li>menu13</li>
<li>menu14</li>
<li>menu15</li>
<li>menu16</li>
<li>menu17</li>
<li>menu18</li>
<li>menu19</li>
</ul>
</li>
</ul>
</div>
</nav>
Related
I'm new to bootstrap and in my application I want to have a navbar at the top of the page. The navbar should contain the brand name and then to the right of it it should have some options. But whenever I use navbar-right it doesn't work and the page I get looks like this
As you can see everything is squashed together with the brand name on the left hand side. What I have tried to fix this is by using pull-right which does work perfectly but I want to know why navbar-right isn't.
homeTemplate.html
<body>
<nav class="navbar navbar-default">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar-header">
MyApp
</div>
<ul class="nav navbar-nav navbar-right">
<li>Profile</li>
<li>Notifications</li>
<li>Messages</li>
<li>Options</li>
</ul>
</div>
</div>
</nav>
</body>
I think you might have missed some library.
See the given below snippet I have added
Jquery library
bootstrap.js and
bootstrap.css
Its working fine. see the below snippet
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar-header">
MyApp
</div>
<ul class="nav navbar-nav navbar-right">
<li>Profile</li>
<li>Notifications</li>
<li>Messages</li>
<li>Options</li>
</ul>
</div>
</div>
</nav>
There might be a version issue. For Bootstrap version 4, Use <ul class="nav navbar-nav ml-auto"> for moving element to the right.
Try using two Unordered-Lists, one for the nav-brand and the elements you require to be aligned left and then use separate unordered-lists with the "nav navbar-nav navbar-right" class to get the right aligned elements. Check the snippet below.
<nav class="navbar navbar-default navbar-static-top">
<div class="topnav">
<ul class = "nav navbar-nav">
<li><a class="navbar-brand bigbrand" href="{% url 'urls' %}">BRAND name</a></li>
<li><a class="navbar-link" href="{% url 'urls' %}">Home</a></li>
<li><a class = "navbar-link" href="urls">News</a></li>
<li><a class = "navbar-link" href="urls">Contact</a></li>
<li><a class = "navbar-link" href="{% url 'urls' %}">test</a></li>
</ul>
<ul class = "nav navbar-nav navbar-right">
<li>logout</li>
</ul>
</div>
</nav>
I'm learning bootstrap for the first time and the dropdown menu seems to be unformatted and doesn't look like the other menu options that I've made. Its also not appearing when clicked, but I followed a tutorial exactly. Any ideas on the problem or mistakes?
<html>
<head>
<title>Bootstrap Testing</title>
<link rel="stylesheet" type="text/css" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class='navbar navbar-inverse'>
<div class='container-fluid'>
<!--Logo-->
<div class='navbar-header'>
<a href="#" class='navbar-brand'>MY LOGO</a>
</div>
<!--Menu Items-->
<div>
<ul class='nav navbar-nav'>
<li class='active'>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<!--drop down menu-->
<li class='dropdown'>
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>Friends</li>
<li>Photos</li>
<li>Settings</li>
</ul>
</li>
</div>
</nav>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js" type="text/javascript"></script>
</body>
You need to place the <li class='dropdown'> within the <ul class='nav navbar-nav'>. (The presence of an <li> element without a parent list element should probably be cause for alarm in any case.)
So that part of your HTML should be shuffled to look like:
<!-- [...] -->
<!--Menu Items-->
<div>
<ul class='nav navbar-nav'>
<li class='active'>Home</li>
<li>About</li>
<li>Contact</li>
<!--drop down menu-->
<li class='dropdown'>
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>Friends</li>
<li>Photos</li>
<li>Settings</li>
</ul>
</li>
</ul>
</div>
<!-- [...] -->
Here's a Bootply of the revised code. Hope this helps! Let me know if you have any questions.
The bootstrap.min.js needs to come after you load jquery. I always like to start my documents with the basic template bootstrap shows here: http://getbootstrap.com/getting-started/#template
It makes it a lot easier to make sure I have everything loading and in the right order.
You will also want to move your dropdown li to be inside your ul with the "nav navbar-nav" class. Like this:
<ul class='nav navbar-nav'>
<li class='active'>Home</li>
<li>About</li>
<li>Contact</li>
<!--drop down menu-->
<li class='dropdown'>
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>Friends</li>
<li>Photos</li>
<li>Settings</li>
</ul>
</li>
</ul>
Log in button on the right side of navbar
<nav class="navbar navbar-inverse">
Klokkebutikk
<ul class="nav navbar-nav">
<li>Herre</li>
<li>Dame</li>
<li>Barn</li>
<li>Logg inn</li>
</ul>
</nav>
Just add the link in another ul below and use the pull-right class
<nav class="navbar navbar-inverse">
Klokkebutikk
<ul class="nav navbar-nav">
<li>Herre</li>
<li>Dame</li>
<li>Barn</li>
</ul>
//add here
<ul class="pull-right nav navbar-nav">
<li>Logg inn</li>
</ul>
</nav>
Example here - http://www.bootply.com/NJ0UqYdKsh
I am trying to learn Bootstrap and I am currently coding the navbar of my new website. But everytime I put a div with nav-collapse navbar-responsive-collapse collapse classes the links in the UL of the navbar just dissapear. Here is the code:
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<a class="navbar-brand" href="#">FUTURE LOGO</a>
<div class="nav-collapse navbar-responsive-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home white"></span> Domu</li>
<li>Section</li>
<li>Section</li>
<li class="dropdown">Section<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>Subsection</li>
<li>Subsection</li>
<li>Subsection</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown-header</li>
<li>Subsection</li>
<li>Subsection</li>
</ul><!-- End dropdown-menu-->
</li><!-- End dropdown-->
</ul><!--End nav-->
</div><!-- End navbar-collapse-->
</div> <!-- End container-->
</div> <!-- End navbar-->
I have just figured it out. In the new version of the bootstrap, there is nothing like nav-collapse but It is changed to navbar-collapse.
Include java script file which are in ./js folder.
Ok I have looked all over the css and can't seem to figure out what is determining the width between the top level links on my navbar. I need to make them just barely smaller so when it adjust for a sub 900px screen it doesn't turn it into a 2 row navbar instead of the usual 1 row.
I tried something like navbar > li but had no success getting them to move. But to no avail so I am asking
Thank You here is my navbar code
<div class="navbar-wrapper">
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="index.html">PC3</a>
<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
About Us <b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Services</li>
<li>Core values</li>
<li>Staff</li>
<li>How To Know God</li>
<li>Volunteering</li>
<li>Giving</li>
<li>Directions & Contact</li>
</ul>
</li>
<li class="dropdown">
Adult Ministries<b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Overview</li>
<li>Personal Spiritual Trainer</li>
<li>Care Team</li>
<li>Hospitality team</li>
<li>Intercessory Prayer</li>
<li>Women's Ministry</li>
<li>Amplified Worship</li>
<li>Sermons</li>
</ul>
</li>
<li class="dropdown">
Student Ministries<b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Overview</li>
<li>Just For Parents</li>
</ul>
</li>
<li class="dropdown">
PC Kids<b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Overview</li>
<li>Videos</li>
</ul>
</li>
<li class="dropdown">
Life Groups<b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Schedule</li>
<li>Leaders & Group Info</li>
</ul>
</li>
<li>Events</li>
<li>Missions</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
</div> <!-- /.container -->
</div><!-- /.navbar-wrapper -->
I figured out what I was looking for, didn't look in the second css, which has the responsive css and didn't edit the padding for the .inner class.
That was my fault thank you tho