there is an issue my navbar-brand i put logo with img-responsive but it doesn't fit as below screen shot and code.
if i change the width and height then the responsive of image finish. and content overlap.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="index.php"><img src="logo.jpg" class="img-responsive" alt="Responsive image"></a>
</div>
</div>
<div class="container">
<!-- 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">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> ABOUT AIE <span class="caret"> </span> </a>
<ul class="dropdown-menu" >
<li class="size"> Home </li>
<li class="divider"> </li>
<li class="size"> Vision & Mission </li>
<li class="divider"> </li>
<li class="size"> History </li>
<li class="divider"> </li>
<li class="size"> Chairman's Message </li>
<li class="divider"> </li>
<li class="size"> Rector's Message </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> ADMISSIONS <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> Intermediate </li>
<li class="divider"> </li>
<li class="size"> Undergaduate </li>
<li class="divider"> </li>
<li class="size"> Graduate </li>
<li class="divider"> </li>
<li class="size"> Diploma Programs </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> RESOURCES <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> QEC Vision & Mission
<li role="presentation" class="divider"> </li>
<li class="size"> QEC Programme Teams
<li role="presentation" class="divider"> </li>
<li class="size"> Library </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> SHORT COURSES <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> English Language Development Centre Short Courses (ELDC) </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Montessori </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> OTHER DEPARTMENTS <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> Continuing Professional Development (CPD) </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Kids University </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Need Based Training </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Leadership & Management </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> CAMPUS VIEW <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> 3D Campus View </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> CONTACT US <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> Location </li>
</ul>
</li>
</div>
</nav>
</div>
and the css file is this
body { padding-top: 40px; }
#media screen and (max-width: 768px) {
body { padding-top: 0px; }
}
.navbar-default
{
background-color: #002E5F;
}
content overlap even i doesn't change the height and width
Here is your Answer
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.navbar-default
{
background-color: #002E5F;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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>
</div>
<div class="container">
<!-- 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><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="img-responsive" alt="Responsive image"></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> ABOUT AIE <span class="caret"> </span> </a>
<ul class="dropdown-menu" >
<li class="size"> Home </li>
<li class="divider"> </li>
<li class="size"> Vision & Mission </li>
<li class="divider"> </li>
<li class="size"> History </li>
<li class="divider"> </li>
<li class="size"> Chairman's Message </li>
<li class="divider"> </li>
<li class="size"> Rector's Message </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> ADMISSIONS <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> Intermediate </li>
<li class="divider"> </li>
<li class="size"> Undergaduate </li>
<li class="divider"> </li>
<li class="size"> Graduate </li>
<li class="divider"> </li>
<li class="size"> Diploma Programs </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> RESOURCES <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> QEC Vision & Mission
<li role="presentation" class="divider"> </li>
<li class="size"> QEC Programme Teams
<li role="presentation" class="divider"> </li>
<li class="size"> Library </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> SHORT COURSES <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> English Language Development Centre Short Courses (ELDC) </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Montessori </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> OTHER DEPARTMENTS <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> Continuing Professional Development (CPD) </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Kids University </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Need Based Training </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Leadership & Management </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> CAMPUS VIEW <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> 3D Campus View </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> CONTACT US <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> Location </li>
</ul>
</li>
</div>
</nav>
</div>
</body>
</html>
You need to write custom CSS for navbar-brand class. Just follow this.
.navbar{
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-bottom: 0;
height: auto;
}
.navbar-brand{
height: auto;
margin-left: 15px;/* add margin in left. Because padding is removed from left. */
padding: 5px 0; /* Remove padding from left and right. User need to click on logo not outside of logo. */
width: 200px;
}
#media (min-width: 768px){
.navbar-brand{
width: auto; /* You can change the width when you need. */
}
}
I belive that what you want can be acomplished with CSS.
.navbar-brand {
padding: 0px;
}
.navbar-brand img {
height: 100%;
width: auto;
}
Be careful, your markup seems a bit odd. Some tags are extra or missing.
Check out this fiddle for the result https://jsfiddle.net/L5r42dd6/12/
Related
I am having a lot of trouble making navbar item to active on click.
I have included this navbar file to different pages but when i click on an item it doesn't change its class or its styling.
I have tried many techniques from using jquery onclick functions to add class active on click to changing changing css onclick but nothing is working. Any possible help will be highly appreciated . Navbar code is below :
<div class="header" id="home">
<div class="content white agile-info">
<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="#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="index.php">
<h1><span class="fa fa-signal" aria-hidden="true"></span> Soft <label>Hr Agency</label></h1>
</a>
</div>
<!--/.navbar-header-->
<div class="nav navbar-nav mr-auto" id="bs-example-navbar-collapse-1" style="margin-right: -5%">
<nav class="link-effect-2" id="link-effect-2">
<ul class="nav navbar-nav navbar-right" >
<li class="active">Home</li>
<li class="dropdown">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Services 2</li>
<li class="divider"></li>
<li>Services 3</li>
<li class="divider"></li>
<li>Codes</li>
<li class="divider"></li>
<li>Icons</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Jobs<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>Walk-ins</li>
<li>Bpo Jobs</li>
<li>Teaching Jobs</li>
<li>Diploma Jobs</li>
<li>Tech Support</li>
<li>Finance Jobs</li>
<li>Part time Jobs</li>
<li>Health Care</li>
<li>Hospitality</li>
<li>Internships</li>
<li>Research Jobs</li>
<li>Defence Jobs</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Recruiter Updates</li>
<li>Upload Resume</li>
<li>Shortcodes</li>
</ul>
</div>
</div>
</ul>
</li>
<li>Events</li>
<li>Professionals</li>
<li>Contact</li>
<li >
<a style="margin-top: -5%" href="login.php">
<button type="submit" onclick="location.href='login.php';" style="float: right;background: #23B684;width: 100%;color: white" class="btn btn-block">
<i class="fa fa-user" aria-hidden="true"> </i> Login</button></a></li>
</ul>
</nav>
</div>
<!--/.navbar-collapse-->
<!--/.navbar-->
</div>
</nav>
</div>
</div>
Normally this should work using JQuery:
$('.nav .navbar-nav li a').click(function(){
$(this).addClass("active"); });
you have also to check what the active class is changing.
I think what you mean is for every <li> item that you click, an active class name would be added to its list of class names. If I'm right in what I'm thinking, here's my suggestion:
HTML
<div class="header" id="home">
<div class="content white agile-info">
<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="#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="index.php">
<h1><span class="fa fa-signal" aria-hidden="true"></span> Soft <label>Hr Agency</label></h1>
</a>
</div>
<!--/.navbar-header-->
<div class="nav navbar-nav mr-auto" id="bs-example-navbar-collapse-1" style="margin-right: -5%">
<nav class="link-effect-2" id="link-effect-2">
<ul class="nav navbar-nav navbar-right main-ul" >
<li class="active">Home</li>
<li class="dropdown">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Services 2</li>
<li class="divider"></li>
<li>Services 3</li>
<li class="divider"></li>
<li>Codes</li>
<li class="divider"></li>
<li>Icons</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Jobs<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>Walk-ins</li>
<li>Bpo Jobs</li>
<li>Teaching Jobs</li>
<li>Diploma Jobs</li>
<li>Tech Support</li>
<li>Finance Jobs</li>
<li>Part time Jobs</li>
<li>Health Care</li>
<li>Hospitality</li>
<li>Internships</li>
<li>Research Jobs</li>
<li>Defence Jobs</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Recruiter Updates</li>
<li>Upload Resume</li>
<li>Shortcodes</li>
</ul>
</div>
</div>
</ul>
</li>
<li>Events</li>
<li>Professionals</li>
<li>Contact</li>
<li ><a style="margin-top: -5%" href="login.php"> <button type="submit" onclick="location.href='login.php';" style="float: right;background: #23B684;width: 100%;color: white" class="btn btn-block"> <i class="fa fa-user" aria-hidden="true"> </i> Login</button></a></li>
</ul>
</nav>
</div>
<!--/.navbar-collapse-->
<!--/.navbar-->
</div>
</nav>
</div>
</div>
CSS
.active {
background: red;
}
JavaScript (JQuery)
$('.main-ul li').click(function(e) {
e.preventDefault();
$(this).addClass('active').siblings().removeClass('active');
})
I added a main-ul on the first <ul> so I can easily reference to it and its <li> items then I created .active in CSS. Now whenever you click on an <li> item, a red background is applied to it indicating that it has an active class name.
I am having trouble making my navbar responsive using Bootstrap. Instead of hiding the submenu lists, I want it to display and make it responsive as well. I just borrowed the logo of google because my logo has the same size with it. Once I shrink it, its not making responsive. Im using the navbar-header, nav, etc. classes of bootstrap but it doesn't work. Please see my code below for your review.
ul.nav ul{
padding-left: 0;
margin-top: 10px;
}
ul.nav li{
list-style: none;
}
.menu-header{
border-bottom: solid 1px #000;
padding-bottom: 3px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="navbar navbar-default" style="margin-bottom: 0;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 class="" src="https://www.google.com.ph/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png">
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="#">
</a>
</li>
<li class="">
<div class="">
<div class="menu-header">MENU1</div>
<ul>
<li>
Sub1 of MENU1
</li>
<li>
Sub2 of MENU1
</li>
</ul>
</div>
</li>
<li class="">
<div class="">
<div class="menu-header">MENU2</div>
<ul>
<li>
Sub1 of MENU2
</li>
<li>
Sub2 of MENU2
</li>
<li>
Sub3 of MENU2
</li>
<li>
Sub4 of MENU2
</li>
<li>
Sub5 of MENU2
</li>
</ul>
</div>
</li>
<li class="">
<div class="">
<div class="menu-header">MENU3</div>
<ul>
<li>
Sub1 of MENU3
</li>
<li>
Sub2 of MENU3
</li>
<li>
Sub3 of MENU3
</li>
</ul>
</div>
</li>
<li class="">
<div class="">
<div class="menu-header">MENU4</div>
<ul>
<li>
Sub1 of MENU4
</li>
<li>
Sub2 of MENU4
</li>
<li>
Sub3 of MENU4
</li>
</ul>
</div>
</li>
</ul>
<div class="clearfix"></div>
<div class="pull-right">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle dropdown-login-btn" data-toggle="dropdown" aria-expanded="false">
☻ Log In <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
here
</li>
</ul>
</div>
<a class="btn btn-primary reg" href="#">◘ Register</a>
</div>
</div> <!-- End of Container -->
<div class="fgol-header-line"></div>
</div>
<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>
It would be helpful if you show in a image how it should look like.
I come up with my guess you were trying to achieve:
ul.nav ul{
padding-left: 0;
margin-top: 10px;
}
ul.nav li{
list-style: none;
}
.menu-header{
border-bottom: solid 1px #000;
padding-bottom: 3px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="navbar navbar-default" style="margin-bottom: 0;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainSubNav" aria-expanded="false" aria-controls="navbar">
<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 class="" src="https://www.google.com.ph/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png">
</a>
</div>
<div class="collapse navbar-collapse" id="mainSubNav">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
MENU1 <span class="caret"></span>
<ul class="dropdown-menu">
<li>
Sub1 of MENU1
</li>
<li>
Sub2 of MENU1
</li>
</ul>
</li>
<li class="dropdown">
MENU2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>
Sub1 of MENU2
</li>
<li>
Sub2 of MENU2
</li>
<li>
Sub3 of MENU2
</li>
<li>
Sub4 of MENU2
</li>
<li>
Sub5 of MENU2
</li>
</ul>
</li>
<li class="dropdown">
MENU3 <span class="caret"></span>
<ul class="dropdown-menu">
<li>
Sub1 of MENU3
</li>
<li>
Sub2 of MENU3
</li>
<li>
Sub3 of MENU3
</li>
</ul>
</li>
<li class="dropdown">
MENU4 <span class="caret"></span>
<ul class="dropdown-menu">
<li>
Sub1 of MENU4
</li>
<li>
Sub2 of MENU4
</li>
<li>
Sub3 of MENU4
</li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"></div>
<div class="pull-right">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle dropdown-login-btn" data-toggle="dropdown" aria-expanded="false">
☻ Log In <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
here
</li>
</ul>
</div>
<a class="btn btn-primary reg" href="#">◘ Register</a>
</div>
</div> <!-- End of Container -->
<div class="fgol-header-line"></div>
</div>
<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>
Just for reference, JsFiddle
I've seen this topic,
Bootstrap 3 collapsed menu not working on mobile screens
but still couldnt resolve, i get the button, but it doesn't work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GREENLUX</title>
<!-- Bootstrap -->
<link href="http://greenlux.pt/apresentacao/css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav>
<div class="container">
<!-- 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="http://greenlux.pt"><img src="http://greenlux.pt/logo_gl.png" width="125" height="21" alt=""/></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Início <span class="sr-only">(current)</span> </li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li>GU10 </li>
<li class="dropdown"> E27 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Par30 </li>
<li>Par38 </li>
</ul>
</li>
<li class="dropdown"> R7S <span class="caret"></span>
<ul class="dropdown-menu">
<li role="separator" class="divider"></li>
<li> 360º</li>
<li role="separator" class="divider"></li>
<li>78mm </li>
<li>118mm </li>
<li>138mm </li>
<li role="separator" class="divider"></li>
<li> 180º</li>
<li role="separator" class="divider"></li>
<li>118mm </li>
</ul>
</li>
<li>G24 </li>
<li class="dropdown"> 2G11 <span class="caret"></span>
<ul class="dropdown-menu">
<li>10W </li>
<li>32W </li>
</ul>
</li>
<li class="dropdown"> SPOT <span class="caret"></span>
<ul class="dropdown-menu">
<li>Redondo </li>
<li>Quadrado </li>
</ul>
</li>
<li class="dropdown"> DOWNLIGHTS <span class="caret"></span>
<ul class="dropdown-menu">
<li>15W </li>
<li>30W </li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">PLAFON
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Redondo </li>
<li>Oval </li>
</ul>
</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>Separated link </li>
<li role="separator" class="divider"></li>
<li>One more separated link </li>
</ul>
</li>
-->
</ul>
<!--
<ul class="nav navbar-nav navbar-right hidden-sm">
<li>Link </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>Separated link </li>
</ul>
</li>
</ul>
-->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://greenlux.pt/apresentacao/js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://greenlux.pt/apresentacao/js/bootstrap.js"></script>
</body>
</html>
and btw, how can i put the menus open by mouse hover?
i've tried already and couldn't do it
You need to put at least a class of navbar on your nav tag. But apperently there was something else wrong so here is a working example of the default navbar. From there you can change the CSS to your liking. I also added one change to make the dropdowns appear on hover.
https://jsfiddle.net/gno4zcrr/1/
.dropdown:hover .dropdown-menu {
display: block;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container">
<!-- 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="http://greenlux.pt">
<img src="http://greenlux.pt/logo_gl.png" width="125" height="21" alt="" />
</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>GU10 </li>
<li class="dropdown">
E27 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Par30 </li>
<li>Par38 </li>
</ul>
</li>
<li class="dropdown">
R7S <span class="caret"></span>
<ul class="dropdown-menu">
<li role="separator" class="divider"></li>
<li> 360º</li>
<li role="separator" class="divider"></li>
<li>78mm </li>
<li>118mm </li>
<li>138mm </li>
<li role="separator" class="divider"></li>
<li> 180º</li>
<li role="separator" class="divider"></li>
<li>118mm </li>
</ul>
</li>
<li>G24 </li>
<li class="dropdown">
2G11 <span class="caret"></span>
<ul class="dropdown-menu">
<li>10W </li>
<li>32W </li>
</ul>
</li>
<li class="dropdown">
SPOT <span class="caret"></span>
<ul class="dropdown-menu">
<li>Redondo </li>
<li>Quadrado </li>
</ul>
</li>
<li class="dropdown">
DOWNLIGHTS <span class="caret"></span>
<ul class="dropdown-menu">
<li>15W </li>
<li>30W </li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">PLAFON
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Redondo </li>
<li>Oval </li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I am trying to align the selections in the navbar with the edges of the jumbotron, so that the rapidcodes logo aligns with the edge of the grey box in 'Newest Additions' and the 'login' button aligns with the right edge of the grey box.
See screenshot of current page:
Code:
td {
text-align: left;
vertical-align: central;
padding: 4px;
}
.products {
display: inline-block;
margin: 15px;
}
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
Try packing your code inside the external div with the class of 'container'.
<div class="container"><!--Pack your code inside the container-->
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</div><!--end container-->
Your content probably has a container .container. Also wrap your navbar with this.
I have a drop down menu with bootstrap, here is a fiddle:
http://jsfiddle.net/ajfbqfej/
<nav id="navvy" class="navbar navbar-inverse" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex8-collapse">
<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 navbar-ex8-collapse">
<ul class="nav navbar-nav">
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="#">Capabilities</a>
<ul class="dropdown-menu">
<li>Precision Machining</li>
<li>CNC Turning</li>
<li>Swiss Screw Machining</li>
<li>Medical Machining</li>
<li>CNC Milling</li>
<li>Secondary Operations</li>
</ul>
</li>
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="#">Products</a>
<ul class="dropdown-menu">
<li>Miniature Parts</li>
<li>Nozzles</li>
<li>Bike Chain Link</li>
<li>Shafts</li>
<li>Fasteners & Screws</li>
<li>Brackets, Plates & Mounts</li>
<li>Valves</li>
</ul>
</li>
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="#">Material Specialties</a>
<ul class="dropdown-menu">
<li>Stainless Steel</li>
<li>Plastic</li>
<li>Aluminum</li>
<li>Steel</li>
<li>Brass</li>
<li>Hastelloy</li>
<li>Monel </li>
<li>Titanium</li>
</ul>
</li>
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/About">About</a>
<ul class="dropdown-menu">
<li>Quality Assurance</li>
<li>Equipment</li>
<li>Industries Served</li>
</ul>
</li>
<li class=" ">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/Gallery">Gallery</a>
</li>
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/Resources">Resources</a>
<ul class="dropdown-menu">
<li>Latest News</li>
</ul>
</li>
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/Contact-Us">Contact Us</a>
<ul class="dropdown-menu">
<li>Careers</li>
<li>RFQ</li>
</ul>
</li>
<li class=" ">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/Glossary">Glossary</a>
</li>
<li class=" ">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/Resources/Forster-Blog">Blog</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
The top level items are not clickable, can anyone see what I might be doing wrong? Otherwise it works great.
Thanks!
OK - for me I just had to remove the data-toggle attribute from my anchors... weird!