Responsive en diferentes tamaños

landingpage_a.html

@@ -295,7 +295,7 @@
       
       
       <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='navbar-header'>
               <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>
               </button>
               <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>
             </div>
             <div id='navbar' class='navbar-collapse collapse'>

temas/landingpage/css/landingpage.css

@@ -14,6 +14,14 @@ html,body {
   position: absolute;
 }
 
+.image_full {
+  display: block;
+}
+
+.image_mobile{
+  display: none !important;
+}
+
 /*logo barra navegacion*/
 .navbar-brand img{
 width: 250px;
@@ -132,15 +140,22 @@ filter: grayscale(0);
 
 /*RESPONSIVE*/
 
-
+/*ESCRITORIO*/
 
 @media (max-width: 1199px){
-  body {
+/*  body {
     background-color: yellow;
-  }
+  }*/
  .navbar-brand {
     margin-top: 0px;
   }
+  .image_full {
+  display: block;
+}
+
+.image_mobile{
+  display: none !important;
+}
 
   .navbar.shrink  img {
    margin-top: 0px;
@@ -157,11 +172,14 @@ filter: grayscale(0);
 }
 }
 
+
+/*TABLETS*/
+
 @media (max-width: 990px){
-  body {
+/*  body {
     background-color: green !important;
   }
-
+*/
   .navbar-nav{
     float:right;
     transition: all 0.4s ease;
@@ -179,6 +197,13 @@ filter: grayscale(0);
     margin-top: 0px;
     transition: all 0.4s ease;
   }
+  .image_full{
+  display: block;
+}
+
+.image_mobile{
+  display: none !important;
+}
 
   .navbar.shrink  a {
     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 {
   transform: translateX(-50%);
   left: 50%;
@@ -200,13 +250,59 @@ filter: grayscale(0);
 
 /*logo barra navegacion*/
 .navbar-brand img{
-width: 250px;
+margin-top: 50px;
-height: 250px;
+}
-margin-top: 80px;
+
-transition: all 0.4s ease;
+.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;
+   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*/