Hello I am creating my website with the help of everyone and I try to put a logo on the left side of the navigation bar, but so far I only got an example that makes the navigation bar huge.
<a class="navbar-brand" href="#">
<img id="logo" src="images/logo-1.png" >
</a>
I don't know how to put it with these styles that I chose and you helped me improve them.
Thanks.
html,body{
margin: 0; /* NUEVO */
}
/* NUEVA CLASE */
nav.navbar-default.negro{
background-color: black;
border-color: black;
}
body {
background: #2f3133 url(../images/patternbg.jpg) 0 0 repeat;
}
/*----------- Back to top --------------*/
#toTop {
display: none;
width: 27px;
height: 19px;
overflow: hidden;
background: url(../images/totop.png) 0 bottom no-repeat;
position: fixed;
margin-right: -690px !important;
right: 50%;
bottom: 60px;
z-index: 999;
}
#toTop:hover {
background-position: 0 0;
}
#toTop:active, #toTop:focus {
outline: none;
}
/*-----------row_s--------------*/
.row_1 {
text-align: center;
padding: 30px 0;
background: #2f3133 url(../images/patternbg.jpg) 0 0 repeat;
}
.row_2 {
text-align: center;
padding: 22px 0 0;
background: #2f3133 url(../images/patternbg.jpg) 0 0 repeat;
}
.row_3 {
padding: 43px 0 13px;
background: url(../images/pattern2.jpg) 0 0 repeat;
}
.row_4 {
padding: 30px 0 81px;
background: #ffffff;
}
.row_5 {
padding: 30px 0 98px;
background: #ffffff;
}
.row_6 {
padding: 30px 0 72px;
background: #ffffff;
}
.row_7 {
padding: 30px 0 80px;
background: #ffffff;
}
.row_8 {
padding: 63px 0 112px;
background: #ffffff;
}
.row_9 {
padding: 31px 0 90px;
background: #ffffff;
}
.row_10 {
padding: 101px 0 85px;
background: #ffffff;
}
.row_11 {
padding: 40px 0 40px;
background: #ffffff;
}
/*------------links headings-----------*/
p {
font-family: 'Arial', sans-serif;
font-size: 15px;
line-height: 22px;
color: #adadad;
margin: 0;
padding: 0;
margin-bottom: 11px;
}
h2 {
font-family: 'Georgia', serif;
font-size: 26px;
line-height: 28px;
color: #474848;
margin: 0;
padding: 35px 0;
}
h3 {
text-transform: uppercase;
font-family: 'Georgia', serif;
font-size: 12px;
line-height: 20px;
color: #4e4134;
margin: 0 0 10px;
padding: 0;
}
.btn1 {
position: relative;
background: #545658;
color: #ffffff;
font-family: 'Georgia', serif;
font-size: 15px;
line-height: 22px;
font-weight: normal;
border-radius: 50px;
border: none;
padding: 20px 0 24px;
margin: 0;
width: 65px;
height: 65px;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.btn1:hover {
text-decoration: none;
background: #ffffff;
color: #545658;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.btn-link1 {
position: relative;
color: #585858;
font-family: 'Georgia', serif;
font-size: 15px;
line-height: 22px;
font-weight: normal;
}
.btn-link1 span {
margin: 0 0 0 7px;
top: 1px;
position: relative;
height: 11px;
width: 11px;
background: url(../images/arrowsmall1.png) center top no-repeat;
display: inline-block;
}
.btn-link1:hover {
color: #585858;
text-decoration: none;
}
.btn-link1:hover span {
background: url(../images/arrowsmall1.png) center bottom no-repeat;
}
.btn-link2 {
position: relative;
color: #eb5368;
font-family: 'Georgia', serif;
font-size: 15px;
line-height: 22px;
font-weight: normal;
}
.btn-link2 span {
margin: 0 0 0 7px;
top: 1px;
position: relative;
height: 11px;
width: 11px;
background: url(../images/arrowsmall1.png) center bottom no-repeat;
display: inline-block;
}
.btn-link2:hover {
color: #adadad;
text-decoration: none;
}
.btn-link2:hover span {
background: url(../images/arrowsmall1.png) center top no-repeat;
}
.btn-link2:focus {
color: #adadad;
text-decoration: none;
}
.btn-link3 {
position: relative;
color: #eb5368;
font-family: 'Georgia', serif;
font-size: 18px;
line-height: 22px;
font-weight: normal;
}
.btn-link3 span {
top: 1px;
margin: 0 11px 0 0;
position: relative;
height: 19px;
width: 22px;
background: url(../images/iconmail.png) center bottom no-repeat;
display: inline-block;
}
.btn-link3:hover {
color: #37383a;
text-decoration: none;
}
/*------ header ------- */
header {
background: #2f3133 url(../images/patternbg.jpg) 0 0 repeat;
text-align: center;
}
/*-------- Logo -------- */
.navbar-brand_ {
float: none;
display: block;
position: relative;
margin: 0;
text-align: center;
padding: 0;
margin: 68px auto 60px;
}
.navbar-brand_ img {
max-width: 100%;
}
.navbar-brand_a:hover {
text-decoration: none;
}
/*-----------------navbar---------------------*/
.menuheader {
background: #545658;
}
.tm_navbar {
/* position: relative; */ /* ELIMINADO */
padding: 26px 0 22px;
margin: 0;
background: none;
border: none;
}
.tm_navbar .nav {
float: none;
position: relative;
display: inline-block;
}
.tm_navbar ul {
position: relative;
padding: 0;
margin: 0;
background: none;
list-style: none;
}
.tm_navbar .nav li:first-child {
position: relative;
zoom: 1;
background: none;
}
.tm_navbar .nav li {
float: left;
padding: 0 26px 0 27px;
position: relative;
zoom: 1;
background: url(../images/bullet1.png) no-repeat left center;
}
.tm_navbar .nav li a {
text-decoration: none;
text-transform: lowercase;
color: #ffffff;
font-family: 'Georgia', serif;
font-size: 22px;
line-height: 24px;
font-weight: normal;
background: transparent;
padding: 0;
border: none;
border-radius: 0;
text-shadow: 1px 1px 2px #333639;
}
.tm_navbar .nav > li > a .sf-sub-indicator {
background: url(../images/indicator.png) no-repeat 0 bottom;
width: 7px;
height: 4px;
display: inline-block;
top: 30px;
right: 23px;
position: absolute;
z-index: 5;
}
.tm_navbar .nav li a:hover, .tm_navbar .nav > li.active > a, .tm_navbar .nav > li.active > a:hover {
color: #ffcbd2;
text-decoration: none;
}
.tm_navbar .nav > .active > a, .tm_navbar .nav > .active > a:hover, .tm_navbar .nav > .active > a:focus {
color: #ffcbd2;
background: transparent;
}
.tm_navbar .nav > li.sfHover.active > a .sf-sub-indicator, .tm_navbar .nav > li.active > a .sf-sub-indicator {
background-position: 0 0;
}
.tm_navbar .nav > li.sfHover > a, .tm_navbar .nav > li.sfHover > a:hover, .tm_navbar .nav > li > a:hover, .tm_navbar .nav > li.active > a, .tm_navbar .nav > li.active > a:hover {
color: #ffcbd2;
background: transparent;
}
/*---------submenu1-------------*/
.tm_navbar .nav ul {
position: absolute;
display: none;
top: 51px;
left: 0px;
width: 110px;
padding: 20px 24px 10px;
list-style: none;
zoom: 1;
z-index: 11;
background: #eb5368;
margin: 0;
text-align: center;
}
.tm_navbar .nav ul li:first-child {
width: 64px;
padding: 0 0 6px;
display: block;
position: relative;
zoom: 1;
z-index: 10;
background: transparent;
}
.tm_navbar .nav ul li:first-child img {
position: absolute;
top: -20px;
}
.tm_navbar .nav ul li {
text-align: left;
width: 64px;
padding: 6px 0;
display: block;
position: relative;
zoom: 1;
z-index: 10;
background: url(../images/dotted1.png) top center repeat-x;
}
.tm_navbar .nav ul li a {
text-align: left;
position: relative;
color: #ffffff;
padding: 0;
font-family: 'Arial', sans-serif;
font-size: 14px;
line-height: 20px;
font-weight: normal;
margin: 0 0 0 10px;
text-shadow: none;
}
.tm_navbar .nav ul li a:hover {
color: #474848;
}
.tm_navbar .nav > li > ul li > a:hover, .tm_navbar .nav > li > ul li.sfHover > a {
text-decoration: none;
color: #474848;
}
.tm_navbar .nav > li > ul li > a:hover, .tm_navbar .nav > li > ul ul li.sfHover > a {
text-decoration: none;
color: #474848;
}
/*-----------submenu2-----------*/
.tm_navbar .nav ul ul {
list-style: none;
width: 87px;
padding: 10px;
background: #4e4134;
left: 86px;
top: 0px;
background: url(../images/patternsubmenu2.jpg);
}
.tm_navbar .nav ul ul li:first-child {
text-align: left;
padding: 6px 0;
position: relative;
zoom: 1;
z-index: 11;
background: transparent;
}
.tm_navbar .nav ul ul li {
text-align: left;
padding: 6px 0;
position: relative;
zoom: 1;
z-index: 11;
background: url(../images/dotted2.png) top center repeat-x;
}
.tm_navbar .nav ul ul li a {
color: #eb5368;
text-shadow: none;
}
.tm_navbar .nav ul ul li a:hover {
color: #474848;
}
/*-----indicator2-------*/
.tm_navbar .nav ul .sf-sub-indicator {
background: url(../images/indicator.png) no-repeat 0 0;
width: 7px;
height: 5px;
position: absolute;
display: block;
top: 8px;
left: auto;
right: -14px;
z-index: 5;
}
/*-------------------select------------------*/
.select-menu {
display: none !important;
}
/*--- header end ------*/
/*------ content ------- */
.title1 {
color: #ffffff;
font-family: 'Georgia', serif;
font-size: 36px;
line-height: 38px;
font-weight: normal;
margin-bottom: 24px;
}
.title2 {
letter-spacing: 0;
color: #939598;
font-family: 'Georgia', serif;
font-size: 17px;
line-height: 26px;
font-weight: normal;
margin-bottom: 28px;
}
/*--------row2--------*/
.list1 {
padding: 0;
margin: 0;
position: relative;
list-style: none;
overflow: hidden;
}
.list1 li a {
display: block;
position: relative;
padding: 0;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.list1 li a p {
text-shadow: 1px 1px 2px #c1c1c1;
font-family: 'Georgia', serif;
font-size: 30px;
line-height: 32px;
font-weight: normal;
padding: 44px 0 41px;
margin-bottom: 0;
}
.list1 li a:hover {
text-decoration: none;
}
.list1 li a:hover p {
color: #4e4134;
text-decoration: none;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.box1 {
background: #eb5368;
}
.box1 figure {
width: 100%;
}
.box1 figure img {
width: 100%;
}
.box1 p {
color: #ffffff;
}
.box2 {
background: #f1d154;
}
.box2 figure {
width: 100%;
}
.box2 figure img {
width: 100%;
height: 216px;
}
.box2 p {
color: #ffffff;
}
.box3 {
background: #5bb4d6;
}
.box3 figure {
width: 100%;
}
.box3 figure img {
width: 100%;
}
.box3 p {
color: #ffffff;
}
.listbox1 {
padding-right: 0;
}
.listbox2 {
padding-right: 0;
padding-left: 0;
}
.listbox3 {
padding-left: 0;
}
/*---------list3-------------*/
.list3 {
padding: 0;
margin: 0;
position: relative;
list-style: none;
overflow: hidden;
}
.box4 {
overflow: hidden;
position: relative;
background: #ffffff;
margin-bottom: 30px;
}
.list3 li figure {
margin: 0;
padding: 0;
float: left;
overflow: hidden;
display: block;
margin-right: 20px;
}
.list3 li figure img {
width: 100%;
}
.list3 li .info1 {
overflow: hidden;
margin-top: 30px;
padding-right: 10px;
}
.list3title1 {
font-family: 'Georgia', serif;
font-size: 26px;
line-height: 28px;
font-weight: normal;
color: #4e4134;
margin-bottom: 10px;
}
.list3title2 {
font-family: 'Georgia', serif;
font-size: 20px;
line-height: 22px;
font-weight: normal;
color: #adadad;
margin-bottom: 6px;
}
.list3title3 {
margin-bottom: 10px;
font-family: 'Georgia', serif;
font-size: 15px;
line-height: 20px;
font-weight: normal;
color: #c6c6c6;
margin-bottom: 8px;
}
/*------------chef------------*/
.title3 {
font-family: 'Georgia', serif;
font-size: 24px;
line-height: 26px;
font-weight: normal;
color: #adadad;
margin-bottom: 17px;
}
.chef figure {
padding: 0;
margin: 0;
float: left;
margin-right: 15px;
}
.chef figure img {
width: 100%;
}
.chef .m_bot1 {
margin-bottom: 14px;
}
/*--------list2--------*/
.list2 {
position: relative;
overflow: hidden;
margin: 6px 0 0 0;
padding: 0;
}
.list2 li {
overflow: hidden;
list-style: none;
padding: 0 0 0 23px;
margin: 0 0 7px 0;
background: url("../images/arrowsmal2.png") 0 5px no-repeat;
}
.list2 li:first-child {
overflow: hidden;
padding: 0 0 0 23px;
margin: 0 0 8px 0;
}
.list2 > li {
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.list2 > li > a {
float: left;
display: block;
text-transform: uppercase;
font-family: 'Georgia', serif;
font-size: 12px;
line-height: 20px;
font-weight: normal;
color: #474848;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.list2 > li > a:hover {
text-decoration: none;
color: #eb5368;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.locations .title4 {
font-family: 'Georgia', serif;
font-size: 19px;
line-height: 26px;
font-weight: normal;
color: #adadad;
}
.locations figure {
padding: 0;
margin: 0;
float: none;
margin-bottom: 4px;
}
hr.line1 {
outline: none;
border: none;
background: #e7decf;
height: 1px;
width: 100%;
padding: 0;
margin: 27px 0 33px;
}
.title5 {
font-family: 'Georgia', serif;
font-size: 19px;
line-height: 26px;
font-weight: normal;
color: #797979;
margin-bottom: 25px;
}
hr.line2 {
outline: none;
border: none;
background: #dbdbdb;
height: 1px;
width: 100%;
padding: 0;
margin: 2px 0 27px;
}
.isotope, .isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
overflow: visible;
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: top, left, opacity;
transition-property: transform, opacity;
}
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
.isotope.infinite-scrolling {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.pad_bot3 {
padding-bottom: 42px;
}
#container {
margin-left: 0;
}
.containerExtra {
margin-left: -30px;
}
.element {
width: 270px;
height: auto !important;
display: block;
position: relative;
color: #222;
border: none;
margin: 0 !important;
padding: 0 0 38px 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#filters.pagination li a.selected {
color: #797979;
background: none !important;
border: none;
text-decoration: underline;
}
#filters.pagination li {
float: left;
}
#filters li {
display: inline-block;
margin-right: 26px !important;
}
#options {
position: relative;
margin-left: 0;
}
.element > a {
margin: 0;
display: block;
position: relative;
}
.element > a figure {
position: relative;
display: block;
margin: 0 0 18px;
padding: 0;
}
.element > a figure img {
width: 100%;
}
.element > a span {
position: relative;
text-transform: uppercase;
font-family: 'Georgia', serif;
font-size: 12px;
line-height: 20px;
color: #797979;
margin: 0;
padding: 0;
text-decoration: none;
}
.element span {
position: relative;
text-transform: uppercase;
font-family: 'Georgia', serif;
font-size: 12px;
line-height: 20px;
color: #797979;
margin: 0;
padding: 0;
text-decoration: none;
}
.description {
position: relative;
display: block;
}
#filters {
position: relative;
}
#filters li {
display: inline-block;
margin-right: 20px;
}
#filters li a {
padding: 0;
background: none;
border: none;
text-transform: uppercase;
font-family: 'Georgia', serif;
font-size: 12px;
line-height: 20px;
color: #797979;
margin: 0;
text-decoration: none;
}
#filters li a:hover {
background: none;
border: none;
text-decoration: none;
}
#options .pagination {
margin: 1px 0 30px 0;
}
/*--------links------------*/
.btn-link4 {
color: #474848;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.btn-link4:hover {
color: #eb5368;
text-decoration: none;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.pad_bot2 {
padding-bottom: 43px;
}
.links p {
margin-bottom: 28px;
}
.privacy_page h2 {
padding-bottom: 42px;
}
.privacy_page p {
margin-bottom: 22px;
}
.privacy_page .m_bot4 {
margin-bottom: 27px;
}
.privacy_page a {
color: #adadad;
}
.privacy_page a:hover {
color: #eb5368;
}
.smalllogo2 {
position: relative;
top: 5px;
}
@media (min-width: 1220px) {
.chef figure {
padding: 0;
margin: 0;
float: left;
margin-right: 31px;
}
.list3 li figure {
margin-right: 53px;
}
.list3 li .info1 {
overflow: hidden;
margin-top: 46px;
}
.box2 figure img {
height: 270px;
}
.container {
padding: 0;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.box1, .box2, .box3 {
float: none;
width: 100%;
margin: 0 auto 25px;
}
.box1 figure, .box2 figure, .box3 figure {
width: 100%;
}
.box1 figure img, .box2 figure img, .box3 figure img {
width: 100%;
}
.box2 figure img {
height: auto;
}
.listbox1 {
padding-right: 15px;
}
.listbox2 {
padding-right: 15px;
padding-left: 15px;
}
.listbox3 {
padding-left: 15px;
}
.list1 {
text-align: center;
}
.sf-menu {
display: none !important;
}
.select-menu {
display: block !important;
color: #ffffff;
border: 1px solid #343434;
background: #343434 !important;
-webkit-box-shadow: none;
box-shadow: none;
position: relative;
width: 100%;
margin: 0;
padding: 5px;
}
.select-menu option {
padding: 0;
}
}
/**************************************************/
@media (max-width: 480px) {
.list3 li figure {
float: none;
width: 100%;
margin-right: 0;
}
.list3 li .info1 {
padding: 20px;
overflow: hidden;
margin-top: 20px;
}
}
@media (max-width: 360px) {
.chef figure {
padding: 0;
float: none;
width: 100%;
margin: 0 0 10px 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header id="header">
<div class="menuheader">
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top tm_navbar negro" role="navigation">
<ul class="nav sf-menu">
<li class="active"><a href="index.html">Casa</a>
</li>
<li><a href="index.html">Sobre mi</a></li>
<li><a href="index-2.html">Guisos</a></li>
<li><a target="_blank" href="#">Postres</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="content">
<div class="slider">
<div class="camera_wrap">
<div data-src="http://i64.tinypic.com/2qdmuis.jpg"></div>
<div data-src="http://i64.tinypic.com/2qdmuis.jpg"></div>
<div data-src="http://i64.tinypic.com/2qdmuis.jpg"></div>
</div>
</div>
<div class="row_1">
<div class="container">
<p class="title1">Aprendamos a cocinar</p>
<p class="title2">Sencillamente.</p>
</div>
</div>
<div class="row_2">
<div class="container">
<div class="row">
<ul class="list1">
<li class="col-lg-4 col-md-4 col-sm-4 listbox1">
<div class="box1">
<a href="#">
<figure><img src="http://i64.tinypic.com/2qdmuis.jpg" alt=""></figure>
<p>Guisos</p>
</a>
</div>
</li>
<li class="col-lg-4 col-md-4 col-sm-4 listbox2">
<div class="box2">
<a href="galeri_vallas.html">
<p>VAsado</p>
<figure><img src="images/vallas_img/vallas9.jpg" height="500 px" alt=""></figure>
</a>
</div>
</li>
<li class="col-lg-4 col-md-4 col-sm-4 listbox3">
<div class="box3">
<a href="galeri_podas.html">
<figure><img src="http://i64.tinypic.com/2qdmuis.jpg" alt=""></figure>
<p>Postres</p>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="row_3">
<div class="container">
<div class="row">
<ul class="list3">
<li class="col-lg-6 col-md-6 col-sm-6">
<div class="box4">
<figure><img src="images/forestal_img/fores13.jpg" alt=""></figure>
<div class="info1 maxheight">
<p class="list3title1">Guiso</p>
</div>
</div>
</li>
<li class="col-lg-6 col-md-6 col-sm-6">
<div class="box4">
<figure><img src="http://i64.tinypic.com/2qdmuis.jpg" alt=""></figure>
</div>
</li>
<li class="col-lg-6 col-md-6 col-sm-6">
<div class="box4">
<figure><img src="http://i64.tinypic.com/2qdmuis.jpg" alt=""></figure>
</li>
<li class="col-lg-6 col-md-6 col-sm-6">
<div class="box4">
<figure><img src="http://i64.tinypic.com/2qdmuis.jpg" alt=""></figure>
</div>
</li>
</ul>
</div>
</div>
</div>
??? Well, just put the image and that's it... or what is the problem?
I hope the following example will help you:
Try this:
First we are going to delete the navbar-brand class and add another one like navbar-logo or whatever you want. I'm going to add it outside the menu, like this:
Segundo: En el css, agregamos esta misma clase (En este ejemplo, la voy a agregar arriba, pero lo ideal es que vaya en el orden que es), una vez allí, indicamos que va a tener un comportamiento de bloque en línea y una alineación vertical al medio, luego por supuesto el ancho del logo.
Tercero: A la imagen
<img src="logo.png"/>
vamos agregarle un comportamiento de tipo bloque, un ancho del 100% igual al contenedor padre y una altura automática, según la dimensión/proporción de la imagen. Así:De resto, sería jugar con los estilos según quieras, por ejemplo, voy a tomar una imagen de internet y vamos a probar con tu código:
Como ves use otra clase, simplemente "logo" porque como te comente, puedes usar la clase que quieras invertarte. Le ajuste el margin en negativo, porque el navbar tiene un padding que agrega un espacio y esta es una forma de contrarrestarlo, otra opción hubiese sido simplemente disminuir ese padding al navbar. Lo otro que puedes ignorar, son los filtros para la capa de ajustes, que use porque el logo que cogí de internet tenía las letras negras y en el fondo pues no se ve, otra opción hubiese sido poner el fondo del logo en blanco, pero quise hacerlo así.
Si aún no te funciona, me escribes en los comentario y ahi vemos. Éxitos!
Actualización
Sí quieres quitar o disminuir el alto de la barra, intenta esto: