Custom Logo

Hi there,
  1. The custom logo I set has a width of 360px. This poses as a problem when I view the site on smaller screens. The logo doesn't shrink responsively. How can I resolve this?
  2. Is it possible to use media queries to call out different sized custom logos for different screen sizes? 
Thanks!

Comments

  • Hey,

    1. Please provider url to your website and we`ll find right css to do it for you.

    2. This will be possible but needs skills. If you will send us example of what you mean for example, we`ll check if this is possible in your case.
  • edited October 2014
    1. http:// 

    2. I tried to hide the original custom logo, but realized that if I were to introduce a new class or id, I will have to find a way to insert that into pages where the custom logo styles were originally used. I have no idea.. it's more complicated than I had imagined.. 

    Basically, the custom logo goes haywire when the screen size goes below 768px, as well as below 479px, when viewed in Firefox and IE. It seemed auto-resize on Chrome. What's the best solution for this?

    @media only screen and (min-width: 480px) and (max-width: 768px) {
    #Top_bar .logo, #Top_bar .logo h1, #Top_bar .logo:not(.text-logo) h1, #Top_bar #logo {display:none;}
    }

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

    3. Is it possible to increase size of logo in sticky header - to say, double it's current size?

    4. Side-track: Can we add captions within the article gallery lightbox?
  • 1. To make this logo work on device mobiles, please use below css:
    .header-stack #Top_bar .logo #logo { display: block !important; }
    2. Hope above css will also help in this case.

    3. You can use below css for that but we can`t guarantee that you will like it because if you want to increase logo twice, you need to increase height of sticky bar as well:
    #Top_bar.is-sticky #logo img { max-height: 70px; }
    #Top_bar.is-sticky { height: 80px; }
    #Top_bar.is-sticky .menu_wrapper { margin-top: 10px; }
    #Top_bar.is-sticky .top_bar_right { top: 4px; }
    4. At this moment we don`t have this option included.
  • The codes worked! Thanks a lot for your help! 
Sign In or Register to comment.