I'm using boostrap for my navigation bar.
We've now been required to adapt our code and I find the need to have a dropdown on one of the navigation items however I am struggling to get it to fit in with the bootstrap navbar and get it to display correctly.
I'm trying to make it so that there's a caret with a dropdown beside 'Profile' that on hover reveal 2 links, which currently I've put in a placeholder of the profile place.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Home </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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="General.CSS">
<link rel="stylesheet" href="Blog.CSS">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- NavBar -->
<nav class="navbar navbar-inverse">
<article class="container-fluid">
<article class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="NavTitle" href="Home.html">John Doe</a>
</article>
<article class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<ul class="dropdown-menu">
<li> Home </li>
<li> Profile </li>
<li> Contact </li>
<li> Tutorial </li>
<li> Blog </li>
</ul>
</li>
<li> Home </li>
<li><a href="Profile.html" > Profile </a>
<div class="dropdownList">
<span class="caret"></span>
<div class="dropdownContent">
<h5> Profile </h5>
<h5> Profile </h5>
</div>
</div>
</li>
<li> Contact </li>
<li> Blog </li>
</ul>
</article>
</article>
</nav>
</body>
Blog CSS:
.dropdownList {
display: inline-block;
}
.dropdownContent {
display: none;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdownList:hover .dropdownContent {
display: block;
}
General CSS:
.navbar {
border-radius:0px;
font-family:'Lato', sans-serif;
margin-bottom:0px;
}
.NavTitle {
color:white;
letter-spacing:20px;
font-size:30px;
}
.navbar-header {
text-decoration:none;
}
.navbar a:hover {
text-decoration:none;
color:white;
}
.navbar-nav>li>a {
color:white !important;
font-size:15px;
}
.navbar ul {
list-style-type:none;
}
.navbar li a:hover {
background-color:#009999 !important;
color:white;
}
The way to create dropdown menus in Bootstrap 3 is to add the dropdown class to the menu item. In your markup I see that you have the markup for the dropdown but you're not using it. Here's an example to show you how it works:
Example:
/* BLOG CSS */
.dropdownList {
display: inline-block;
}
.dropdownContent {
display: none;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdownList:hover .dropdownContent {
display: block;
}
/* GENERAL CSS */
.navbar {
border-radius:0px;
font-family:'Lato', sans-serif;
margin-bottom:0px;
}
.NavTitle {
color:white;
letter-spacing:20px;
font-size:30px;
}
.navbar-header {
text-decoration:none;
}
.navbar a:hover {
text-decoration:none;
color:white;
}
.navbar-nav>li>a {
color:white !important;
font-size:15px;
}
.navbar ul {
list-style-type:none;
}
.navbar li a:hover {
background-color:#009999 !important;
color:white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> Home </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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="General.CSS">
<link rel="stylesheet" href="Blog.CSS">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- NavBar -->
<nav class="navbar navbar-inverse">
<article class="container-fluid">
<article class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="NavTitle" href="Home.html">John Doe</a>
</article>
<article class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li> Home </li>
<li class="dropdown">
Profile<span class="caret"></span>
<ul class="dropdown-menu">
<li> Profile </li>
<li> Profile </li>
</ul>
</li>
<li> Contact </li>
<li> Blog </li>
</ul>
</article>
</article>
</nav>
</body>
If you wish to display the options when hovering over the dropdown menu, I recommend having a look at this question for example:
How to make twitter bootstrap menu dropdown on hover rather than click
Related
I am trying to get a full screen navigation overlay to work on iPad sizes etc. I'm using bootstrap 3, and what I want is when the user gets the burger menu, and they click it, it will cause a full screen overlay such as this example:
Here Link
I for some reason cant get it to work on my code and I am wondering if its because of my bootstrap classes or what?
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top " id="section1">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><img alt="" src="Images/logo.png" class="img-responsive"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About Me
</li>
<li>
Skills
</li>
<li>
Me
</li>
<li>
Hobbies
</li>
<li>
Contact Me
</li>
</ul>
</div>
</div>
</nav>
I was wondering if anyone can help me get this to work when it goes to iPad sizes on 768 screens.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<link href="css/style.css" rel="stylesheet">
<style>
.overlay {
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top " id="section1">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<img alt="" src="Images/logo.png" class="img-responsive">
</a>
</div>
<div class="collapse navbar-collapse overlay" id="myNavbar">
×
<ul class="nav navbar-nav navbar-right overlay-content">
<li>
Home
</li>
<li>
About Me
</li>
<li>
Skills
</li>
<li>
Me
</li>
<li>
Hobbies
</li>
<li>
Contact Me
</li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$("button").on("click", function () {
$("#myNavbar").css("height", "100%");
});
$("#myNavbar a").on("click", function () {
$("#myNavbar").css("height", "0%");
})
</script>
</body>
</html>
Try this saving as a HTML File and link bootstrap files properly. The thing you were missing was overlays. I used the same overlays from your link.
I've created a navbar with a logo but the logo is out of place (see image). I know how to shrink the image so it fits the navbar, but I want to increase the height of the navigation bar so that it matches the logo.
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mobtech </title>
<!--Ubaci bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">
<span class="sr-only"> Pokazi i sakrij navigaciju </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="Slike/logo.png" alt="LogoSlika"/>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-container">
<ul class="nav navbar-nav">
<li class="active"> Početna strana </li>
<li> Privatni korisnici </li>
<li> Poslovni korisnici </li>
<li> Uređaji </li>
<li> O Nama </li>
</ul>
</div>
</div>
</nav>
<br />
<!-- JavaScript fajl -->
<script src="js/jquery.min.js"></script>
<!-- Kompresovan JavaScript fajl -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I don't have my custom CSS. Do I need to create it ? I'm new to bootstrap.
As simple as that: add this line near including boostrap.min.css
<link rel="stylesheet" href="css/style.css">
Create a new file named style.css in css folder, and add this lines in it.
.navbar-default .navbar-nav>li>a {
padding: 20px 15px 20px 15px;
}
.navbar-default .navbar-brand {
padding-top: 0px;
}
I've tested it and worked for me 100%.
Try it:-
.navbar-fixed-top {
min-height: 80px;
}
.navbar-nav > li > a {
padding-top: 0px;
padding-bottom: 0px;
line-height: 80px;
}
#media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 20px;
padding-top: 10px;
padding-bottom: 10px;}
}
This special code works for me with a similar problem with resizing navbar-inverse. I placed the code in my bootstrap custom CSS. You can change the padding to fit hover nav color blocks. For the image issues (site logo) you can add a style="margin-top/bottom, left, right: -12px or 12px" to the
Thanks
I made a navBar with Bootstrap which looks different on different resolutions. If the screen gets smaller it looks like this:
Picture 1:
Picture 2:
Picture 3:
Pciture 1 and 2 are fine, this is how I want it to be. But in picture 3 everything would fit in two lines but it is split into three lines. I need to have everything in two lines. I tried to play around with the css but I could not solve it. This is my code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" integrity="sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity = "sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity = "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity = "sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous" />
<link rel="stylesheet" href="css/design.css" />
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navBar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Startseite</span>
</div>
<div class="navbar-collapse collapse" id="navBar">
<ul class="nav navbar-nav navInline">
<li class="hidden-xs">Startseite</li>
<li>Telefonliste ABC</li>
<li>Telefonliste ABC</li>
<li>Telefonliste ABC</li>
<li>Telefonliste ABC</li>
<li>Telefonliste ABC</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Administration<span class="caret" style="padding-left:0px;"></span></a>
<ul class="dropdown-menu">
<li>Stuff</li>
<li>Stuff</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<div class="trennlinie visible-xs"></div>
<li class="navLi"><span class="navLiInner" id="clock">01.01.1970 - 00:00:00</span></li>
<li class="navLi"><span class="navLiInner">NAME (TODO)</span></li>
<li><span class="glyphicon glyphicon-log-in"></span> Logout</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS:
.nav > li > .navBarItem
{
padding-left: 8px;
padding-right: 8px;
}
.navBarItem:focus
{
outline: none;
}
.navLi
{
padding:15px;
}
.navLiInner
{
color: #9D9D9D;
text-shadow: 0px -1px 0px rgba(0,0,0,.25)
}
.navInline
{
display: inline;
}
.trennlinie
{
border-bottom: 1px solid #383838;
box-shadow: 0px -1px 0px 0px #000000;
margin-top: 4px;
margin-bottom: 4px;
}
I appreciate any kind of help.
Kind regards :)
Reduce font-size and padding and it should fits like this
.nav > li > .navBarItem
{
padding-left: 4px;
padding-right: 4px;
font-size: 12px;
}
I'm not sure why my content is disappearing almost completely, the navbar is still intact, but it won't open, the text in the navbar won't center, the paragraphs aren't responsive, my subscribe button isn't aligned. I'm extremely frustrated and I've been working on this site for a couple of weeks already. Can someone please help me with this. This is a link to the site: http://bit.ly/1kPKVzR Thanks in advance. This is the code for one of the pages in the site...
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="...">
<meta name="author" content="...">
<title>...</title>
<link rel="icon" href="images/favicon.png" type="image/x-icon" />
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/full.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="css/customstyle.css" rel="stylesheet">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
::-moz-selection {
color:#fff;
background-color:rgba(128, 128, 128, 0.3);
}
::selection {
color:#fff;
background-color:rgba(128, 128, 128, 0.3);
}
.navbar {
color:#000000;
width: 100%;
background-color: rgba(255, 255, 255, 0.0);
border-color: rgba(255, 255, 255, 0.0);
}
.logo{
display:inline-block;
position: absolute;
left:40%;
font-size: 20px;
font: 80px "munich", Sans-serf, Ariel;
margin-top: 60px;
}
.logo a:focus, .logo a:hover{
-webkit-transition:1s;
color:#999999;
text-decoration: none;
}
.logo li a:focus, .logo li a:hover{
-webkit-transition:1s;
color:#000000;
}
#font-face{
font-family:"munich";
src:url("munich.ttf") format("truetype");
}
.starter-template img{
width:450px;
height:450px;
margin: 40px 100px auto;
}
audio{
width:200px;
}
.starter-template .pull-right{
position:absolute;
}
.starter-template img{
width:450px;
height:450px;
margin:20px 100px auto;
}
#albumlinks{
margin-top:440px;
margin-right: -40em;
}
#signup{
position: absolute; right: -5000px;
}
#mc_embed_signup{
background:none; font:14px Helvetica,Arial,sans-serif; margin:500px;padding:0;
}
/**************** #media screen ********************/
#media screen and (min-width: 480px) {
#albumlinks .clear-fix .pull-right{
width:5em;
height:4em;
}
}
.navbar-default{
background-color: rgba(245, 245, 245, 0.1);
}
.navbar-nav{
margin-top: -20px;
}
</style>
</head>
<body>
<div class="logo">
<p>...</p>
</div>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Bio
</li>
<li>
Lessons
</li>
<li>
Shows
</li>
<li>
Music
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="clearfix">
<div class="container">
<div class="pull-left">
<img src="../images/piano-1599x1066.jpg"/>
</div>
<p class="lead pull-right ">...</p>
</div>
</div>
<footer class="navbar-fixed-bottom ">
<div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
<div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
<div class="navbar-text pull-right">
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-soundcloud fa-2x"></i>
</div>
<p class="pull-right">...</p>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
There is an error that says "Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher"
So you need to change the JQuery that is loaded to a newer version.
Where yours says
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
change it to
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
Jquery and Bootstrap .js files are not linked properly.
Once script is working, add css to .navbar-toggle .icon-bar and navbar.
Go to your site and press Ctrl+Shift+I if you are using chrome otherwise right click and choose inspect element. Doing this will bring up the dev tools and most importantly the console.
Looking there we can see that there are errors about JQuery not being loaded.
You can include it in your site by adding the below to the section of your site.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
Or alternatively fix the link to your jQuery - http://ericarodriguez.me/jarodkashkin/js/jquery.js
If you click that link you will see that the file does not exist
I have changed the default bootstrap style by adding the margin and padding in my style.css but i want that the navigation would be at the left corner and not in the middle header side when i resize my browser screen to mobile size. How can i do it?
Here is my index.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Responsive Project (Prototype)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<header class="mainHeader">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!--HEADER-->
<div class="navbar-header">
<a class="navbar-brand">A.M.®</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--BODY-->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Contact Us</li>
<li>About Us</li>
<li>Work Positions</li>
<li>Contacts</li>
</ul>
<!--USER OPTIONS-->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"> Sign Up</span></li>
<li><span class="glyphicon glyphicon-log-in"> Register</span></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
style.css:
body {
background-color: #f2f2f2;
}
.navbar-default {
background-color: #fff;
padding-top: 20px;
padding-bottom: 20px;
}
.navbar-nav {
margin-left: 150px;
font-weight: 600;
}
.navbar-header {
padding-left: 150px;
}
You can use media queries to only apply your styles to larger screens, like so:
body {
background-color: #f2f2f2;
}
.navbar-default {
background-color: #fff;
padding-top: 20px;
padding-bottom: 20px;
}
.navbar-nav {
font-weight: 600;
}
#media (min-width: 768px) {
.navbar-nav {
margin-left: 150px;
}
.navbar-header {
padding-left: 150px;
}
}