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
Related
I am creating a top bar where I just want a menu icon in the left, the page title next to it and I will add a search bar in the right side but I will do that later.
I followed w3schools guide to create a collapsed sidebar and it works but I would like to achieve two more things:
The menu icon is smaller than the bar itself where it is positioned. I would like it to increase its size so it fills the bar.
I want the page title to be displayed next to it but I am not able to achieve this no matter where I place the that contains it.
I am going to remove the sidepanel code as it is working and it does not have to do with my issue positioning the menu icon and the page title:
#wrapper-header {
color: white;
font-size: 28px;
float: left;
width: 100%;
height: 65px;
background-color: #2E2D30;
}
#main-header {
position: relative;
width: 1200px;
left: 50%;
margin-left: -400px;
height: auto;
}
.page-title {
position: relative;
margin-top: -35px;
left: 150px;
}
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="wrapper-header">
<div id="main-header">
<button class="openbtn" onclick="openNav()">☰</button>
<div class="page-title">Recientes</div>
</div>
</div>
So, basically I had to change a little bit your css
#wrapper-header {
color: white;
font-size: 28px;
float: left;
width: 100%;
height: 65px;
background-color: #2E2D30;
}
#main-header {
position: relative;
}
.page-title {
position: absolute;
height: 20px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.openbtn {
height: 30px;
width: 30px;
margin-top: 18px;
margin-left: 20px;
transform: scale(2);
}
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="wrapper-header">
<div id="main-header">
<button class="openbtn" onclick="openNav()">☰</button>
<div class="page-title">Recientes</div>
</div>
</div>
Here is a fiddle or just run snippet code from the answer to see the result
NB: I used transform: scale(2); to fit the button to the navbar cause if you just change width and height the icon will remain too small
Let me know if it answer your question and if you need some further information
Have a look please, I think you are looking for something like this
/* ------------ top menu -------------- */
.navbar{font-family:Arial; background-color:#4F0D1B; border:0; border-radius:0px}
.navbar-collapse{padding-left:0; padding-right:0;}
.navbar-toggle{margin:7px; color:#fff}
.navbar{margin:0; z-index:999;}
ul.navbar-nav > li > a{color:#fff; padding:20px 30px; line-height: 30px; transition:all ease 0.5s; z-index: 99; min-width: 96px; text-align: center; text-transform: uppercase; }
ul.navbar-nav > li a:hover, ul.navbar-nav > li.active,
ul.nav .open > a:focus, ul.nav li > a:focus {background-color:#830F27; transition:all ease 0.5s;}
/* when clicked */
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
background-color: #830F27;
}
/* submenu style */
.navbar .dropdown-menu{z-index:999; min-width:100%; border:0; background-color:#4F0D1B}
.navbar .dropdown-menu li a{text-align:left; padding:15px; color:#fff; }
/* mega menu */
.mega-dropdown { position: static !important; }
.mega-dropdown-menu { z-index:999999;
padding: 20px 0px;
width: 100%;
-webkit-box-shadow: none;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
background-color:#7A0E23!important;
}
.mega-dropdown-menu ul{margin:0; padding:0}
.mega-dropdown-menu li {color:#fff; list-style: outside none}
.mega-dropdown-menu li a{padding:5px!important; display:block!important; }
.mega-dropdown-menu li a:hover{background-color:#4F0D1B!important}
a.title-submenu{font-weight:bold; color:rgba(0,0,0,.5); }
/* search form */
.searchform{padding:10px 15px; float:right}
.searchform .btn{ color:rgba(200,200,200,.5);border: 1px solid transparent; background-color:#830F27; }
.searchform .form-control{
border:0; color:#fff;
background-color:rgba(200,200,200,.1);
width:120px!important;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
}
.searchform .form-control:hover, .searchform .form-control:focus {
width: 170px!important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<p>Mega menu using bootstrap, width search bar </p>
<nav class="navbar" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="toggle-menu ">MENU</span>
</button>
<!-- <a class="navbar-brand" href="#">Home</a> -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li><i class="glyphicon glyphicon-search"></i></li>
<li>Home page</li>
</ul>
<form action="#" method="get" class="searchform navbar-form" role="search">
<input type="hidden" value="search" name="view">
<div class="input-group">
<input type="text" name="searchword" required class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div><!-- /.navbar-collapse -->
</nav>
</div>
I got issues with the boostrap navbar toggle, have been struggling with this for some time now. Firstly, my logo gets hidden below when decreasing window size, like this. It seems the container is too high, but if i decrease it, other content got affected. Next, when i decrease window size, same happens with navigation links, they get below the logo pushing the carousel photo like this. At this point i want the nav links hidden and toggle button to show up.
Lastly, the navigation for mobile view just shows with transparent background and unnecessary top padding as shown in first screenshot.
Relevant HTML:
<div class="navbar navbar-default" data-spy = "affix" data-offset-top = "200" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index-en"><img class = "logo" src = "logo.png" alt = ""></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a class = "active" href="#">Home</a></li>
<li>About us</li>
<li>Employees</li>
<li>Where we are</li>
</ul>
</div>
</div>
</div>
CSS:
.container{
min-height: 100%!important;
margin: 0 auto!important;
padding: 0 0 0px!important;
}
.navbar-default .navbar-nav > li > a {
color: #4E4F51!important;
text-transform: uppercase!important;
font-family: 'Raleway', sans-serif!important;
font-size: 16px;
text-decoration: none;
margin: 0px 10px;
padding: 10px 10px;
position: relative;
z-index: 0;
cursor: pointer;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #3BB34A!important;
background-color: transparent!important;
}
.navbar-header {
overflow:hidden!important;
}
.logo{
max-height:100%;
}
.navbar-brand {
padding: 0px!important;
height: 140px!important;
}
.navbar-brand>img {
padding: 15px!important;
width: auto!important;
}
.navbar-toggle {
padding: px!important;
margin: 25px 15px 25px 0!important;
}
.navbar {
margin-bottom: 0!important;
}
.navbar-default {
z-index:9999!important;
}
.navbar-default .navbar-nav {
padding-top:50px;
}
.affix{
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
opacity: 0.9;
max-height:140px;
}
.affix-top {
-webkit-transition:padding 1.5s ease-in-out;
-moz-transition:padding 1.5s ease-in-out;
-o-transition:padding 1.5s ease-in-out;
transition:padding 1.5s ease-in-out;
max-height:140px;
}
I would appreciate some suggestions on how to fix this.
Just added new div with fixed height, but it didn't work, logo stayed in it's place, but the toggle button isn't showing.
Here is the sample example for automatically setting the navbar hidden when window size reduced. I this may help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span.nav-btn").click(function(){
$("ul.nav").slideToggle();
});
$(window).resize(function(){
if($(window).width()>600)
{
$('ul.nav').removeAttr("style");
}
if($(window).width()<600)
{
$('ul.nav').css('display','none');
}
});
});
</script>
<style>
body{
padding:0px;
margin:0px;
}
.nav{
background:#FF6600;
margin:0px;
list-style:none;
text-align:center;
}
.nav>li{
display:inline-block;
}
.nav>li>a{
text-decoration:none;
font-size:18px;
}
#media (max-width:600px){
.nav{
text-align:left;
}
.nav li{
display:block;
}
.nav-btn{
display:block;
background:#FF6600;
font-size:20px;
cursor:pointer;
}
.nav-btn:before{
content:"Menu";
}
}
</style>
</head>
<body>
<nav>
<span class="nav-btn"></span>
<ul class="nav" style="display:block;">
<li>HOme</li>
<li>About Us</li>
<li>Products</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
I have recently been developing a webpage for my business, and have been asking questions to aid the self - development, called Empreus.
I am using bootstrap to help me design the page.
However, I have now reached a problem.
The code I have so far is shown in the code snippet.
#font-face {
font-family: 'montserratlight';
src: url('montserrat-light-webfont.eot');
src: url('montserrat-light-webfont.eot?#iefix') format('embedded-opentype'),
url('montserrat-light-webfont.woff2') format('woff2'),
url('montserrat-light-webfont.woff') format('woff'),
url('montserrat-light-webfont.ttf') format('truetype'),
url('montserrat-light-webfont.svg#montserratlight') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'montserratsemi_bold';
src: url('montserrat-semibold-webfont.eot');
src: url('montserrat-semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('montserrat-semibold-webfont.woff2') format('woff2'),
url('montserrat-semibold-webfont.woff') format('woff'),
url('montserrat-semibold-webfont.ttf') format('truetype'),
url('montserrat-semibold-webfont.svg#montserratsemi_bold') format('svg');
font-weight: normal;
font-style: normal;
}
#header {
padding:10px 0 0 0 ;
}
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-brand {
display:none;
}
}
.navbar {
margin-bottom:0px;
font-family:"montserratlight";
text-transform: uppercase;
border-top:2px solid #000;
border-bottom: 2px solid #000;
border-radius:0px;
}
img.logoEmpreus {
margin-left: auto;
margin-right: auto;
display:block;
margin-bottom:10px;
}
img.logoEmpreus:hover {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
#page {
margin: 0px auto;
}
li {
display:inline;
margin:0 -1px;
}
li a {
color: black;
font-size:16px;
text-decoration: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
li a:hover {
color: blue;
font-size:18px;
text-decoration: none
}
li.active a {
font-weight: bold;
color: #333;
text-decoration: none
}
ul {
margin:0 auto;
font-family:"montserratlight";
text-transform: uppercase;
}
.active {
font-family:'montserratsemi_bold';
}
.imageInside {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
margin-top:0px;
margin-bottom:0px;
}
h2 span {
color: white;
font: bold 0.8em 'montserratsemi_bold', Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#base ul {
margin:0 auto;
border-top:2px solid #000;
border-bottom: 2px solid #000;
padding:10px;
text-align: center;
font-family:"montserratlight";
text-transform: uppercase;
}
<!DOCTYPE html>
<head>
<title>Problems | Stack Overflow</title>
<!-- Tab Title -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div id = "header">
<!-- Empreus logo Image. Animated. Width 300px. -->
<img class = "logoEmpreus animated" src = "http://bit.ly/1P2ZlbH" alt="Empreus" width="300" />
</div>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Stack Overflow</a>
<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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li><b>The Problem</b></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class = "row">
<!-- Declaration of First Row -->
<div class="imageHolder col-md-12" style="margin-top:10px;">
<!-- Image Container as DIV -->
<div class = "imageInside hvr-underline-from-center" >
<h2><span>Logo Issue.</span></h2>
<img id = "imageHomeJPG" src="http://bit.ly/1P2Ylo3" style="width:100%" />
</div>
<!-- Image Link -->
</div>
</div>
<div class="row">
<div id = "base" class="col-md-12" style="margin-bottom:10px">
<p>
<ul class="col-md-12">
<!-- MAIN NENU BAR -->
<li>Copyright Whatever</li>
</ul>
<!-- Unordered lists.-->
</p>
</div>
<!-- Navigation HTML Markup -->
</div>
</div>
</body>
</html>
Now, here is the problem.
The webpage viewed on an iPhone 6 device appears as such.
However, on an iPhone 4/ iPhone 5, the logo moves out of the container (see below)
I want the logo to be within the container width, just like normal for the iPhone 6 & 6 plus example. I was thinking whether it would be possible to add some code to make the logo flexible but I so far tried to use min-width which made no effort.
Can anyone help?
I have inserted the code as a snippet. Please do view it in full screen.
I used the chrome inspect element & resize to simulated screens function to get these screenshots.
Thanks.
The width hard-coded into the image tag may have tripped you up; it would override any CSS in your stylesheet. You could use a combination of width as a percentage and max-width set to the actual width of the image:
<img class = "logoEmpreus animated" src = "http://bit.ly/1P2ZlbH" alt="Empreus" />
img.logoEmpreus {
margin-left: auto;
margin-right: auto;
display:block;
margin-bottom:10px;
width: 80%;
max-width: 300px;
}
Snippet below (For the sake of brevity, I removed some of the HTML/CSS not necessary to duplicate the issue):
#header {
padding: 10px 0 0 0;
}
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-brand {
display: none;
}
}
.navbar {
margin-bottom: 0px;
font-family: "montserratlight";
text-transform: uppercase;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-radius: 0px;
}
img.logoEmpreus {
margin-left: auto;
margin-right: auto;
display: block;
margin-bottom: 10px;
width: 80%;
max-width: 300px;
}
img.logoEmpreus:hover {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
#page {
margin: 0px auto;
}
li {
display: inline;
margin: 0 -1px;
}
li a {
color: black;
font-size: 16px;
text-decoration: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
li a:hover {
color: blue;
font-size: 18px;
text-decoration: none
}
li.active a {
font-weight: bold;
color: #333;
text-decoration: none
}
ul {
margin: 0 auto;
font-family: "montserratlight";
text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="header">
<!-- Empreus logo Image. Animated. Width 300px. -->
<img class="logoEmpreus animated" src="http://bit.ly/1P2ZlbH" alt="Empreus" />
</div>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Stack Overflow</a>
<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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Option 1
</li>
<li>Option 2
</li>
<li>Option 3
</li>
<li>Option 4
</li>
<li><b>The Problem</b>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
My website is georgiantoast.com
When I run it from of my desktop the logo is the appropriate size and fits neatly into the upper left corner. However, when I upload index.html to my hosting service it balloons to the entire page. This is the code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#page-top">
<img id="logo" src="img/portfolio/logo1.png" class="img-responsive" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
OUR WINES
</li>
<li class="page-scroll">
ABOUT US
</li>
<li class="page-scroll">
WHERE TO BUY
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
css code:
#media(min-width:768px) {
.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
#logo {
height: 400%;
margin-top: -35px;
}
.navbar {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar-default,
.navbar-inverse {
border: 0;
}
}
This should be ringing some bells.
#logo {
height: 400%;
}
This is a fairly obvious problem. Use Firefox or Chrome, summon developer mode, and inspect your img. Then you can see the css classes that it's using. I couldn't find your #logo defined in any css file, but here's what else i found using that strategy.
.img-responsive{
max-width:100%;
height: auto;
}
Change max-width to around 20%.
I would use this approach for styles (changed only .navbar-fixed-top .navbar-brand, .navbar-fixed-top .navbar-nav sections):
.navbar-fixed-top {
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
border: 1px solid red;
width: 100%;
padding: 0px;
height: 60px;
margin-top: 5px;
margin-bottom: 5px;
}
.navbar-fixed-top .navbar-nav {
margin-top: 10px;
margin-bottom: 10px;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
margin-top: 0px;
margin-bottom: 0px;
}
.navbar-fixed-top.navbar-shrink .navbar-nav {
margin-top: 5px;
margin-bottom: 5px;
}
.navbar-fixed-top .navbar-brand #logo {
height: 100%;
}
I.e. paddings moved into enclosed navbar-brand and navbar-nav element. I used 20/10px offset for normal/shrink state instead yours 25/20px -- you can tune it yourself. Also navbar-brand fixed to 60 px, img#logo scaled up to 100% -- may be fix it too to 60px of height. I do not quite understand why it was done responsive. Not really needed in navbar.
Your site (georgiantoast.com) doesn't seem to have the same CSS as you posted in your question. Specifically dealing with #logo. With regards to the logos size you need to either move it out of the media query so when the viewport is reduced it doesn't expand or add additional rules (and I would not use img-responsive under these conditions)
Work Snippet Example.
body {
padding-top: 100px;
}
.navbar.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
text-transform: uppercase;
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
border: 0;
background: white;
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar #logo {
height: 90px;
margin-top: -35px;
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
#media(min-width:768px) {
.navbar.navbar-shrink {
padding: 10px 0;
}
.navbar.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
header .container {
padding-top: 150px;
padding-bottom: 150px;
}
header .intro-text .name {
font-size: 2.75em;
}
header .intro-text .skills {
font-size: 2.75em;
}
}
#media(max-width:767px) {
.navbar .navbar-collapse {
margin-top: 30px;
margin-bottom: -30px;
border: none;
}
}
header {
text-align: center;
color: #fff;
width: 100%;
background-size: cover;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/b/b4/Niko_Pirosmani._Vintage._1906._Oil_on_oilcloth._125X301.5_cm.jpg");
height: 500px;
}
.divider {
width: 250px;
}
header .container {
padding-top: 100px;
padding-bottom: 100px;
}
header img {
display: block;
margin: 0 auto 20px;
}
header .intro-text .name {
display: block;
text-transform: uppercase;
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 2em;
font-weight: 700;
}
header .intro-text .skills {
font-size: 1.25em;
font-weight: 300;
}
#media (max-width: 380px) {
.navbar #logo {
height: 60px;
margin-top: -20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#page-top">
<img id="logo" src="http://georgiantoast.com/img/portfolio/logo1.png" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll"> OUR WINES
</li>
<li class="page-scroll"> ABOUT US
</li>
<li class="page-scroll"> WHERE TO BUY
</li>
</ul>
</div>
</div>
</nav>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-text"> <span class="name">"The Cradle of Wine"</span>
<hr class="divider"> <span class="skills"> Georgia is the birthplace of wine and home to over 500 indigenous grape verities. </span>
</div>
</div>
</div>
</div>
</header>
Your code withe #logo moved outside the media query.
#media(min-width:768px) {
.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
.navbar {
text-transform: uppercase;
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar-default,
.navbar-inverse {
border: 0;
}
}
#logo {
height: 400%;
margin-top: -35px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#page-top">
<img id="logo" src="http://georgiantoast.com/img/portfolio/logo1.png" class="img-responsive" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll"> OUR WINES
</li>
<li class="page-scroll"> ABOUT US
</li>
<li class="page-scroll"> WHERE TO BUY
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
How to set the collapse background-color of the NavBar.
Currently it looks like this.
If I add:
.collapse {
background: rgba(70,130,180 ,0.4);}
it looks like this. Because I have a transparent background-color.
I don't know how to fix it.
I want to have the same color in both ways.
.navbar-nav > li > a {
height: 30px;
padding-top:8px !important;
}
li a {
margin-right: 15px;
color: gray;
text-transform: uppercase;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 16px;
}
.navbar-toggle {
margin-top: 3px;
background-color: #5F9EA0;
height: 28px;
}
.icon-bar {
margin-top: -2px;
background-color: white;
}
ul.nav a:hover {
color: #5F9EA0;
background-color: transparent;
}
.navbar {
background: rgba(70,130,180 ,0.4);
height: 35px;
min-height: 35px;
position: fixed;
width: 100%;
z-index: 1;
}
.navbar-header img {
height: 32px;
padding-top: 3px;
padding-left: 20px;
}
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav role="navigation" class="navbar navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="pull-left" href="#">
<img src="imgs/Logo.png"/>
</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
</div>
</div>
</nav>
</body>
I'm sure there will be a better way to structure you html, but here is the solution for your case:
Simply add this media queries to the bottom of your css file, and make sure it's rewriting the boostrap one you are using.
#media (max-width:768px) {
.collapse {
margin-top:6px;
background: rgba(70, 130, 180, 0.4);
}
}
And here is the working demo