Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I would like to add a column to academic affairs so I can have two groups of four links adjacent to each other but I have failed at every attempt. Any help will be greatly appreciated.
</button><div class="navbar navbar-inverse">
<div class="navbar-header">
<button
IBHE
</div><!--enf of navbar-header -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home">Home</li>
<li>Executive Director's Corner
<ul class="dropdown-menu">
<li>Meet Dr. James Applegate</li>
<li>Blog</li>
<li>Media</li>
</ul>
</li>
<li> Academic Affairs
<ul class="dropdown-menu">
<li>IBHE Approval & Review</li>
<li>Academic Degree Programs</li>
<li>Colleges & Universities </li>
<li>SARA</li>
<li class="divider"></li>
<li>Enrollment & Degrees</li>
<li>Transfer of Academic Credits</li>
<li>P-20 Education Pipeline</li>
<li>Underrepresented Groups</li>
<li>Distance Education</li>
I am guessing you are using bootstrap, here is what i recomend below will give you an example of a few different Column layouts in dropdown part of the menu.
.dropdown-menu {
min-width: 200px;
}
.dropdown-menu.columns-2 {
min-width: 400px;
}
.dropdown-menu.columns-3 {
min-width: 600px;
}
.dropdown-menu li a {
padding: 5px 15px;
font-weight: 300;
}
.multi-column-dropdown {
list-style: none;
margin: 0px;
padding: 0px;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: #333;
white-space: normal;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: #262626;
background-color: #999;
}
#media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default" role="navigation">
<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="#">Brand</a>
</div>
<!--/.navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
One Column <b class="caret"></b>
<ul class="dropdown-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>
<li class="dropdown">
Two Column <b class="caret"></b>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here that's extra long so we can see how it looks
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<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>
</div>
</div>
</ul>
</li>
<li class="dropdown">
Three Column <b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<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>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<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>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<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>
</div>
</div>
</ul>
</li>
<li>Link
</li>
</ul>
</div>
<!--/.navbar-collapse-->
</nav>
<!--/.navbar-->
External resources being used:
Important:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Related
I've customized a basic Bootstrap navbar - that's about all I'm really using for a project, to not collapse when shrunk. However, whenever the menu is put into a smaller window, it seems to place the brand on top of the menu itself.
There will be enough space to not worry about this with the actual menu, so I'd like to figure out how to prevent it from doing this - here is the related script:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
And my applied CSS for it at the moment:
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
.container-fluid {
width: 80%;
margin: auto;
}
Your <div class="navbar-header"> is a block, just move <a class="navbar-brand" href="#">Project</a> into navbar block.
.navbar-brand {
margin-top: 3px;
margin-right: 15px;
}
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li,
.navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right !important;
}
.container-fluid {
width: 90%;
margin: auto;
}
.navbar-brand {
margin-top: 2px;
margin-right: 15px;
}
<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-inverse">
<div class="container-fluid">
<div id="navbar" class="navbar-collapse collapse">
<a class="navbar-brand" href="#">Project</a>
<ul class="nav navbar-nav">
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Fixed top</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
Add below markup just below of <div class="container-fluid"> in your html.
<a class="navbar-brand" href="#">Project</a>
Below is working fiddle for the same
Responsive navigation with bootstrap
I am creating a practice navbar using bootstrap cdn. Everything is cake except by default there is this underline that I either wish to remove or customize, but I didn't put it there so I am not sure how to identify it in my css selectors.
Using chrome dev tools I found an item display: table that when I disable it the bar jumps above the tabs. But the table would likely relate to what is behind the tabs, not the actual line itself.
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mockup NavBar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style type="text/css">
body {
background-color: gray;
}
#home {
padding: 11px;
background-color: #64a3dd;
color: white;
border-radius: 3px;
}
.divider {
width: 80%;
}
a {
color: #ffffff;
}
.dropdown {
margin-right: 1px;
margin-left: 1px;
border-radius: 3px;
background-color: #64a3dd;
}
</style>
</head>
<body>
<div class="menu-mockup" style="center">
<ul class="nav nav-tabs">
<li class="active">
<div id="home">
<i class="fa fa-home"></i>
</div>
</li>
<li class="dropdown">
Community
<ul class="dropdown-menu">
<li>Recent Activity</li>
<li class="divider"></li>
<li>Member Forum</li>
<li class="divider"></li>
<li>Member List</li>
<li class="divider"></li>
<li>Member Groups</li>
</ul>
</li>
<li class="dropdown">
Pet Help
<ul class="dropdown-menu">
<li>Pets for Dummies</li>
<li class="divider"></li>
<li>Expected Costs</li>
<li class="divider"></li>
<li>Breeds</li>
<li class="divider"></li>
<li>Pet Quiz</li>
</ul>
</li>
<li class="dropdown">
Pets for Sale
<ul class="dropdown-menu">
<li>Buying Guide</li>
<li class="divider"></li>
<li>Search by Location</li>
<li class="divider"></li>
<li>Search by Species</li>
<li class="divider"></li>
<li>Pet Accessories</li>
</ul>
</li>
<li class="dropdown">
Pet Services
<ul class="dropdown-menu">
<li>Veterinarians</li>
<li class="divider"></li>
<li>Grooming</li>
<li class="divider"></li>
<li>Training</li>
<li class="divider"></li>
<li>Pet Clubs</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
All you need to do is add this to your CSS:
.menu-mockup .nav-tabs {
border-bottom: 0;
}
Working code snippet:
body {
background-color: gray;
}
#home {
padding: 11px;
background-color: #64a3dd;
color: white;
border-radius: 3px;
}
.divider {
width: 80%;
}
a {
color: #ffffff;
}
.dropdown {
margin-right: 1px;
margin-left: 1px;
border-radius: 3px;
background-color: #64a3dd;
}
.menu-mockup .nav-tabs {
border-bottom: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<body>
<div class="menu-mockup" style="center">
<ul class="nav nav-tabs">
<li class="active">
<div id="home">
<i class="fa fa-home"></i>
</div>
</li>
<li class="dropdown">
Community
<ul class="dropdown-menu">
<li>Recent Activity
</li>
<li class="divider"></li>
<li>Member Forum
</li>
<li class="divider"></li>
<li>Member List
</li>
<li class="divider"></li>
<li>Member Groups
</li>
</ul>
</li>
<li class="dropdown">
Pet Help
<ul class="dropdown-menu">
<li>Pets for Dummies
</li>
<li class="divider"></li>
<li>Expected Costs
</li>
<li class="divider"></li>
<li>Breeds
</li>
<li class="divider"></li>
<li>Pet Quiz
</li>
</ul>
</li>
<li class="dropdown">
Pets for Sale
<ul class="dropdown-menu">
<li>Buying Guide
</li>
<li class="divider"></li>
<li>Search by Location
</li>
<li class="divider"></li>
<li>Search by Species
</li>
<li class="divider"></li>
<li>Pet Accessories
</li>
</ul>
</li>
<li class="dropdown">
Pet Services
<ul class="dropdown-menu">
<li>Veterinarians
</li>
<li class="divider"></li>
<li>Grooming
</li>
<li class="divider"></li>
<li>Training
</li>
<li class="divider"></li>
<li>Pet Clubs
</li>
</ul>
</li>
</ul>
</div>
</body>
You have to add another css rule. The property affecting the line is "nav tabs" and its located in the bootstrap.min.css file.
I need to make drop down for one <li> element
<div class="head-nav">
<span class="menu"></span>
<ul class="cl-effect-15">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li> </li>
<li> </li>
<li class="pull-right">More options
<ul class="dropdown-menu">
<li>one</li>
<li>two</li>
</ul>
</li>
<li class="pull-right">logout</li>
<div class="clearfix"> </div>
</ul>
</div>
but sub menu doesn't opens
using Bootstrap v3.1.1
NOTE : even adding after jquery also doesn't works
You have to use
<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>
In your code, you miss class "dropdown" for li tag.
For correct dropdown, you have to use this sintax:
<li class="dropdown">
Item Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<!--- Put your menu-item here -->
</ul>
</li>
You can refer the Bootstrap documentation here
The issue is causing by the missing of data-toggle="dropdown" in tag a
Maybe you search this solution: JSBin
For example:
You need add the content: attr(data-hover); on your before element.
HTML:
<li class="HOVER">More options
CSS:
.HOVER {
border: solid 7px #000;
padding: 20px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
position: relative;
width: 300px;
}
.HOVER:hover a:before {
content: attr(data-hover);
color: red;
display: block;
background: #000;
position: absolute;
top: 100%;
left: -7px;
right: -7px;
padding: 15px;
}
You're missing the the following attributes:
class="dropdown-toggle" data-toggle="dropdown"
and those attributes go on the element you want to be the "Hook" for the dropdown list.
Sample markup below:
<li class="dropdown">
<a href="#lala" class="dropdown-toggle" data-toggle="dropdown" >
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="listbox">
<li>jmeter</li>
<li>EJB</li>
<li>Jasper Report</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
Edit
Here is an example Fiddle; notice how if you remove data-toggle="dropdown", the code won't work . :)
The dropdown in the navigation is not working. The html is as follows. Help will be appreciated.
<div class="row menu_bg">
<div class="container">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>SVN</li>
<li>iOS</li>
<li>VB.Net</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Swing</li>
<li>jMeter</li>
<li>EJB</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>PHP</li>
</ul>
</div>
Your html is fine the only thing missing is the jQuery code and the bootstrap js, add these in the same order under your last </div>.
<script src="https://code.jquery.com/jquery-1.11.1.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
You need to include the bootstrap and jquery libraries, they handle the logic for displaying the dropdown interface working example below:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="row menu_bg">
<div class="container">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>SVN</li>
<li>iOS</li>
<li>VB.Net</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Swing</li>
<li>jMeter</li>
<li>EJB</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>PHP</li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
You had a container inside a row and content inside a container, I've corrected that. The correct hierarchy is container => row => col-??-##. If you put it in any other order, it will malfunction. This should work. I'm assuming you've added thetag for bootstrap.min.js (or whatever flavor you prefer) andjquery`. If not, please do so.
<div class="container menu_bg">
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">SVN</li>
<li role="presentation">iOS</li>
<li role="presentation">VB.Net</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Java<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Swing</li>
<li>jMeter</li>
<li>EJB</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>PHP</li>
</ul>
</div>
</div>
</div>
I'm new to bootstrap and am having a bit of trouble positioning a fluid dropdown menu. I would like to have it in the center or my page and have tried a few things, but it's not quite right.
I have tried to add a class of span6 and then add float: none; margin: 0 auto; to the css, and this does center it, but when the responsive menu kicks in it's somewhere between the middle instead of the left side. This also messes with the menu items.
I have also tried placing text-align:center; in various places to see if that would do anything, but it doesn't seem to effect anything.
Any help would be wonderful!
Here is my html
<div class="container-fluid">
<div class="row-fluid">
<div class="span12" >
<div class="navbar ">
<div class="container-fluid">
<a data-target=".unique1" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
<div class="nav-collapse collapse navbar-responsive-collapse unique1">
<ul class="nav">
<li><?=anchor('/frontpage', 'Who we are');?></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Do you need Diligence?<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
<li> Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> Separated link
</li>
<li> One more separated link
</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
<li> Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> Separated link
</li>
<li> One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
set margin-left:auto; margin-right:auto on ul with class nav
In Bootstrap.css line: 3102 edit
.nav > li > a {
/* display: block; */
}
Edit the bootstrap.css file line: 3638 to 3651 as shown:
.navbar .nav {
position: relative;
left: 0;
display: block;
/* float: left;
*/ margin: 0 10px 0 0;
}
.navbar .nav.pull-right {
float: right;
margin-right: 0;
}
.navbar .nav > li {
/* float: left; */
}
For the following HTML works. It displays the menu center aligned.
<html>
<head>
<link rel="stylesheet" href="public/css/LNedit.css"><link rel="stylesheet" href="public/css/bootstrap2.css">
<style>
.navbar-inner {
text-align: center !important;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12 navbar-inner" >
<div class="navbar ">
<div class="container-fluid">
<a data-target=".unique1" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
<div class="nav-collapse collapse navbar-responsive-collapse unique1">
<ul class="nav">
<li><?=anchor('/frontpage', 'Who we are');?></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Do you need Diligence?<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
<li> Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> Separated link
</li>
<li> One more separated link
</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
<li> Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> Separated link
</li>
<li> One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"> </script><script type="text/javascript" src="js/markdown.js"> </script><!--script(type='text/javascript', src='js/main.js') --><!--script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js')--><!--script(type='text/javascript', src='js/ui-bootstrap-tpls-0.4.0.min.js')--><script type="text/javascript" src="js/bootstrap-markdown.js"></script>
</body>
</html>