I have difficulties changing the positioning of my current navbar. Does anyone know what to do so it will be positioned centered below the logo? I have included a picture of how I would like the navbar to look.
.navbar.navbar-default {
background-color: #ffffff;
border-color: #ffffff;
padding-top:15px;
padding-bottom:30px;
}
.navbar.navbar-default .navbar-brand {
color: #696969;
}
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus {
color: #ff9c74;
}
.navbar.navbar-default .navbar-text {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
color: #747474;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
color: #ff9c74;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
color: #ff9c74;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #292929;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
border:none;
}
.navbar.navbar-default .navbar-link {
color: #292929;
}
.navbar.navbar-default .navbar-link:hover {
color: #696969;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.nav.navbar-nav > li.navbar-left {
font-family: 'Nunito Sans', sans-serif;
font-size: 11.5px;
}
.navbar-brand {
padding: 10px;
}
.navbar-brand>img {
height: 50px;
width: auto
}
#media (min-width: 768px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
}
.fa.fa-instagram {
font-size: 18px;
}
.fa.fa-pinterest {
font-size: 18px;
}
.fa.fa-dribbble {
font-size: 18px;
}
.fa.fa-twitter{
font-size: 18px;
}
.banner {
width: 100%;
}
.banner-inner {
max-width:1100px;
margin: 0 auto;
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
body { padding-top: 90px; }
#media screen (min-width: 468px) and (max-width: 768px) {
body { padding-top: 0px; }
}
.banner-inner>img {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
.col-1-1> img{
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title></title>
<meta name="author" content="">
<link rel="icon" type="image/png" href="img/icon.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="css/sticky-footer.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<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="#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="http://"><img onload="this.style.opacity='1';" class= "logo" src="img/logo.png"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">TRAVEL</li>
<li class="navbar-left"> PORTFOLIO </li>
<li class="navbar-left"> INSPO </li>
<li class="navbar-left"> ABOUT </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="right"> <i class="fa fa-instagram"></i></li>
<li class="right"> <i class="fa fa-dribbble"></i></li>
<li class="right"> <i class="fa fa-pinterest"></i></li>
<li class="right"> <i class="fa fa-twitter"></i></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</div>
</div>
</header>
<!---End Header-->
<section class="banner">
<div class="banner-inner">
<img onload="this.style.opacity='1';" class="banner" src="img/background.jpg">
</div>
</section>
<!---End Banner-->
<!-- Begin page content -->
<footer class="footer">
<div class="container">
<span class>Copyright © 2017. JH. All rights reserved.</span>
</div>
</footer>
<!---End Footer-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Your current HTML won't work, so I modified a few tiny things on it. Mainly just put your image in it's own div, giving it a "margin-top: 50px;" so that it will push down the Nav as your mock shows. (And put in a fun logo just for fun =P. You can replace it w/ your real one.) The reason you are having a hard time w/ this is that you also needed to override the CSS boostrap default code w/ your own for the logo.
In Desktop it now looks like your Mock. In Mobile, still looks good w/ the Logo and hamburger menu in same line. (You didn't clarify what behavior you wanted for Mobile, so I hope that's ok.)
Adding code below which I've also put in a CodePen: http://codepen.io/alejandra_quetzalli/pen/YZWMLY?editors=1100
img.navbar-brand {
height: 45px;
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #ffffff;
border-color: #ffffff;
padding-top:15px;
padding-bottom:30px;
}
.navbar.navbar-default .navbar-brand {
color: #696969;
}
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus {
color: #ff9c74;
}
.navbar.navbar-default .navbar-text {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
color: #747474;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
color: #ff9c74;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
color: #ff9c74;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #292929;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
border:none;
margin-top: 50px;
}
.navbar.navbar-default .navbar-link {
color: #292929;
}
.navbar.navbar-default .navbar-link:hover {
color: #696969;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.nav.navbar-nav > li.navbar-left {
font-family: 'Nunito Sans', sans-serif;
font-size: 11.5px;
}
.navbar-brand {
padding: 10px;
}
.navbar-brand>img {
height: 50px;
width: auto
}
#media (min-width: 768px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
}
.fa.fa-instagram {
font-size: 18px;
}
.fa.fa-pinterest {
font-size: 18px;
}
.fa.fa-dribbble {
font-size: 18px;
}
.fa.fa-twitter{
font-size: 18px;
}
.banner {
width: 100%;
}
.banner-inner {
max-width:1100px;
margin: 0 auto;
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
body { padding-top: 90px; }
#media screen (min-width: 468px) and (max-width: 768px) {
body { padding-top: 0px; }
}
.banner-inner>img {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
.col-1-1> img{
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title></title>
<meta name="author" content="">
<link rel="icon" type="image/png" href="img/icon.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="css/sticky-footer.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div><img class="navbar-brand" href="http://" onload="this.style.opacity='1';" class= "logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png"></div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
</div>
<!-- <div><img class="navbar-brand" href="http://" onload="this.style.opacity='1';" class= "logo" src="img/logo.png"></div> -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">TRAVEL</li>
<li class="navbar-left"> PORTFOLIO </li>
<li class="navbar-left"> INSPO </li>
<li class="navbar-left"> ABOUT </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="right"> <i class="fa fa-instagram"></i></li>
<li class="right"> <i class="fa fa-dribbble"></i></li>
<li class="right"> <i class="fa fa-pinterest"></i></li>
<li class="right"> <i class="fa fa-twitter"></i></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</div>
</div>
</header>
<!---End Header-->
<section class="banner">
<div class="banner-inner">
<img onload="this.style.opacity='1';" class="banner" src="img/background.jpg">
</div>
</section>
<!---End Banner-->
<!-- Begin page content -->
<footer class="footer">
<div class="container">
<span class>Copyright © 2017. JH. All rights reserved.</span>
</div>
</footer>
<!---End Footer-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
EDIT
Updated above code to also center the nav bar links/icons as requested.
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title></title>
<meta name="author" content="">
<link rel="icon" type="image/png" href="img/icon.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="css/sticky-footer.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div><img class="navbar-brand" href="http://" onload="this.style.opacity='1';" class= "logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png"></div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
</div>
<!-- <div><img class="navbar-brand" href="http://" onload="this.style.opacity='1';" class= "logo" src="img/logo.png"></div> -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">TRAVEL</li>
<li class="navbar-left"> PORTFOLIO </li>
<li class="navbar-left"> INSPO </li>
<li class="navbar-left"> ABOUT </li>
</ul>
<ul class="nav navbar-nav">
<li class="right"> <i class="fa fa-instagram"></i></li>
<li class="right"> <i class="fa fa-dribbble"></i></li>
<li class="right"> <i class="fa fa-pinterest"></i></li>
<li class="right"> <i class="fa fa-twitter"></i></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</div>
</div>
</header>
<!---End Header-->
<section class="banner">
<div class="banner-inner">
<img onload="this.style.opacity='1';" class="banner" src="img/background.jpg">
</div>
</section>
<!---End Banner-->
<!-- Begin page content -->
<footer class="footer">
<div class="container">
<span class>Copyright © 2017. JH. All rights reserved.</span>
</div>
</footer>
<!---End Footer-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
<style>
img.navbar-brand {
height: 45px;
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #ffffff;
border-color: #ffffff;
padding-top:15px;
padding-bottom:30px;
}
.navbar.navbar-default .navbar-brand {
color: #696969;
}
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus {
color: #ff9c74;
}
.navbar.navbar-default .navbar-text {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
color: #747474;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
color: #ff9c74;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
color: #ff9c74;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #292929;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
border:none;
margin-top: 50px;
}
#navbar {
text-align: center;
}
ul.navbar-nav {
display: inline-block;
}
.navbar.navbar-default .navbar-link {
color: #292929;
}
.navbar.navbar-default .navbar-link:hover {
color: #696969;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.nav.navbar-nav > li.navbar-left {
font-family: 'Nunito Sans', sans-serif;
font-size: 11.5px;
}
.navbar-brand {
padding: 10px;
}
.navbar-brand>img {
height: 50px;
width: auto
}
#media (min-width: 768px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
ul.navbar-nav {
float: none;
}
}
ul.navbar-nav {
float: none;
}
.fa.fa-instagram {
font-size: 18px;
}
.fa.fa-pinterest {
font-size: 18px;
}
.fa.fa-dribbble {
font-size: 18px;
}
.fa.fa-twitter{
font-size: 18px;
}
.banner {
width: 100%;
}
.banner-inner {
max-width:1100px;
margin: 0 auto;
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
body { padding-top: 90px; }
#media screen (min-width: 468px) and (max-width: 768px) {
body { padding-top: 0px; }
}
.banner-inner>img {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
.col-1-1> img{
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
</style>
Related
I am having trouble adding padding to the left and right side of the nav bar so the social media buttons and the rest of the menu items are pushed closer towards the center. I tried adding padding to the left and right. However, that moves the position of the button that appears when the menu is collapsed. I have a logo in the center of the nav bar and then social media icons to the right and other menu items the left.
.navbar.navbar-default {
background-color: #ccc;
border-color: #ffffff;
padding-top:15px;
padding-bottom:15px;
}
.navbar.navbar-default .navbar-brand {
color: #292929;
}
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus {
color: #FC9F9F;
}
.navbar.navbar-default .navbar-text {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
color: #FC9F9F;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
color: #FC9F9F;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
color: #FC9F9F;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #292929;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
border:none;
}
.navbar.navbar-default .navbar-link {
color: #292929;
}
.navbar.navbar-default .navbar-link:hover {
color: #ffd4d4;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.nav.navbar-nav > li.navbar-left {
font-family: 'Nunito Sans', sans-serif;
font-size: 11.5px;
}
.navbar-brand {
padding: 10px;
}
.navbar-brand>img {
height: 30px;
width: auto;
}
#media (min-width: 768px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
}
#media (min-width: 468px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
}
.fa.fa-instagram {
font-size: 18px;
}
.fa.fa-pinterest {
font-size: 18px;
}
.fa.fa-facebook {
font-size: 18px;
}
.fa.fa-twitter{
font-size: 18px;
}
.banner {
width: 100%;
}
.banner-inner {
max-width:1100px;
margin: 0 auto;
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
#media (min-width:768px) and (max-width:1024px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
body { padding-top: 90px; }
#media screen (min-width: 468px) and (max-width: 768px) {
body { padding-top: 0px; }
}
.banner-inner>img {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
.col-1-1> img{
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title>J</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="css/sticky-footer.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body style="padding-top: 70px;">
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
<a class="navbar-brand" href="http://"><img class= "logo" src="img/logo.png"></a>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">TRAVEL</li>
<li class="navbar-left"> PORTFOLIO </li>
<li class="navbar-left"> ABOUT </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="right"> <i class="fa fa-instagram"></i>
<li class="right"> <i class="fa fa-pinterest"></i>
<li class="right"> <i class="fa fa-facebook"></i>
<li class="right"> <i class="fa fa-twitter"></i>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</div>
</header>
<!---End Header-->
<section class="banner">
<div class="banner-inner">
<img onload="this.style.opacity='1';" class="banner" src="img/background.png">
</div>
</section>
<!---End Banner-->
<!-- Begin page content -->
<footer class="footer">
<div class="container">
<span class>Copyright © 2017. All rights reserved.</span>
</div>
</footer>
<!---End Footer-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Use media queries. like this:
#media screen and (min-width:768px){
.navbar.navbar-default {
padding-left:40px;
padding-right:40px;
}
}
This will add padding to your navbar only if the screen size is more than 768px.
.navbar.navbar-default {
background-color: #ccc;
border-color: #ffffff;
padding-top:15px;
padding-bottom:15px;
}
#media screen and (min-width:768px){
.navbar.navbar-default {
padding-left:40px;
padding-right:40px;
}
}
.navbar.navbar-default .navbar-brand {
color: #292929;
}
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus {
color: #FC9F9F;
}
.navbar.navbar-default .navbar-text {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
color: #FC9F9F;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
color: #FC9F9F;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
color: #FC9F9F;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #292929;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
border:none;
}
.navbar.navbar-default .navbar-link {
color: #292929;
}
.navbar.navbar-default .navbar-link:hover {
color: #ffd4d4;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.nav.navbar-nav > li.navbar-left {
font-family: 'Nunito Sans', sans-serif;
font-size: 11.5px;
}
.navbar-brand {
padding: 10px;
}
.navbar-brand>img {
height: 30px;
width: auto;
}
#media (min-width: 768px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
}
#media (min-width: 468px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
}
.fa.fa-instagram {
font-size: 18px;
}
.fa.fa-pinterest {
font-size: 18px;
}
.fa.fa-facebook {
font-size: 18px;
}
.fa.fa-twitter{
font-size: 18px;
}
.banner {
width: 100%;
}
.banner-inner {
max-width:1100px;
margin: 0 auto;
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
#media (min-width:768px) and (max-width:1024px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
body { padding-top: 90px; }
#media screen (min-width: 468px) and (max-width: 768px) {
body { padding-top: 0px; }
}
.banner-inner>img {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
.col-1-1> img{
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title>J</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="css/sticky-footer.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body style="padding-top: 70px;">
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
<a class="navbar-brand" href="http://"><img class= "logo" src="img/logo.png"></a>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">TRAVEL</li>
<li class="navbar-left"> PORTFOLIO </li>
<li class="navbar-left"> ABOUT </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="right"> <i class="fa fa-instagram"></i>
<li class="right"> <i class="fa fa-pinterest"></i>
<li class="right"> <i class="fa fa-facebook"></i>
<li class="right"> <i class="fa fa-twitter"></i>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</div>
</header>
<!---End Header-->
<section class="banner">
<div class="banner-inner">
<img onload="this.style.opacity='1';" class="banner" src="img/background.png">
</div>
</section>
<!---End Banner-->
<!-- Begin page content -->
<footer class="footer">
<div class="container">
<span class>Copyright © 2017. All rights reserved.</span>
</div>
</footer>
<!---End Footer-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Hello I have a problem with Bootstrap in mobile view. When ever I am in mobile view the image is responsive but its to long for the page and I have to scroll through to see it its cut out.
Mobile view.
I would like it so that the whole image "fits in".
Here is the website:
http://edslab.esy.es/Screen-Brodyr-AB-master/index.html
#topnavbar {
margin: 0;
}
#topnavbar.affix {
position: fixed;
top: 0;
width: 100%;
}
.navbar-nav > li{
padding-left:30px;
padding-right:30px;
}
/*navbar colour*/
.navbar-default {
background-color: #177f5e;
border-color: #ffffff;
}
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #000000;
}
.navbar-default .navbar-text {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #000000;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #000000;
background-color: #ffffff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #000000;
background-color: #ffffff;
}
.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ffffff;
}
.navbar-default .navbar-link {
color: #ffffff;
}
.navbar-default .navbar-link:hover {
color: #000000;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #000000;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #000000;
background-color: #ffffff;
}
}
/*whitespace*/
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
.navbar {
margin-bottom: 0px;
}
/*bildspel*/
.carousel {
height: 1000px;
margin-bottom: 70px;
}
.carousel-caption {
z-index: 10;
}
.carousel .item {
height: 1000px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 1000px;
}
/*textstorlek.*/
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
.carousel-caption i {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
/*Mer utrymme mellan bilderna.*/
.featurette-divider {
margin: 80px 0;
}
/* scrollUp */
#scrollUp {
bottom: 20px;
right: 20px;
padding: 10px 20px;
background: #555;
color: #fff;
}
/*Google maps*/
.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
border: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default navbar-static-top">
<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">Screen Brodyr i Kristianstad AB</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Om oss
</li>
<li>Textiltryck
</li>
<li>Transfertryck
</li>
<li>Brodyr
</li>
<li>Digitaltryck
</li>
<li>Tampotryck
</li>
<li><a data-toggle="modal" data-target="#kontaktoss">Kontakt</a>
</li>
</ul>
</div>
</div>
</nav>
<!--Navigeringsfält slut.-->
<!--bildspel-->
<div id="bildspel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-slide-to="0" class="active"></li>
<li data-target="#bildspel" data-slide-to="1"></li>
<li data-target="#bildspel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="http://edslab.esy.es/Screen-Brodyr-AB-master/image/lokal.jpg" alt="Lokal">
<div class="container">
<div class="carousel-caption">
<h1>Välkommen till Screen Brodyr i Kristianstad AB!</h1>
<p>
Vi bygger webbplats mer information kommer inom kort!</p>
<p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="http://edslab.esy.es/Screen-Brodyr-AB-master/image/lokal2.jpg" alt="Maskin">
<div class="container">
<div class="carousel-caption">
<h1>
Vi bygger webbplats mer information kommer inom kort!</h1>
<p>
Vi bygger webbplats mer information kommer inom kort!</p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="image/lokal2.jpg" alt="lokal2">
<div class="container">
<div class="carousel-caption">
<h1>
Vi bygger webbplats mer information kommer inom kort!</h1>
<p>
Vi bygger webbplats mer information kommer inom kort!</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#bildspel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#bildspel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
remove the height
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
//height: 1000px;
}
Hi I understand your problem is that when you open your website in mobile image size is to much large to go down we have to scroll more so use Bootstrap's class .img-responsive
you can try in this way
<img class="first-slide img-responsive" src="http://edslab.esy.es/Screen-Brodyr-AB-master/image/lokal.jpg" alt="Lokal">
and the height of the slider is bigger so make smaller in size it will help u in making responsive or don't give any height to div and image use its own height of image.
When I resize my browser, the logo keeps moving or snapping around. I want to pin it with a margin of 15px to the left until it reaches the 768px media query (because i set my logo to snap tocenter when in that breakpoint). How do I do this? Below is my code.
body {
background-color: #222;
}
.navbar {
min-height: 56px;
}
.navbar-toggle {
float: left;
margin-left: 15px;
margin-right: 0;
}
.navbar-default {
background-color: #333;
border-color: #333;
-webkit-box-shadow: 0 1px 10px 0px black;
box-shadow: 0 1px 10px 0px black;
}
.navbar-default .navbar-toggle {
border-color: transparent;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #999;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-brand {
max-width: 100%;
height: auto;
padding: 0;
margin-top: 15px;
margin-right: 15px;
}
#media (max-width: 767px) {
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
}
.navbar-nav > li > a {
padding-top: 20px;
padding-bottom: 15px;
font-weight: bold;
}
.navbar-default .navbar-nav > li > a {
color: #d2d2d2;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #fff;
}
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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">
<meta name="description" content="Buffing Your Gaming Experience">
<meta name="author" content="Raphola">
<link rel="icon" href="">
<title>Primera Games</title>
<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">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</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="#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="index.html">
<img alt="Logo" src="logo.png">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">HOME
</li>
<li>ABOUT
</li>
<li>CONTACT
</li>
</ul>
</div>
</div>
</nav>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
remove left:50% here "#media (max-width: 767px) {
.navbar-brand{ }
if you want margin more on left side of logo use the left style property.
body {
background-color: #222;
}
.navbar {
min-height: 56px;
}
.navbar-toggle {
float: left;
margin-left: 15px;
margin-right: 0;
}
.navbar-default {
background-color: #333;
border-color: #333;
-webkit-box-shadow: 0 1px 10px 0px black;
box-shadow: 0 1px 10px 0px black;
}
.navbar-default .navbar-toggle {
border-color: transparent;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #999;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-brand {
max-width: 100%;
height: auto;
padding: 0;
margin-top: 15px;
margin-right: 15px;
}
#media (max-width: 767px) {
.navbar-brand {
position: absolute;
}
}
.navbar-nav > li > a {
padding-top: 20px;
padding-bottom: 15px;
font-weight: bold;
}
.navbar-default .navbar-nav > li > a {
color: #d2d2d2;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #fff;
}
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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">
<meta name="description" content="Buffing Your Gaming Experience">
<meta name="author" content="Raphola">
<link rel="icon" href="">
<title>Primera Games</title>
<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">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</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="#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="index.html">
<img alt="Logo" src="logo.png">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">HOME
</li>
<li>ABOUT
</li>
<li>CONTACT
</li>
</ul>
</div>
</div>
</nav>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
Remove the left left: 50%; from your media queries in .navbar-brand
So it should be..
#media (max-width: 767px) {
.navbar-brand {
position: absolute;
}
}
You can remove the position absolute or you can over ride the media query by changing the left property
#media(max-width: 767px){
left:10%
}
I'm NOT a computer programmer, but I've been assigned the task of designing a webpage. Here's what I have:
<!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>Example</title>
<!-- Bootstrap -->
<link href="file:///Users/Theresa/Desktop/1page/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="all">
<!---Custom -->
<link href="file://localhost/Users/Theresa/Desktop/1page/custom.css" rel="stylesheet">
<!-- 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 class="navbar navbar-inverse">
<div class="navbar-header">
shastic
</div>
</nav>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div 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>
</button>
<a class="navbar-brand" href="#">Shastic</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Text</li>
<li><span class="glyphicon glyphicon-log-in"></span> Text</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="background: #f1f1f1;;">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3" style="background-color:#f1f1f1;">
<h1 style=" font-weight: 300; font-size: 72px; color: #666666; margin-bottom: -22px;">01</h1>
<h2 style="font-size: 26px; font-weight: 300; color: #666666; text-transform: uppercase; -webkit-font-smoothing: antialiased;">overview</h2>
<p style="font-size: 12px;
-webkit-font-smoothing: antialiased;">
Jump to same section in another guide:</p>
Web | Homepage
</div>
<div class="col-sm-9 col-md-3 col-lg-3" style="background-color:#f1f1f1; font-size: 20px; font-weight: 300; color: #666666;-webkit-font-smoothing: antialiased; display: block; margin-right:-10px; margin-top:50px; text-align: center;">
The designs in this guide cover the visual treatment and interaction details for the mobile SSO pages from the below the top navigation bar. They also provide an overview of how the navigation works for Mobile SSO pages.
</div>
<div class="ol-sm-3 col-md-6 col-lg-6" style="background-color:#f1f1f1; padding: 20px;">
<img src="file:///Users/Theresa/Desktop/1page/images/iphone.png"><BR>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="file:///Users/Theresa/Desktop/1page/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Basically, my HTML is really complicated because I can't for the life of me figure out how to override bootstrap's CSS (fonts,etc.) for the container section. Another problem I'm having is I can't change the OVERALL body background color from white to another color.
Here's my CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
</HEAD>
<body>
<style>
/* navbar */
.navbar.navbar-default {
background-color: #0078B1;
border-color: #E7E7E7;
}
.navbar.navbar-inverse {
background-color: #003B6A;
border-color: #003B6A;
margin-bottom: -20px;
padding-bottom: 20px;
}
.container-fluid{
background-color: #0078B1;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
-webkit-font-smoothing: antialiased;
text-align: right;
}
/* title */
.navbar-default .navbar-brand {
color: #FFF;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #0078B1;
}
/* link */
.navbar-default .navbar-nav > li > a {
color: #FFF;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #FFF;
text-decoration: underline;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #FFFFFF;
background-color: #0078B1;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #FFF;
background-color: #0078B1;
}
/* dropdown and caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #FFF;
border-bottom-color: #FFF;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #0078B1;
border-bottom-color: #0078B1;
background-color: #0078B1;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #0078B1;
border-bottom-color: #0078B1;
}
/* mobile version */
.navbar-default .navbar-toggle {
border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #CCC;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #FFF;
}
/*body*/
.container{background-color: #0078B1;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
-webkit-font-smoothing: antialiased;
text-align: right;}
</style>
</body>
</HTML>
Any help appreciated. thank you very much.
Change navbar color in Twitter Bootstrap 3
Changing the navbar color has been discussed in detail at this link
Bootstrap comes with light/dark options by default - however if you want custom colour best read the details in the link above so were not duplicating too much info here.
<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>
I have made a website for my fake business but I can't get the area at the bottom of the page not to be there. So further information, I want the whole page to take up all of the browser window and not have any white space or have any scrolling on all computers, and on computers where the screen is taller or shorter i want the text to stay in the center between the navbar and end of page.
Demo here.
Thanks in advance.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Geer Creations</title>
<!-- Icon -->
<link rel="shortcut icon" href="logo-inverse.ico" >
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>
<!-- Bootstrap core CSS -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles -->
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="page">
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="max-width:50px; margin-top: -7px;" src="http://i1284.photobucket.com/albums/a579/Ian_Geer/logo-inverse_zps3767ce84.png"></a>
</div>
<div class="collapse navbar-collapse" id=".navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Browse</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>We combine strategy, creative thinking, & technology to drive results.</h1>
<button type="button" class="btn btn-default btn-lg">Learn More</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
CSS:
body {
font-family: 'Ubuntu', sans-serif;
}
.navbar {
background-color: #fff;
border: none;
padding-top: 10px;
}
.navbar .nav {
margin-top: 5px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ff9721;
background-color: #fff;
font-weight: 700;
}
.navbar-default .navbar-nav > li > a {
-webkit-transition: color .2s; /* For Safari 3.1 to 6.0 */
transition: color .2s;
color: #6E6E6E;
background-color: transparent;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
-webkit-transition: color .2s; /* For Safari 3.1 to 6.0 */
transition: color .2s;
color: #ff9721;
background-color: transparent;
}
h1 {
color: #fff;
text-align: center;
}
.jumbotron {
padding-top: 190px;
padding-bottom: 173px;
margin-right: auto;
margin-left: auto;
width: 100%;
background-color: #170D00;
color: #fff;
text-align: center;
}
.jumbotron h1 {
font-size: 3em;
}
.form-control {
margin-top: 5px;
border-radius: 20px;
}
.btn {
-webkit-transition: color .5s, border .5s; /* For Safari 3.1 to 6.0 */
transition: color .5s, border .5s;
margin-top: 50px;
color: #fff;
background-color: transparent;
border: 2px solid #fff;
width: 220px;
}
.btn:hover,
.btn:focus {
-webkit-transition: color .5s, border .5s; /* For Safari 3.1 to 6.0 */
transition: color .5s, border .5s;
margin-top: 50px;
color: #ff9721;
background-color: transparent;
border: 2px solid #ff9721;
width: 220px;
}
You have a 30px margin from the bottom of your .jumbotron div. Add to your .jumbotron CSS class:
margin-bottom: 0;
to remove it.
Example
If you need screen to be not scrollable then you can use,and provide height to the "body" position:fixed; which fixes the screen exactly what you need, but if you need scrollable website with bottom space covered, use margin-bottom:0; you have given padding-bottom, here is the css
.jumbotron {
padding-top: 190px;
padding-bottom: 173px;
margin-right: auto;
margin-left: auto;
width: 100%;
background-color: #170D00;
color: #fff;
text-align: center;
margin-bottom:0;
}
you can even try position:fixed, even that will help using on all browsers