Okay
  Public Ticket #2679065
Responsive logo
Closed

Comments

  • John Bartholdsson started the conversation

    Hello.

    My logo is wide so I put the max px to 390. However when I look at the website on a mobile it is the same size. Is not the logo responsive? Should it not get smaller on a smaller devices? 



  •  234
    Elena replied

    Hell John,

    Logo is "absolutely" positioned, so it doesn't resize on mobile. Also, I'd not recommend scaling down a logo, because it will turn very small on mobile. I would suggest to upload a narrow version of your logo if you can, or eventually consider customising the theme and serve a different logo version on mobile only. Hope that makes sensesmile.png

    Best, P.

  • John Bartholdsson replied

    Hello again.


    If i would change the "absolute" position, where is it?


    /*--------------------------------------------------------------
    # Header
    --------------------------------------------------------------*/
    .site-header {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9;
      height: 90px;
      padding: 15px 0px;
      font-size: 0.875rem;
      font-weight: 700;
      letter-spacing: 1px;
      color: #333;
      background-color: #FFF;
      -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
              box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    }

    .site-header.is-header-fixed {
      -webkit-transition: -webkit-transform .25s;
      transition: -webkit-transform .25s;
      transition: transform .25s;
      transition: transform .25s, -webkit-transform .25s;
    }

    .site-header .site-branding {
      float: left;
    }

    .site-header .site-title {
      margin-bottom: 0;
      text-transform: uppercase;
    }

    .site-header .site-title a {
      display: block;
      line-height: 60px;
    }

    .site-header a {
      color: #333;
    }

    .is-nav-open .site-header {
      -webkit-transform: none !important;
          -ms-transform: none !important;
              transform: none !important;
    }

    .is-nav-open .site-header a {
      color: #333 !important;
    }

    .site-header .select-language {
      line-height: 60px;
      text-transform: uppercase;
      float: right;
    }

    .site-header .select-language a {
      color: #AEB1B5;
    }

    .site-header .select-language a:hover {
      color: #333;
    }

    .site-header .select-language a img {
      margin-bottom: 0;
    }

    .site-header .select-language .current-lang a {
      color: #333;
    }

    .site-header.is-hero-on .site-branding a {
      color: rgba(255, 255, 255, 0.85);
    }

    .site-header.is-hero-on .site-branding a:hover {
      color: #FFF;
    }

    @media screen and (min-width: 1020px) {
      .is-menu-desktop .site-header.is-hero-on .main-navigation > div > ul > li > a {
        color: rgba(255, 255, 255, 0.85);
      }
      .is-menu-desktop .site-header.is-hero-on .main-navigation > div > ul > li > a:hover {
        color: #FFF;
      }
    }

    .site-header.is-hero-on .select-language > ul > li > a {
      color: rgba(255, 255, 255, 0.5);
    }

    .site-header.is-hero-on .select-language > ul > li > a:hover {
      color: rgba(255, 255, 255, 0.7);
    }

    .site-header.is-hero-on .select-language .current-lang > a {
      color: #FFF;
    }

    .site-header.is-hero-on .menu-toggle .nav-icon {
      background-color: #FFF;
    }

    .site-header.is-header-fixed {
      position: fixed;
      background-color: rgba(255, 255, 255, 0.97);
      -webkit-transform: translateY(-100%);
          -ms-transform: translateY(-100%);
              transform: translateY(-100%);
    }

    .site-header.is-header-fixed.is-header-transitioning {
      -webkit-transition: -webkit-transform .35s;
      transition: -webkit-transform .35s;
      transition: transform .35s;
      transition: transform .35s, -webkit-transform .35s;
    }

    .site-header.is-header-fixed.is-header-visible {
      -webkit-transform: none;
          -ms-transform: none;
              transform: none;
    }

    .site-header.is-header-fixed.is-header-hidden {
      visibility: hidden;
      opacity: 0;
    }

    .site-header.is-hero-on {
      -webkit-box-shadow: none;
              box-shadow: none;
      background-color: transparent;
    }

    @media screen and (min-width: 769px) {
      .is-block-frame .site-header.is-hero-on {
        margin: 20px 0;
      }
    }

    @media screen and (min-width: 769px) {
      .is-block-frame .site-header.is-hero-on {
        margin-right: 20px;
        margin-left: 20px;
      }
    }

    .is-logo-image .site-header .site-branding {
      font-size: 0;
    }

    .is-logo-image .site-header .site-title {
      text-indent: -9999px;
      height: 60px;
      width: 60px;
      display: block;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: auto 60px;
    }

    .is-logo-centered .site-header .site-branding {
      position: absolute;
      display: inline-block;
      left: 50%;
      -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
              transform: translateX(-50%);
    }


  •  234
    Elena replied

    Please see screenshot.

    But please note that it's not that easy as changing the position property. What you are trying to do might require much more CSS changessmile.png 

    Best, P.