Soporte » Guías – Resolución de problemas » Como alinear verticalmente logo y menú en bootstrap
Como alinear verticalmente logo y menú en bootstrap
-
Buenas tardes,
Estoy creando un pequeño site con wordpress y he elegido una plantilla diseño en Bootstrap. El problema es que por defecto el tema permite poner un logo con un tamaño recomendado de 200x40px, y a mí me gustaría ponerlo más grande porque sino no se leen las letras de dicho logo. Al ponerlo más grande el menú se me descuadra y queda más arriba y me gustaría alinearlo con la parte inferior del logo. Este es el código css que trae el tema por defecto y no hallo donde poder alinear estos dos elementos:
body { -webkit-overflow-scrolling: touch; -webkit-font-smoothing: antialiased; background-color: #ffffff; color: #555; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 400; } /* Titles */ h1, h2, h3, h4, h5, h6 { color: #333; font-family: 'Montserrat', sans-serif; font-weight: 700; } h1 { font-size: 35px; margin-bottom: 30px; margin-top: 30px; } .author-avatar img { -webkit-border-radius: 95px; -moz-border-radius: 95px; border-radius: 95px; } /* Paragraph & Typographic */ p { font-size: 16px; line-height: 28px; margin-bottom: 25px; } .centered { text-align: center; } /* Links */ a { -webkit-transition: color 0.1s ease-in, background 0.1s ease-in; -o-transition: color 0.1s ease-in, background 0.1s ease-in; -ms-transition: color 0.1s ease-in, background 0.1s ease-in; -moz-transition: color 0.1s ease-in, background 0.1s ease-in; color: #1abc9c; transition: color 0.1s ease-in, background 0.1s ease-in; word-wrap: break-word; } a:hover, a:focus { color: #7b7b7b; outline: 0; text-decoration: none; } a:before, a:after { -webkit-transition: color 0.1s ease-in, background 0.1s ease-in; -o-transition: color 0.1s ease-in, background 0.1s ease-in; -ms-transition: color 0.1s ease-in, background 0.1s ease-in; -moz-transition: color 0.1s ease-in, background 0.1s ease-in; transition: color 0.1s ease-in, background 0.1s ease-in; } hr { border: 0; border-top: 1px solid #ccc; display: block; height: 1px; margin: 1em 0; padding: 0; } .navbar { margin-bottom: 0px; text-transform: uppercase; } .navbar-inverse { padding-bottom: 10px; padding-top: 10px; } .navbar-inverse { background-color: #1abc9c; border-color: #16a085; } .navbar-inverse .navbar-nav > li > a { color: white; } .navbar-inverse .navbar-nav > li > a:hover { color: #222222; } .navbar-brand { font-size: 20px; font-weight: 700; letter-spacing: 2px; } .navbar-inverse .navbar-brand { color: white; } .navbar-inverse .navbar-toggle { border-color: transparent; } .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover { background-color: transparent; color: #222222; } .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { background-color: transparent; color: #222222; } .progress-bar-theme { background-color: #1abc9c; } /* Helpers */ .mt { margin-bottom: 40px; margin-top: 40px; } .pt { padding-bottom: 50px; padding-top: 50px; } /* +++++ WRAP SECTIONS +++++ */ #ww { background-color: #f2f2f2; padding-bottom: 70px; padding-top: 70px; } #footer { background-color: #2f2f2f; padding-bottom: 50px; padding-top: 50px; } #footer p { color: white; } #footer h4 { color: white; padding-bottom: 20px; text-transform: uppercase; } /* +++++ Color Wraps / Blog Page +++++ */ #grey { background-color: #f2f2f2; padding-bottom: 60px; padding-top: 60px; } #white { background-color: #ffffff; padding-bottom: 60px; padding-top: 60px; } /* Blog Date*/ bd { color: #d2d2d2; font-size: 12px; font-weight: 700; text-transform: uppercase; } /* Blog Author*/ ba { font-size: 12px; padding-left: 5px; text-transform: uppercase; } /* Blog Quote */ .bq { font-size: 22px; padding-top: 30px; } /* Blog Tags */ bt { font-size: 12px; } /* ================== PORTFOLIO IMAGES HOVER EFFECT ================== */ /* Effects also are controled by hover.zoom.js */ .zoom { display:block; position:relative; overflow:hidden; background:transparent url(images/loader.gif) no-repeat center; } .zoomOverlay { position:absolute; top:0; left:0; bottom:0; right:0; display:none; background-image:url(images/zoom.png); background-repeat:no-repeat; background-position:center; } .zoom2 { opacity: 1; } .zoom2:hover { opacity: 0.5; } /* glyphicon Configuration */ .glyphicon { color: #1abc9c; font-size: 40px; } /* WP User Avatar */ .wp-user-avatar {margin: 0;}
Muchas gracias de antemano por vuestra ayuda.
- El debate ‘Como alinear verticalmente logo y menú en bootstrap’ está cerrado a nuevas respuestas.