I'm using Bootstrap 3 for my website. I have the usual .navbar on the page, and it works well, except for one thing that's out of my fashion. There's like a little dividing line between the .navbar-collapse and .navbar-header when the screen shrinks to the hamburger menu. I've boldened it in the pic.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Stuson.com</title>
<meta name="description" content="Stuson.com is a social media platform for students, by students.">
<meta name="author" content="Stuson Dev Team">
<link href="https://fonts.googleapis.com/css?family=PT+Sans|Roboto" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="css\essentials.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<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="#">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>Link</li>
<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>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="form">
<div class="form-group">
<input type="text" class="form-control hidden-xs" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<span class="hidden-lg hidden-md">Search</span>
</button>
</form>
<ul class="nav navbar-nav navbar-right">
<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>
<script src="http://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/essentials.js"></script>
</body>
</html>
CSS
#noBorder {
border-style: none;
border-radius: 0;
}
#transparent {
background-color: transparent;
}
body {
font-family: "PT Sans", sans-serif;
font-weight: 300;
}
.navbar {
border-style: none;
border-radius: 0;
background-color: #38ba7d;
}
.navbar .navbar-header {
border-style: none;
border-radius: 0;
}
.navbar .navbar-header > .navbar-toggle,
.navbar .navbar-header .navbar-toggle:hover,
.navbar .navbar-header .navbar-toggle:focus {
border-style: none;
border-radius: 0;
background-color: transparent;
}
.navbar .navbar-header .navbar-brand {
color: #fff;
}
.navbar .navbar-collapse {
border-style: none;
border-radius: 0;
}
.navbar .navbar-collapse ul li > a {
color: #fff;
}
.navbar .navbar-collapse form {
display: flex;
flex-direction: row;
border-style: none;
border-radius: 0;
}
.navbar .navbar-collapse form input {
width: 250px;
}
#media (max-width: 786px) {
.navbar .navbar-collapse form input {
width: 10px;
}
}
.navbar .navbar-collapse form .btn {
background-color: transparent;
border-style: none;
border-radius: 0;
}
How can I avoid this? I've tried using border: none on both .navbar-collapse and .navbar-header, but to no avail.
Actually the 'border' is caused by a box-shadow, so add this:
.navbar .navbar-collapse{
box-shadow:none;
}
You can use this CSS code snippet:
#media (max-width: 768px) {
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border: 0;
}
}
Setting .navbar-default or .navbar-inverse to 0 should do the trick.
.navbar-default {
border: 0;
}
Related
My current navbar is a sticky dropdown navbar that will dropdown on a hover rather than a click. I'm trying to have a bottom border on my tabs. It works when the mouse is hovering over the tab, but once the mouse leaves the tab (even to just the dropdown menu items), the bottom border disappears, even though the dropdown menu is still open. All the other hover actions I have on the tabs also go away (I had then text color set to black when hovered over). It makes sense that once the mouse isn't hovering, the changes wouldn't stay there, but the active tag doesn't work, so I'm stuck.
Basically, I want the bottom border to remain while the dropdown menu is open.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ExhibitLab</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.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script>
$(document).ready(function(){
$(".dropdown, .btn-group").hover(function(){
var dropdownMenu = $(this).children(".dropdown-menu");
if(dropdownMenu.is(":visible")){
dropdownMenu.parent().toggleClass("open");
}
});
});
</script>
<link rel="stylesheet" type="text/css" href="header.css">
</head>
<body>
<!--Navbar with dropdown menu-->
<nav id="myNavbar" class="navbar navbar-default navbar-fixed-top" style="background-color:white" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="home.html" style="color:#002873; font-size:35px;font-weight:bold;">ExhibitLab</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" style="font-size:15px">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About</a>
<ul class="dropdown-menu">
<li>History</li>
<li>Timeline</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Publication</a>
<ul class="dropdown-menu">
<li>Report</li>
<li>Additional Sources</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> mail_outline </li>
<li>search</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
And my CSS:
#media screen and (min-width: 768px) {
.dropdown:hover .dropdown-menu, .btn-group:hover .dropdown-menu{
display: block;
}
.dropdown-menu{
margin-top: 0;
}
.dropdown-toggle{
margin-bottom: 2px;
}
.navbar .dropdown-toggle, .nav-tabs .dropdown-toggle{
margin-bottom: 0;
}
}
.navbar-nav a {
padding: 12px 20px;
text-decoration: none;
}
.navbar-nav li.dropdown a{
border-bottom: 5px solid transparent;
color:#787878;
}
.navbar-nav li.dropdown a:hover{
border-bottom: 5px solid #002873;
color: black !important;
background-color: transparent !important;
}
.navbar-nav ul.dropdown-menu {
box-shadow:none;
}
.navbar-nav ul.dropdown-menu a:hover{
border-bottom: 5px solid transparent;
}
You are not targeting the actual li and a tags properly.
You can simply do this .navbar-nav li:hover > a {} and this will keep the border bottom active when hovering over the submenu items.
Run snippet below and click Full Page to see the menu item working nicely.
$(document).ready(function() {
$(".dropdown, .btn-group").hover(function() {
var dropdownMenu = $(this).children(".dropdown-menu");
if (dropdownMenu.is(":visible")) {
dropdownMenu.parent().toggleClass("open");
}
});
});
#media screen and (min-width: 768px) {
.dropdown:hover .dropdown-menu,
.btn-group:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
margin-top: 0;
}
.dropdown-toggle {
margin-bottom: 2px;
}
.navbar .dropdown-toggle,
.nav-tabs .dropdown-toggle {
margin-bottom: 0;
}
}
.navbar-nav a {
padding: 12px 20px;
text-decoration: none;
}
.navbar-nav li.dropdown a {
border-bottom: 5px solid transparent;
color: #787878;
}
.navbar-nav li:hover>a {
border-bottom: 5px solid #002873;
color: black !important;
background-color: transparent !important;
}
.navbar-nav ul.dropdown-menu {
box-shadow: none;
}
.navbar-nav ul.dropdown-menu a:hover {
border-bottom: 5px solid transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>ExhibitLab</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.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script>
</script>
<link rel="stylesheet" type="text/css" href="header.css">
</head>
<body>
<!--Navbar with dropdown menu-->
<nav id="myNavbar" class="navbar navbar-default navbar-fixed-top" style="background-color:white" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="home.html" style="color:#002873; font-size:35px;font-weight:bold;">ExhibitLab</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" style="font-size:15px">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About</a>
<ul class="dropdown-menu">
<li>History</li>
<li>Timeline</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Publication</a>
<ul class="dropdown-menu">
<li>Report</li>
<li>Additional Sources</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> mail_outline </li>
<li>search</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Add this to your CSS:
.dropdown .dropdown-menu li a{
border-bottom: 5px solid #002873;
}
Q1
How can I make my navigation bar static?
Q2
How can I move up the background picture to ensure there is no white gaps and adjust the height of the background image? I think I have to use padding to move up the image and use height to manipulate the height of the background image. Is that correct?
Q3
How can delete the white gap above my footer text at the bottom of the webpage section 3 contact us?
HTML code
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<meta charset="UTF-8">
<title>Liam Docherty | London Web Developer & GFX designer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<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="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></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>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section class="section1">
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section class="section2" id = "section2">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="contact-me" class="contact_section">
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
<footer>
<div class="page">
<h1 class="footer">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h1>
</div>
</footer>
</html>
CSS
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: center;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: red;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: red;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
a:hover {
color: red;
text-decoration: none;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section {
position: relative;
}
.section1 {
height: 90vh;
text-align: center;
color: white;
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
}
.section2 {
height: 95vh;
background-color: #A59E8C;
text-align: center;
color: white;
}
.contact_section {
height: 93vh;
background-color: grey;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
footer {
height: 5vh;
background-color: #4D5061;
text-align: center;
margin:0;
padding:0;
right:0;
bottom:0;
left:0:
}
h1{
font-size: 14pt;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
</style>
1) Use the navbar-fixed-top class provided by Bootstrap to fix the navbar in place.
2) Change the height property of the section1 class.
3) Create a new section, reduce the height, and remove margin/padding from your h1 class (you had a typo in your CSS, .footer not footer).
Result:
https://jsfiddle.net/vnkevsnt/8/
You'll need to add position:fixed to your .navbar.navbar-default to fix it. Also be sure to add width:100% to make it full width.
(Have a look at positioning) - Bootstrap probably can position with a class but I'm not sure.
Regarding the white space at the bottom, I would personally remove the height:5vh from the footer and also add margin:0 to the H1 element.
Bootstrap has nav-fixed class
<nav class="navbar navbar-default navbar-fixed-top">
....
</nav>
Sample: https://getbootstrap.com/examples/navbar-fixed-top/
This is an OLD question for Bootstrap 3 -> changing the collapse point for the navbar, but the methodologies suggested here:
https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint
and here:
Bootstrap 3 Navbar Collapse
do not work for collapsing below 768px, it only seems to work for extending the collapse point, not retracting it. I have a particular situation where my navbar has 3 buttons, so it doesn't need to collapse so early. I would like it to collapse at 420px instead.
Is there a CSS solution to this? If not, can somebody point me towards the correct attribute in the bootstrap customisation page which I need to change and download? Is it the generic breakpoints perhaps? Because there is nothing I can see which says Navbar breakpoints:
http://getbootstrap.com/customize/
As requested, my HTML for the navbar is simply:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<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>
</div>
<div class="navbar-collapse collapse" id = "navbar">
<ul class="nav navbar-nav navbar-left">
<li class = "navbar_buttons"><a id = "new_route_button"><strong>New Route</strong></a></li>
<li class="divider-vertical"></li>
<li class = "navbar_buttons"><a id = "clear_route_button">Clear Route</a></li>
</ul>
<ul class="nav navbar-nav navbar-right"> <!--Right justified navbar list-->
<li class = "navbar_buttons"><a id = "about_button">About</a></li>
</ul>
</div>
</div> <!-- Container -->
</nav> <!-- End of Navbar Container -->
Then I have some CSS to add a vertical division:
/*Preventing vertical dividers from appearing collapsed*/
#media (max-width: 420px) {
.navbar-collapse .nav > .divider-vertical {
display: none;
}
}
/*Defining the vertical dividers*/
.navbar .divider-vertical {
height: 50px;
margin: 0 9px;
border-right: 1px solid #ffffff;
border-left: 1px solid #DADADA;
}
.navbar-inverse .divider-vertical {
border-right-color: #222222;
border-left-color: #111111;
}
Yes, changing the breakpoint to anything less than 768px is different than changing the breakpoint over 768px. You need to override all of the Bootstrap defaults that normally make it collapse.
#media only screen and (min-width: 420px) {
.collapse {
display: block;
}
.navbar-header {
float: left;
}
.navbar-toggle {
display: none;
}
.navbar-nav.navbar-left {
float: left;
margin: 0;
}
.navbar-nav.navbar-right {
float: right;
margin: 0;
}
.navbar-nav>li {
float: left;
}
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
}
#media only screen and (max-width: 420px) {
.collapse {
display: none;
}
.navbar-header {
display: block;
}
}
http://www.bootply.com/wpUuFIZqJ2
The following code snippet is based on the original answer, but also works when there are drop down menus in the navbar.
<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>
<style>
#media only screen and (min-width: 560px) {
.collapse {
display: block;
}
.navbar-header {
float: left;
}
.navbar-toggle {
display: none;
}
.navbar>.container .navbar-brand,
.navbar>.container-fluid .navbar-brand {
margin-left: -15px;
}
.container>.navbar-header,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container-fluid>.navbar-collapse {
margin-right: 0;
margin-left: 0;
}
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav.navbar-right {
float: right;
margin: 0;
}
.navbar-nav>li {
float: left;
}
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
.navbar-nav .open .dropdown-menu {
position: absolute;
float: left;
width: auto;
margin-top: 2px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.navbar-inverse .navbar-nav .open .dropdown-menu .divider {
background-color: #e5e5e5;
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #333;
}
.navbar-nav .open .dropdown-menu>li>a {
line-height: 1.42857143;
}
.navbar-nav .open .dropdown-menu>li>a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 3px 20px;
}
.navbar-right .dropdown-menu {
right: 0;
left: auto;
}
}
#media only screen and (max-width: 559px) {
.collapse {
display: none;
}
.navbar-header {
display: block;
}
}
</style>
<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="#">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">
<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">
<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>
I have made my navbar taller in bootstrap using
.navbar {
padding-top: 15px;
padding-bottom: 15px;
}
However now the background of the active navbar link looks like this
How do I get the pictured grey background to span the full height of the navbar? I tried various things such as increasing the padding, and this does make it taller, but it doesn't actually extend over the purple, which is what I want.
Example here: http://jsfiddle.net/pjxd9cka/
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Bootstrap 3 Menu Generator
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
Getting started
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>
Components
</li>
<li>
JavaScript
</li>
<li class="active">
Customize
</li>
</ul>
</nav>
</div>
</header>
<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.7/js/bootstrap.min.js"></script>
The active element is what's producing the highlighted color, meaning you need to make the active element larger if you want it to grow.
One solution is to add your additional padding to the a elements inside the menu instead of to the outer menu container. Since bootstrap's default padding is 15px, you'll need to make it 15+15=30px top and bottom. It may also be different padding for different media screen sizes. Once you do this, in order to keep the navbar-header aligned, you'll need to add a margin to the top of that too.
.navbar {
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
background-color: teal;
}
.navbar-header {
margin-top: 15px;
}
.nav li a {
padding-top: 30px;
padding-bottom: 30px;
}
Here's a fiddle illustrating this.
A quick fix would be to add a negative margin to your links.
.navbar a {
margin-top: -15px;
margin-bottom: -15px;
Or perhaps a better method would be to change play with the height of the links.
.navbar a {
height: 100%;
margin-top: 0;
margin-bottom: 0;
I've redefined paddings and margins for three other classes instead of the .navbar class:
.navbar-brand
.navbar-toggle
.navbar-nav > li > a
Please check the result: http://jsfiddle.net/glebkema/hwk7kjmo/
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.navbar {
/*
padding-top: 15px;
padding-bottom: 15px;
*/
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-brand {
height: 80px; /* 50px by default */
padding-bottom: 30px; /* 15px by default */
padding-top: 30px;
}
.navbar-toggle {
margin-bottom: 20px; /* 8px by default */
margin-top: 20px;
padding-bottom: 12px; /* 9px by default */
padding-top: 12px;
}
#media (min-width: 768px) {
.navbar-nav > li > a {
padding-bottom: 30px; /* 15px by default */
padding-top: 30px;
}
}
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Bootstrap 3 Menu Generator
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
Getting started
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>
Components
</li>
<li>
JavaScript
</li>
<li class="active">
Customize
</li>
</ul>
</nav>
</div>
</header>
<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.7/js/bootstrap.min.js"></script>
This may be tricky to answer/explain properly but:
Building small website for school project. Using bootstrap. When screen is below 780px the nav bar turns into the mobile design with the button icon when clicked has the dropdown menu.
The issue is the menu is meant to push content under it down when its open but it is just going over my content on some page/ under a slideshow i have on main page and it is unclickable as the content sits over it.
I've tried to include all relevant code, it is a complete mess however. Because of all the HTML/CSS and bootstrap and jquery links it's too hard to post in a jfiddle.
Can anyone see anything that would be wrong??
Here is a screenshot of the problem:
http://imgur.com/c5WMDZi
HTML:
<!-- Start of nav bar -->
<div class="bottomHeader">
<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">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 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>Home</li>
<li class="dropdown">
Products<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>
</ul>
</li>
<li class="dropdown">
Services<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>
</ul>
</li>
<li class="dropdown">
Deals<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>
</ul>
</li>
<li>My Account</li>
<li class="dropdown searchDropDown">
Search<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><form role="search">
<input type="text" class="form-control searchBox" placeholder="Search">
<button type="submit" class="btn btn-default">Submit</button>
</form>
</li>
</ul>
</li>
</ul>
<!-- SEARCH BUTTON -->
<div class="searchSection">
<form class="searchRight" role="search">
<input type="text" class="form-control searchBox" placeholder="Search">
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div> <!-- end bottom header div -->
</div> <!-- end header div -->
</header>
<!-- START OF PAGE CONTENT -->
<content>
<div class="background">
<div class="container2">
<div class="trial"> BOO<br>BOO<br>BOO<br>BOO<br>BOO<br>BOO<br>
</div>
</div>
</div>
</content>
</html>
CSS:
.headerBox {
background-color: #0076a3;
width: 100%;
margin: 0 auto;
height: 115px;
}
.topHeader {
background-color: transparent;
}
.dellImgBox {
padding-left: 42px;
background-color: transparent;
}
.socialMediaBox {
float: right;
margin-right: 53px;
padding-top: 5px;
}
.smImg {
background-color: transparent;
margin-right: 5px;
display: inline-block;
}
.smImgLeft {margin-left: 30px;}
.socialMediaBox a:hover {
background: transparent;
}
/******* Bottom Header ********/
.bottomHeader {
border: 0px solid black;
background-color: transparent;
height: 53px;
}
.navbar-default {
background-color: transparent;
border: 0px;
}
.navbar-header {
float: right;
}
.trial {
margin: 20px 20px;
border: 1px solid black;
min-height: 300px;
color: #444;
}
/* Have nav on right position & display DDmenu */
#media screen and (min-width: 772px) {
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
margin-right: 30px;
margin-left: 0;
margin-top: -13px;
}
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
#media screen and (max-width: 771px) {
.topHeader {display:none;}
.headerBox {height: 55px;}
ul.nav.navbar-nav {width: 260px;}
}
/* Hide Main Search input field # Xwidth */
#media screen and (max-width: 882px) {
.searchSection {display: none;}
.searchDropDown {display: block;}
}
#media screen and (min-width: 883px) {
.searchDropDown {
display: none!important;
}
}
In your CSS file you should remove height: 53px; and it will work.
.bottomHeader {
border: 0px solid black;
background-color: transparent;
height: 53px;
}
Change to this one:
.bottomHeader {
border: 0px solid black;
background-color: transparent;
}
That's because you have overrided navbar-default class and added background-color:transparent. Just comment it and you can find it on the top of all.
DEMO
.navbar-default {
/*background-color: transparent;*/
border: 0px;
z-index:100000;//Add this property
}