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
Related
I have been learning HTML/CSS/Bootstrap for around a week now and I'm just start a portfolio website as a sort of a test as to what I am able to do so far. Currently, I am having a problem creating the "about me" page responsive due to an image I have on that page.
Link to website is here http://moeminmamdouh.000webhostapp.com/aboutme.html
The desired outcome is to basically have everything centered, however, this is what shows up https://ibb.co/idEPVT
HERE IS THE CODEPEN LINK: https://codepen.io/muchkler/project/editor/AznjbN#
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title> About Me </title>
<link rel="stylesheet" type="text/css" href="aboutme.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700" rel="stylesheet">
<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="icon" href="apple-icon.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<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="index.html">Moemin Mamdouh</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>Portfolio <span class="sr-only">(current)</span></li>
<li class="active">About Me</li>
<li>Contact Me</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<img src="images/rightprof.png" class="rightprof">
<div class="row">
<h1>HELLO.</h1>
<h2>I'm Moemin Mamdouh</h2>
<h3>graphic designer/ ui designer/ front-end developer</h3>
<p>I provide entrepeneurs and startups with the kick they need to help start their business. A business is nothing without a brand, and a brand requires a stable and responsive website. I will be providing designs in both Adobe Photoshop and Adobe XD as the first step to any projects, afterwards, I move on to coding the actual website using HTML, CSS, and Bootstrap. </p>
<div class="imgbtns">
<img src="images/facebook.png" height="30px" width="30px" class="facebook">
<img src="images/behance.png" height="30px" width="30px" class="behance">
</div>
</div>
</body>
</html>
and this is the CSS code:
body{
background: url(images/tom-sini-710353-unsplash.jpg);
background-position: center;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
.row{
color: white;
padding-top: 350px;
padding-left: 250px;
width: 900px;
}
.rightprof{
float: right;
padding-top: 250px;
padding-right: 250px;
}
.navbar-default{
background-color: #D91E18 !important;
border-style: none !important;
}
.navbar-brand{
color: white !important;
}
.navbar-default .navbar-nav > li > a {
color: white !important;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555;
background-color: #CF000F !important;
}
#media only screen and (max-width: 992px){
.leftside{
padding: 300px;
}
}
#media only screen and (max-width: 992px){
.row{
text-align: center;
padding-right: 110px;
}
.rightprof{
}
}
#media only screen and (max-width: 1042px){
.row{
text-align: center;
}
#media only screen and (max-width: 768px){
.row{
font-size: 10px;
width: auto;
margin-right: 200px;
}
}
any help would be appreciated, thanks!
I suggest removing your about.css file. Learn the grid. Your code was missing '.container' around your '.row', and you were missing the column definition (.col-sm-8, .col-sm-4). Avoid adding CSS widths and floats to your images and content as it will blow up the responsive grid. Instead, add '.img-responsive' class to your images.
<!doctype html>
<html>
<head>
<title> About Me </title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700" rel="stylesheet">
<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="icon" href="apple-icon.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
</head>
<body style="padding-top:70px;">
<nav class="navbar navbar-default navbar-fixed-top">
<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="index.html">Moemin Mamdouh</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>
<a href="portfolio.html">Portfolio
<span class="sr-only">(current)</span>
</a>
</li>
<li class="active">
About Me
</li>
<li>
Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-sm-8">
<h1>HELLO.</h1>
<h2>I'm Moemin Mamdouh</h2>
<h3>graphic designer/ ui designer/ front-end developer</h3>
<p>I provide entrepeneurs and startups with the kick they need to help start their business. A business is nothing
without a brand, and a brand requires a stable and responsive website. I will be providing designs in
both Adobe Photoshop and Adobe XD as the first step to any projects, afterwards, I move on to coding
the actual website using HTML, CSS, and Bootstrap. </p>
<div class="imgbtns">
<a href="https://www.facebook.com/moemin.mamdouh.3">
<img src="images/facebook.png" height="30px" width="30px" class="facebook">
</a>
<a href="https://www.behance.net/Muchkler">
<img src="images/behance.png" height="30px" width="30px" class="behance"> </a>
</div>
</div>
<div class="col-sm-4">
<img src="images/rightprof.png" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
I'm building a website at the moment, and have a problem with the nav bar.
I have a slider, and I want the navbar to be above a slider. However, my nav is pushing down the slider. The navbar should be above the slider images, with transparency, so I can see the navbar and the image behind it.
I'm using bootstrap and changing some styles, to make the elements look as I want them to look.
Here is the HTML and CSS, what should I change or add?
$(document).ready(function() {
$('.intro-slider').slick {
dots: false,
arrows: false,
autoplay: true,
autoplaySpeed: 2000,
infinite: true,
slidesToShow: 1,
adaptiveHeight: false
});
});
.intro-slider {
width: 100%;
height: 1080px;
overflow: hidden;
padding: 0;
}
.navbar-default,
.container-fluid,
.navbar-default .navbar-collapse,
.navbar-default .navbar-form,
.navbar-collapse.collapse,
.navbar navbar-default {
background-color: #000;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 0px;
border: 0px;
}
hr {
margin-top: 0px;
margin-bottom: 0px;
border: 0;
border-top: 1px solid #2f2f2f;
}
img {
max-width: 600px;
height: auto;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" 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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<body>
<div style="" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="navfont2">
<p><i class="fa fa-phone-square" aria-hidden="true"></i> +1 809 974 7826</p>
</li>
<li class="navfont2">
<p><i class="fa fa-envelope" aria-hidden="true"></i> orestes#mintech.do</p>
</li>
</ul>
</div>
<hr>
<!-- navbar start -->
<nav class="navbar navbar-default">
<div style="" class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div style="" 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 style="width: 175px;" src="images/mintech.png"></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 class="navfont">Inicio</li>
<li class="navfont">Nosotros</li>
<li class="navfont">Servicios</li>
<li class="navfont">Proyectos</li>
<li class="navfont">Equipo</li>
<li class="navfont">Contacto</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- navbar end -->
<div class="intro-slider col-xs-12">
<div><img src="https://www.almanac.com/sites/default/files/birth_month_flowers-primary-1920x1280px_pixabay.jpg"></div>
<div><img src="http://balconygardenweb.com/wp-content/uploads/2015/08/most-poisonous-flowers-3_mini.jpg"></div>
<div><img src="http://data.whicdn.com/images/57613434/large.jpg"></div>
</div>
You can absolutely position your navbar above your slider. I had to use relative positioning too to push the slider up a bit. All my code is commented to help you follow. Lastly I made the navbar transparent.
$(document).ready(function() {
$('.intro-slider').slick {
dots: false,
arrows: false,
autoplay: true,
autoplaySpeed: 2000,
infinite: true,
slidesToShow: 1,
adaptiveHeight: false
});
});
.intro-slider {
width: 100%;
height: 1080px;
overflow: hidden;
padding: 0;
}
.navbar-default,
.container-fluid,
.navbar-default .navbar-collapse,
.navbar-default .navbar-form,
.navbar-collapse.collapse,
.navbar navbar-default {
background-color: #000;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 0px;
border: 0px;
}
hr {
margin-top: 0px;
margin-bottom: 0px;
border: 0;
border-top: 1px solid #2f2f2f;
}
img {
max-width: 600px;
height: auto;
}
/* \\\\\\\\\\\\\\\\\\\\\\\\ new styles below ///////////////////////////// */
hr {
display: none; /* margins on hr were pushing gallery down */
}
body .navbar { /* place navbar atop slider */
width: 100%;
opacity: 0.75;
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
.intro-slider { /* move slider up */
position: relative;
top: -3rem;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" 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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<body>
<div style="" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="navfont2">
<p><i class="fa fa-phone-square" aria-hidden="true"></i> +1 809 974 7826</p>
</li>
<li class="navfont2">
<p><i class="fa fa-envelope" aria-hidden="true"></i> orestes#mintech.do</p>
</li>
</ul>
</div>
<hr>
<!-- navbar start -->
<nav class="navbar navbar-default">
<div style="" class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div style="" 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 style="width: 175px;" src="images/mintech.png"></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 class="navfont">Inicio</li>
<li class="navfont">Nosotros</li>
<li class="navfont">Servicios</li>
<li class="navfont">Proyectos</li>
<li class="navfont">Equipo</li>
<li class="navfont">Contacto</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- navbar end -->
<div class="intro-slider col-xs-12">
<div><img src="https://www.almanac.com/sites/default/files/birth_month_flowers-primary-1920x1280px_pixabay.jpg"></div>
<div><img src="http://balconygardenweb.com/wp-content/uploads/2015/08/most-poisonous-flowers-3_mini.jpg"></div>
<div><img src="http://data.whicdn.com/images/57613434/large.jpg"></div>
</div>
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'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
I am trying to change/remove the border radius of the navbar component. I tried the solution discussed here, How to remove the "border-radius" of the navbar-inverse in Bootstrap 3?.
I have created a fiddle at : https://jsfiddle.net/fts1b0z9/
HTML :
<!DOCTYPE html>
{% autoescape true %}
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="/stylesheets/main.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "mainDiv">
<nav class="navbar navbar-inverse" style="border-radius:none !important">
<div class="container-fluid">
<div class="navbar-header" style="border-radius:none !important">
<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>
<a class="navbar-brand" href="#">Website</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</div>
</body>
</html>
{% endautoescape %}
CSS:
.navbar-header{
color: #5e0231;
background-color: #5e0231;
}
.container-fluid{
color: #5e0231;
background-color: #5e0231;
width:1000px;
}
.mainDiv{
width:1000px;
position: fixed;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
}
If you notice, the maroon color spills out of the border. I am not sure how to fix this.
It would be great if someone could help me fix this.
Thanks!!
The simplest:
.navbar-inverse {
border-radius: 0;
}
isn't working? Or it isn't what you mean?
Define your custom stylesheet after the bootstrap declaration.
.navbar {
border-radius: 0;
}