Bootstrap Logo doesn't shrink when resized

Bootstrap Logo doesn't shrink when resized - 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>

Related

Navbar with centered logo

I am currently designing a Navbar for a page. I want the Logo to be in the middle, between the buttons and the list.
It looks currently like this:
My html & css :
/**
GENERAL
*/
body {
font-family: 'Roboto', sans-serif;
}
/**
NAVIGATION BAR
*/
.navbar {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
}
/* center */
.navbar .center {
position: relative;
/* width: 100%; */
text-align: center;
float: none;
/* height: 100px; */
/* margin-top: auto; */
}
/*
margin-top: 1.33em;
}*/
.navbar .center a, img {
color: black;
text-decoration: none;
font-family: 'Abril Fatface', cursive;
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
}
.navbar .center a:hover, img:hover {
opacity: .5;
}
/* left */
.navbar ul {
list-style: none;
line-height: 1.85714286em;
position: relative;
}
.navbar .left a {
float: left;
color: black;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar li {
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
}
.navbar li:not(:hover):not(.active) {
opacity: .5;
}
/* right */
.navbar .right a {
margin-left: 16px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blog Layout</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Fonts -->
<!-- Main Font-->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Logo Font-->
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<header class="navbar hidden-sm-down">
<div class="container">
<div class="center">
<h4 href="#">
Test Blog.
</h4>
</div>
<div class="left">
<ul>
<li class="active">
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="right">
<a class="btn btn-primary" href="#" role="button">Register</a>
<a class="btn btn-secondary" href="#" role="button">Login</a>
</div>
</div>
</header>
</body>
</html>
Before I used position: absolute; for my .navbar .center but this broke the bootstrap buttons and messed with the spacing between top and bottom of the row.
I already tried <div class="row"> with it, but this completely destroyed my navigation bar.
Please know that I am a beginner with Css and Bootstrap.
Thanks for any help,
Tom

Use flex on the parent for the 3 header items, set each header item to flex-grow: 1; and flex-basis: 0 (or flex: 1 0 0) to have them evenly take up 1/3rd of the overall header, give .left an order: -1 to put it at the beginning of the row, then use align-items: center on the flex parent to center the items vertically. You could also use bottom or baseline if you would rather it be bottom aligned. You can read more about flex options here - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
/**
GENERAL
*/
body {
font-family: 'Roboto', sans-serif;
}
/**
NAVIGATION BAR
*/
.navbar {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
/* center */
.navbar .center {
position: relative;
/* width: 100%; */
text-align: center;
float: none;
/* height: 100px; */
/* margin-top: auto; */
}
/*
margin-top: 1.33em;
}*/
.navbar .center a,
img {
color: black;
text-decoration: none;
font-family: 'Abril Fatface', cursive;
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
}
.navbar .center a:hover,
img:hover {
opacity: .5;
}
/* left */
.navbar ul {
list-style: none;
line-height: 1.85714286em;
position: relative;
}
.navbar .left a {
float: left;
color: black;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar li {
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
}
.navbar li:not(:hover):not(.active) {
opacity: .5;
}
/* right */
.navbar .right a {
margin-left: 16px;
float: right;
}
.navbar > .container {
display: flex;
align-items: center;
}
.navbar > .container > div {
flex: 1 0 0;
}
.navbar .left {
order: -1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blog Layout</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Fonts -->
<!-- Main Font-->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Logo Font-->
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<header class="navbar hidden-sm-down">
<div class="container">
<div class="center">
<h4 href="#">
Test Blog.
</h4>
</div>
<div class="left">
<ul>
<li class="active">
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="right">
<a class="btn btn-primary" href="#" role="button">Register</a>
<a class="btn btn-secondary" href="#" role="button">Login</a>
</div>
</div>
</header>
</body>
</html>

enter image description hereHere is the simple solution for your problem
Html file
<header role="banner">
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-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>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li><img id="logo-navbar-middle" src="images-url" width="200" alt="Logo Thing main logo"></li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header><!-- header role="banner" -->

Please help resize and move logo on my website

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>

Set background-color with opacity of collapse navbar

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

I can't remove bottom white portion of my website

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

full width on the row class in twitter bootstrap 3.0 in mobile

I am building a website and when the website responds to mobile, the dark bar holding the navbar is a few pixels shy of full width.
Here is my HTML:
<div id="wrapper hidden-xs">
<!--Header Section-->
<div class="row backgroundColor">
<!--Navigation-->
<div class="col-xs-12 col-md-12">
<nav class="navbar navbar-default" 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="#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="http://ljferris.com"><img src="images/featherLogo.png" class="img-responsive" alt="Imagine Logo" /></a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Me</li>
<li class="dropdown"> Portfolio <b class="caret"></b>
<ul class="dropdown-menu">
<li>Web Development</li>
<li>Academia</li>
</ul>
</li>
<li>Services</li>
<li>Connect</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
</div>
Here is the CSS:
#wrapper{
max-width: 1400px;
}
.row{
margin: 0 !important;
}
/** Navigation **/
.backgroundColor{
width: 100%;
background-color: #313131;
}
.navbar{
height: 80px;
-webkit-border-radius: 0 0;
-moz-border-radius: 0 0;
-0-border-radius: 0 0;
border-radius: 0 0;
border-bottom: 1px solid #061b33;
border-right: none;
border-left: none;
border-top: none;
text-transform: uppercase;
background-color: #313131;
font-size: 16px;
}
.navbar-brand{
padding: 15px 122px 0 122px;
}
.navbar-nav{
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
padding-right: 80px;
float: right;
text-transform: none;
font-weight: 100;
}
.navbar-nav li{
padding-top: 20px;
}
.navbar-nav>li>a{
font-size: 1em;
color: #EC5657 !important;
}
.navbar-nav>li>a:hover{
color: #d7d7d7 !important;
background-color: #EC5657;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-0-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
.navbar-nav>.open>a:focus{
background-color: transparent !important;
}
.dropdown-menu{
background-color: #313131;
border-top: 3px solid #fff;
margin-top: -10px !important;
z-index: 999999;
}
.dropdown-menu>li>a{
background-color: transparent;
color: #EC5657 !important;
}
.dropdown-menu>li>a:hover{
color: #d7d7d7 !important;
background-color: transparent;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-0-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
#media (max-width: 768px){
.navbar{
border: none;
}
.navbar-brand{
padding: 10px 0 0 20px;
}
ul.navbar-nav{
background-color: #131313;
}
.navbar-collapse.in{
margin-top: 13px;
}
ul.nav.navbar-nav{
background-color: transparent;
border-top: none;
}
#bs-example-navbar-collapse-1{
z-index: 999999;
float: right;
border-top: none;
}
The website is http://ljferris.com - is there anyone out there that could help me with my problem?

It's the side margins on #information. You have to remove it at smaller sizes. Actually, that's just the thinking that likely caused problem - BS3 is built the other way around. It's bitten me a few times. Mobile first = no margin by default and then you add it at larger sizes.
#information {
margin: 20px 0;
}
#media(min-width:768px) {
#information {
margin: 20px;
}
}

You problem is not the menu. It's the footer causing trouble. You need to properly format your rows and column classes.
I suggest you not to use bootstrap classes and your classes on same element and set margin / padding.
#will already pointed the problem out. Beaten by 43 seconds ;)

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Bootstrap Logo doesn't shrink when resized - html

Related

Navbar with centered logo

Please help resize and move logo on my website

Set background-color with opacity of collapse navbar

I can't remove bottom white portion of my website

full width on the row class in twitter bootstrap 3.0 in mobile

Categories

Resources