I am relatively new to bootstrap and html/css and so far I have been getting along pretty well. What I have been trying to do is increasing the height of the navbar to 80px. My problem is that now I cannot get the content of my navbar centered, they are just too high up.
It looks like this: https://gyazo.com/4ba22961033e9bafa13aac44a50de3f6
Thanks :)
Here is my whole CSS code:
* {
box-sizing: border-box;
}
body {
background-color:#f6f6f6;
background-image: url("img/bg.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size:cover;
overflow-x:hidden;
overflow-y:scroll;
margin:0;
padding:0!important;
}
.navbar {
position: relative;
border:1px solid transparent;
min-height: 80px;
border-top: 0;
border-bottom:1px solid #e7e7e7;
margin-bottom:0;
z-index: 100;
}
.navbar-default {
height: 80px;
}
.navbar-brand {
float:left;
font-size:18px;
line-height:80px;
height:80px;
padding:0 15px;
}
.navbar-toggle {
margin-top: 23px;
padding: 9px 10px !important;
}
.navbar-nav > li > a {
height: 80px;
padding-top:10px;
padding-bottom:10px;
line-height:20px;
border-left: 1px solid #e7e7e7;
}
.navbar-left {
float:left!important;
}
.navbar-right {
float:right!important;
margin-right:-15px;
}
.navbar-nav>li>.dropdown-menu {
margin-top:0;
border-top-right-radius:0;
border-top-left-radius:0;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap required meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Links to stylesheets and scripts -->
<link href="style.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Test</title>
</head>
<body>
<!-- NavBar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Leaderboards</li>
<li>Support</li>
<li class="dropdown">
<a class "dropdown-toggle" data-toggle="dropdown" href="#">(username&pp)
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Settings</li>
<li>Statistics</li>
<li>History</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
Try adding the following flex properties inside of your .navbar-nav > li > a CSS block:
display: flex;
align-items: center;
So the .navbar-nav > li > a block should now look like this:
.navbar-nav > li > a {
display: flex;
align-items: center;
height: 80px;
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
border-left: 1px solid #e7e7e7;
}
CodePen Demo
I think I get the problem(may be)... use this css code...I think this is exactly what you need
.navbar.navbar-default {
min-height: 80px;
}
.container-fluid {
margin-top: 15px;
}
to change font-size change it differently for .navbar-header and .navbar-brand
Related
I have a navigation bar at top of the page. On the right side of it, I have a navigation item list, which are list items. This ul is inside of a div item.
<!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>David Chu's China Bistro</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-expand-md">
<div id="navbarNav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li>
<a href="menu-categories.html">
<span class="material-icons">
restaurant_menu
</span><br class="d-none d-md-block"> Menu</a>
</li>
<li>
<a href="#">
<span class="material-icons">
info
</span><br class="d-none d-md-block"> About</a>
</li>
<li>
<a href="#">
<span class="material-icons">
emoji_events
</span><br class="d-none d-md-block"> Awards</a>
</li>
<li id="phone" class="d-none d-md-block">
<a href="tel:410-602-5008">
<span>410-602-5008</span></a><div>* We Deliver</div>
</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
Problem is, this div has a large space at the right side, as seen in picture. This causes the telephone number to go up when screen width expands. I want this list item to aligned right, so nothing would change when screen expanded.
I'm using Bootstrap 4. I have looked everything about flex but nothing worked out. By the way, I am trying to create a responsive navigation menu which will collapse according to screen size. That's why I am using this classes.
I want this items as in image 1 in every condition.(Telephone number is below others)
body {
font-size: 16px;
color: #fff;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}
/** HEADER **/
#header-nav {
background-color: #f6b319;
/*position: relative;*/
}
#logo-img{
background: url('../images/restaurant-logo_large.png') no-repeat;
width: 150px;
height: 150px;
margin: 10px 15px 10px 0;
}
a.navbar-brand {
padding-top: 25px;
font-family: 'Lora', serif;
color: #557c3e;
font-weight: bold;
font-size: 1.5em;
text-transform: uppercase;
text-shadow: 1px 1px 1px #222;
line-height: .75;
}
.navbar-brand a:focus, .navbar-brand a:hover{
text-decoration: none;
}
p.kosher {
text-transform: uppercase;
margin-top: 10px;
color: #000;
font-size: .7em;
}
p.kosher span{
vertical-align: middle;
}
#nav-list {
margin-top: 10px;
}
#nav-list > li {
margin-right: 15px;
}
#nav-list a {
color: #951C49;
text-align: center;
}
#nav-list a span {
font-size: 1.8em;
}
#phone {
margin-top: 5px;
}
#phone a { /* Phone number */
text-align: right;
padding-bottom: 0;
}
#phone div { /* We Deliver */
color: #557c3e;
text-align: right;
padding-right: 15px;
}
button.navbar-toggler{
clear: both;
margin-top: -70px;
margin-right: 0px;
}
li > a:hover, li > a:focus {
text-decoration: none;
}
#nav-list {
margin-top: 10px;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
max-width: 220px;
}
#nav-list li:last-child {
width:100%;
margin-right:0px;
}
So first of, we have to add a max-width to the #navbarNav:
#navbarNav{
max-width:220px;
}
Then, to the #nav-list, we add this code:
#nav-list {
margin-top: 10px;
display:flex;
justify-content:space-between;
}
Now, you want to align the #navbarNav to the right. There are several ways we can do that. First of is with flexbox. If you want to go with this step, you have to add the following code to the parent of the #navbarNav. Which is the #header-nav:
#header-nav{
display:flex;
justify-content:flex-end;
}
However, this makes sure that everything in your #header-nav, is being aligned to the right. So if you are not adding anything else in the #header-nav, you can easily use this code.
I want to create a menu bar with a list, but it's all in one place!
If I play with the position of the menu (absolute, fixed, ...), it's good, but I want that the menu will be fixed.
CSS:
img.logo {
max-height: 90px;
width: auto;
position: fixed;
clip: rect(5px, 95px, 90px, 5px);
}
a,
li {
color: inherit;
list-style: none;
text-align: center;
display: inline-block;
padding-right: 10%px;
padding-left: 5%;
padding-bottom: 10px;
font-size: 40px;
font-family: Odin rounded;
vertical-align: text-top;
position: fixed;
text-decoration: none;
}
li {
border: 1px solid black;
}
***HTML:***
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
</head>
<body>
<ul class="barre">
<li>
<img class="logo" src="img/logo.png" alt="problem">
</li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</body>
</html>
Run it and you will see what I see...
What is wrong?
PS: Can you say how can I make it all in one line, like a real menu bar
I've made a few changes by simplifying your css content.
You just need to use display: block and float:left to arrange your menu items properly. I've added a few more tweaks to it to suit what you wanted to achieve.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
border: 1px solid #000;
}
li a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
</head>
<body>
<ul class="barre">
<li><img class="logo" src="img/logo.png" alt="problem"></li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
<style>
img.logo {
max-height:90px;
width:auto;
position:fixed;
clip: rect(5px,95px,90px,5px);
}
a, li {
list-style: none;
color: inherit;
list-style: none;
text-align: center;
display: inline-block;
padding-right: 10%px;
padding-left: 5%;
padding-bottom: 10px;
font-size: 40px;
font-family: Odin rounded;
vertical-align: text-top;
position: relative;
text-decoration: none;
display: inline;
}
li {
border:1px solid black;
}
***HTML:***
</style>
</head>
<body>
<ul class="barre">
<li><img class="logo" src="img/logo.png" alt="problem"></li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</body>
</html>
Just changing display:inline-block to inline worked for me. Preview this on full page as this is not responsive example.
Hope This could help. :)
You should remove position:fixed from img-logo, a, li and add position:fixed or position:sticky to their parent container
.navbar{
float: right;
position: sticky /* use can use position:fixed */
}
img.logo{
max-height:90px;
width:auto;
clip: rect(5px,95px,90px,5px);
}
a, li{
color:inherit;
list-style:none;
text-align:center;
padding-right:10px;
padding-left:5px;
padding-bottom:10px;
font-size:16px;
font-family:Odin rounded;
vertical-align:text-top;
text-decoration:none;
display: inline-block;
}
li {
border:1px solid black;
}
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
</head>
<body>
<div class="navbar">
<ul class="barre">
<li><img class="logo" src="img/logo.png" alt="problem"></li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</div>
</body>
</html>
I'm trying to position a DIV on top of the Bootstrap fixed navbar at the top. I've tried z-index and absolute positioning etc, but no matter what I do, the Bootstrap navbar seems to have ultimate topmost priority.
Here's the codepen: http://codepen.io/anon/pen/kkRLKA
Here's my code:
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Our Mission</li>
<li>Who We Are</li>
<li>What We Have Done</li>
<li>The State of Things</li>
</ul>
</div>
</div>
</nav>
<div class="LogoContainer">
</div>
<div class="jumbotron">
</div>
</body>
And the CSS:
body { position:relative; }
div#navbar > ul li
{
padding-right:5vw;
}
#media only screen and (max-width: 1230px)
{
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
.LogoContainer
{
width:200px;
height:200px;
background-color:blue;
border:1px solid red;
position:absolute;
left:5%;
top:0;
z-index:1;
}
.jumbotron
{
height:70vh;
margin-bottom:0;
position:relative;
}
div.donation-form
{
border:1px solid red;
width:19%;
padding:7vh 0 5vh 0;
position:absolute;
right:5%;
bottom:-10vh;
}
div.donation-form input[type=text]
{
display:block;
width:60%;
height:50px;
margin:0 auto 8px auto;
padding-left:15px;
}
div.donation-form input[type="submit"]
{
display: block;
width:60%;
height:60px;
margin:20px auto 0 auto;
background-color: darkgray;
border:none;
}
div.donation-form p
{
font-size:1.1rem;
text-align:center;
}
As you can see, the top 1/4 of the blue box is obscured by the navbar. How do I make it overlap the navbar? I've also tried z-index:999999999 !important but it's useless.
It looks pretty weird in the snippet, but check it out on the jsfiddle. Is that what you wanted?
https://jsfiddle.net/t8j6pgg8/
body {} div#navbar > ul li {
padding-right: 5vw;
}
#media only screen and (max-width: 1230px) {
.navbar-header {
float: none;
}
.navbar-left,
.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in {
display: block !important;
}
}
.LogoContainer {
width: 200px;
height: 200px;
background-color: blue;
border: 1px solid red;
position: absolute;
left: 5%;
top: 0;
z-index: 9999;
}
.jumbotron {
height: 70vh;
margin-bottom: 0;
position: relative;
}
div.donation-form {
border: 1px solid red;
width: 19%;
padding: 7vh 0 5vh 0;
position: absolute;
right: 5%;
bottom: -10vh;
}
div.donation-form input[type=text] {
display: block;
width: 60%;
height: 50px;
margin: 0 auto 8px auto;
padding-left: 15px;
}
div.donation-form input[type="submit"] {
display: block;
width: 60%;
height: 60px;
margin: 20px auto 0 auto;
background-color: darkgray;
border: none;
}
div.donation-form p {
font-size: 1.1rem;
text-align: center;
}
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>Our Mission
</li>
<li>Who We Are
</li>
<li>What We Have Done
</li>
<li>The State of Things
</li>
</ul>
</div>
</div>
</nav>
<div class="LogoContainer">
</div>
<div class="jumbotron">
</div>
</body>
Put div with your logo class here(3th row of code) and delete previous div with logo class of course.
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="LogoContainer"></div>
<div class="container-fluid">
At this moment I am busy with making a nav exactly like this:
Right now I have made this:
How can I fix that logo and dividers like the first image?
I make the website with Bootstrap and I have add some elements you see below in
html, body{
}
nav{
background:#fff;
width:100%;
padding:0px 30px;
}
.navbar-header{
display:block;
text-align:center;
height:80px;
}
.navbar-header img{
margin:0px auto;
height:45px;
}
a.navbar-brand{
padding:20px 30px;
position: absolute;
width:auto;
left:0;
top:0;
text-align:center;
margin:auto;
background-color: red;
}
.navbar-collapse.collapse{
padding:0px;
white-space: nowrap;
}
.navbar{
background:#fff;
width:100%;
margin:0px;
padding-left: 0px;
padding-right: 15px;
z-index:10;
border: 0px solid transparent;
border-radius:0px
}
.navbar > div{
margin-left: 0px;
margin-right: 0px;
}
.collapse, .nabar-right{
margin-right: 0px!important;
}
.navbar ul li a{
background:none;
text-transform:uppercase;
font-family: 'Open Sans', sans-serif;
font-weight:300;
font-size:14px;
color:#000;
letter-spacing: 0.035em;
text-decoration: none;
}
ul.nav li.open ul.dropdown-menu li{
padding:0px 0px;
}
.navbar ul li a:hover{
background:#ffffff;
color:#22257a!important;
}
.navbar ul li a:active{
background:none;
}
.nav-selected{color:#22257a!important; font-weight:700;}
.navbar a.nav-selected{color:#22257a!important; font-weight:700;}
.navbar ul li.nav-path-selected .dropdown-toggle{color:#22257a; font-weight:700;}
/*-------------------------------------------------*/
.caret {
color: #000000;
-webkit-transition: color 0.2s; /* Safari */
transition: color 0.2s;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
background-color: transparent;
color: #000000 !important;
}
.dropdown-menu {
border:1px solid #f1f1f1;
border-radius: 0;
box-shadow: none;
margin-top: -15px;
padding:0px 0px;
}
.dropdown-menu li {
padding: 2px 16px 2px 16px;
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
background-color: transparent;
}
.dropdown-menu a {
color: #777777 !important;
}
.dropdown-menu > li > a {
padding: 8px 14px;
}
div#ccm-highlighter{z-index:1000; min-height:30px;}
hr {
width: 120px;
border-top: 4px solid black !important;
}
i {
color: white;
}
.intro-top {
width: 100%;
height: 50px;
background-color: red;
float: left;
}
header {
width: 100%;
height: 50px;
background-color: #4d4d4d;
}
header p{
color:white;
}
header i {
float:left;
padding-right: 10px;
}
a{
text-decoration: none !important;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1, user-scalable=0" name="viewport">
<title>Title</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mobiel.css">
<link rel="stylesheet" href="css/tablet.css">
<link rel="stylesheet" href="css/desktop.css">
<link rel="stylesheet" href="typography.css">
<link href='######' rel='stylesheet' type='text/css'>
<!--[if gte IE 9]><style type="text/css">.gradient {filter: none;}</style><![endif]-->
<!--[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]-->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<a class="navbar-brand" href="#">
<img src="http://itavisen.no/wp-content/uploads/imported/5064692.jpg">
</a>
</div>
<div class="col-sm-2">
<i class="fa fa-phone" aria-hidden="true"></i><p>06 12345678</p>
</div>
<div class="col-sm-2">
<i class="fa fa-envelope" aria-hidden="true"></i><p>#mail.nl</p>
</div>
</div>
</div>
</header>
<div class="container">
<nav class="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
<span>Menu</span>
<span class="glyphicon glyphicon-menu-hamburger">
</button>
</div>
<div class="collapse navbar-collapse" id="main-menu">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="dropdown">
page2 <span class="caret"></span>
<ul class="dropdown-menu arrow_box">
<li>page1drop</li>
<li>page2drop</li>
</ul>
</li>
<li>page3</li>
<li>Page4</li>
<li role="separator" class="divider">Contact</li>
</ul>
</div>
</nav>
</div>
<div class="intro-top">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Doe,
For the logo you may try z-index to put it in the front of the webpage.
And for the "li" you should use padding and border to get the same result.
If you want to practice by watching code you should find some bootstrap menu template.
e.g. : http://blog.themearmada.com/20-inspiring-bootstrap-menu-examples/
I'm having a problem with the brand logo image. Even though it looks good on my computer, I use a background-color to check the hover and it seems to be quite off position. Check this out please. By the way, I'm new to web design, so you may see lots of mistakes in my code, hehe.
pd: I uploaded the image to Imgur but I use it directly from a folder.
.navbar-default {
background-color: #4bd434;
border-color: #209c44;
}
.navbar li a:hover:not(.active) {
background-color: #209c44;
}
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff;
font-weight: bold;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: black;
}
body {
background-image: url("Imagenes/1.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbotron {
margin-top: 100px;
}
.jumbotron h1{
text-align:center;
}
.map-responsive{
overflow:hidden;
padding-bottom:40%;
position:relative;
height:0;
}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
#brand-image {
height: 110px;
width: 110px;
padding-bottom: 40px;
margin-top: -24px;
}
#brand-image:hover {
background-color: red;
}
<!DOCTYPE html>
<html lang="es">
<head>
<title>Central de Reparaciones</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href=".\sheet.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<a class="navbar-brand" a href="./index.html">
<img class="img-responsive" id="brand-image" alt="Website Logo" src="http://s14.postimg.org/rqjmwt8r5/logo.png"/>
</a>
<ul class="nav navbar-nav">
<li>Heladeras</li>
<li>Lavarropas</li>
<li>Secarropas</li>
<li>Microondas</li>
<li>Televisores</li>
<li>Lavavajillas</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-earphone"></span> (0223) 482-5446</li>
<li><span class="glyphicon glyphicon-map-marker"></span> Dónde estamos</li>
</ul>
</div>
</nav>
<div class="container">
<div class="jumbotron well">
<div class="page-header">
<h1>Central de Reparaciones</h1>
</div>
<p>Somos service oficial de Whirpool blablablablal</p>
<p>ASDSDASDSDASDDSDASDSDASDDSDDDASDASD</p>
</div>
</div>
</body>
<script src=".\script.js"></script>
</html>
It seems that is way off because of padding-bottom: 40px; in #brand-image. Removing it should resolve problem. If you like to keep same pixel ratio, use margin-bottom instead of padding-bottom.
Your CSS should look like:
#brand-image {
height: 110px;
width: 110px;
margin-bottom: 40px;
margin-top: -24px;
}