forked from qwerty/tupali
Responsive en diferentes tamaños
This commit is contained in:
parent
8920a09a1a
commit
32568434fc
@ -295,7 +295,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<div class="col-sm-12">
|
<div class="col-sm-12">
|
||||||
<nav class='navbar navbar-inverse navbar-fixed-top'>
|
<nav class='navbar navbar-inverse navbar-toggleable-md navbar-fixed-top'>
|
||||||
<div class='container navegacion'>
|
<div class='container navegacion'>
|
||||||
<div class='navbar-header'>
|
<div class='navbar-header'>
|
||||||
<button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar' aria-expanded='false' aria-controls='navbar'>
|
<button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar' aria-expanded='false' aria-controls='navbar'>
|
||||||
@ -305,7 +305,8 @@
|
|||||||
<span class='icon-bar'></span>
|
<span class='icon-bar'></span>
|
||||||
</button>
|
</button>
|
||||||
<a class='navbar-brand' href='#'>
|
<a class='navbar-brand' href='#'>
|
||||||
<img src='temas/landingpage/images/logo.png' alt='Tupale.co'>
|
<img src='temas/landingpage/images/logo.png' class='image_full' alt='Tupale.co'>
|
||||||
|
<img src='temas/landingpage/images/logo_tupale.png' class='image_mobile' alt='Tupale.co'>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div id='navbar' class='navbar-collapse collapse'>
|
<div id='navbar' class='navbar-collapse collapse'>
|
||||||
|
@ -14,6 +14,14 @@ html,body {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.image_full {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_mobile{
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
/*logo barra navegacion*/
|
/*logo barra navegacion*/
|
||||||
.navbar-brand img{
|
.navbar-brand img{
|
||||||
width: 250px;
|
width: 250px;
|
||||||
@ -132,15 +140,22 @@ filter: grayscale(0);
|
|||||||
|
|
||||||
/*RESPONSIVE*/
|
/*RESPONSIVE*/
|
||||||
|
|
||||||
|
/*ESCRITORIO*/
|
||||||
|
|
||||||
@media (max-width: 1199px){
|
@media (max-width: 1199px){
|
||||||
body {
|
/* body {
|
||||||
background-color: yellow;
|
background-color: yellow;
|
||||||
}
|
}*/
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
}
|
}
|
||||||
|
.image_full {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_mobile{
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
.navbar.shrink img {
|
.navbar.shrink img {
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
@ -157,11 +172,14 @@ filter: grayscale(0);
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*TABLETS*/
|
||||||
|
|
||||||
@media (max-width: 990px){
|
@media (max-width: 990px){
|
||||||
body {
|
/* body {
|
||||||
background-color: green !important;
|
background-color: green !important;
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
.navbar-nav{
|
.navbar-nav{
|
||||||
float:right;
|
float:right;
|
||||||
transition: all 0.4s ease;
|
transition: all 0.4s ease;
|
||||||
@ -179,6 +197,13 @@ filter: grayscale(0);
|
|||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
transition: all 0.4s ease;
|
transition: all 0.4s ease;
|
||||||
}
|
}
|
||||||
|
.image_full{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_mobile{
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
.navbar.shrink a {
|
.navbar.shrink a {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
@ -188,10 +213,35 @@ filter: grayscale(0);
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px){
|
/*MOBILES*/
|
||||||
body {
|
|
||||||
background-color: red !important;
|
@media (max-width: 767px){
|
||||||
|
/* body {
|
||||||
|
background-color: blue !important;
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
/*menú proyectos a la izquierda*/
|
||||||
|
.navbar-nav{
|
||||||
|
padding-top: 20px;
|
||||||
|
float:left;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* textos menú*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-size: 23px;
|
||||||
|
padding-bottom: 23px !important;
|
||||||
|
padding-top: 23px !important;
|
||||||
|
transition: all 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*menú Nosotros a la derecha*/
|
||||||
|
.navbar-right{
|
||||||
|
float:right !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*volver a centrar logo*/
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
left: 50%;
|
left: 50%;
|
||||||
@ -200,13 +250,59 @@ filter: grayscale(0);
|
|||||||
|
|
||||||
/*logo barra navegacion*/
|
/*logo barra navegacion*/
|
||||||
.navbar-brand img{
|
.navbar-brand img{
|
||||||
width: 250px;
|
margin-top: 50px;
|
||||||
height: 250px;
|
}
|
||||||
margin-top: 80px;
|
|
||||||
|
.image_full{
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_mobile{
|
||||||
|
display: block !important;
|
||||||
|
width: 300px !important;
|
||||||
|
height: 80px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*menú desplegable por delante del logo*/
|
||||||
|
|
||||||
|
.navbar.shrink a {
|
||||||
|
font-size: 20px;
|
||||||
|
padding-bottom: 15px !important;
|
||||||
|
padding-top: 15px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar.shrink img {
|
||||||
|
width: 200px !important;
|
||||||
|
height: 54px !important;
|
||||||
transition: all 0.4s ease;
|
transition: all 0.4s ease;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar.shrink .navbar-toggle {
|
||||||
|
margin: 25px 23px 8px 0;
|
||||||
|
padding: 7px 8px;
|
||||||
|
transition: all 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggle {
|
||||||
|
margin: 13px 15px 13px 0;
|
||||||
|
padding: 4px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar.collapse{
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse.in {
|
||||||
|
margin-top: 75px !important;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
/*fin móbiles*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user