search

ajoposor / KV-site-development

KV site development
0 stars 0 forks source link

Revisar márgnes de Logo #24

Closed ajoposor closed 7 years ago

ajoposor commented 7 years ago

Alinear logos con margen de la página

ajoposor commented 7 years ago

Listo.

/ Sticky Header Mobile Color Transparency /

/ reduce max size of Top-bar.is-sticky funciona esto??? /

Top_bar.is-sticky .container_wrapper {

max-width: 920px; }

/ adjust max width for header container 1220 - 32 (16 x 2) /

Top_bar .container {

max-width: 1188px !important; }

/ kv sizing/

/ kv_max_width: para limitar ancho de párrafos en secciones a todo lo ancho / .kv_max_width { max-width: 1188px; /1220 menos 32 16x2/ margin: auto; }

@media only screen and (max-width: 1240px) { .kv_max_width { max-width: 908px; / 940 menos 16 por cada lado de padding / }

Top_bar .container {

  max-width: 908px !important; /* 940 menos  32 (16 x 2)  */
 }

}

@media only screen and (max-width: 960px) { .kv_max_width { max-width: 676px; / 708 menos 16 por cada lado de padding / }

Top_bar .container{

  max-width: 708px !important; /* 708 quitar los márgenes de 16 de cada lado en los elementos */
 }

.logo-no-margin #Top_bar .logo { margin-left: 16px !important; }

Top_bar .logo {

 margin: 0px 14px 0px 16px !important;
 margin-left: 16px !important;

}

/ place sticky menu icon on the right /

Top_bar a.responsive-menu-toggle.is-sticky {

  right: 10px !important;  /* 16 - 6 (34-22)/2  */

}

}

@media only screen and (max-width: 767px) { .kv_max_width { max-width: 668px; }

/ set logo to be displayed on the left side/

Top_bar .logo {

float: left; margin: 0px 14px 0px 16px; position: unset; width: unset; text-align: unset; }

/ set side margins on logo top_bar top /

Top_bar .logo #logo {

margin: 7.5px 50px 7.5px 0px !important; }

/ adjust margin on topbar sticky logo on the left void space /

Top_bar.is-sticky #logo {

margin: 7.5px 100px 7.5px 0px !important; / / }

}

@media only screen and (max-width: 700px) { .kv_max_width { max-width: 700px; padding-right: 16px; /0 margin + 16 padding/ padding-left: 16px; } }

@media only screen and (max-width: 767px) {

Top_bar .container {

  max-width: 700px !important;
 }

/ place sticky menu icon on the right /

Top_bar a.responsive-menu-toggle.is-sticky {

  left: unset !important;
  position: absolute !important;
  right: 10px !important;  /* 16 - 6 (34-22)/2  */  
  top: 50% !important;

}

}

/ leave responsive menu icon on the right / @media only screen and (max-width: 767px) {

/ unset background for Top_bar /

Top_bar {

background: unset !important; }

/ set color to 1 opacity on sticky bar /

Top_bar.is-sticky {

background: rgba(255,255,255,1) !important; }

/ set color to 1 opacity on top bar/

Top_bar.top {

background: rgba(255,255,255,1) !important; }

/ display big logo on top/

Top_bar.top .logo img.logo-main{

display:inline  !important;

}

/ display small logo on sticky /

Top_bar.is-sticky .logo img.logo-sticky {

display:inline  !important;

}

}

/ Remove from top header if width less than 422/

@media only screen and (max-width: 422px) {

/ remove big logo from top/

Top_bar.top .logo img.logo-mobile {

display:none  !important;

}

/ replace with logo icon/

Top_bar.top .logo img.logo-sticky {

display:inline !important;

}

}