Tagged: ,

Viewing 30 posts - 1 through 30 (of 40 total)
1 2
  • Author
    Posts
  • April 19, 2016 at 7:22 am #617151
    jh100

    Is there a way to control the size of the logo when the header shrinks so it gets smaller, but not super tiny?

    April 21, 2016 at 5:01 am #618861
    Rikard

    Hi jh100,

    Please post a link to your site and we’ll have a look at it.

    Best regards,
    Rikard

    April 21, 2016 at 12:31 pm #619106
    jh100

    Unfortunately the site is only on my local machine at the moment. However, I am just wondering if there is somewhere in the CSS (or elsewhere) where the size that it shrinks to can be changed so it does not shrink as much. Thank you!

    April 21, 2016 at 12:36 pm #619109
    asegoGmbh

    I want to stick on this.

    I changed the behavior for the “normal” logosize and the space above the logo.
    But as the topicowner wrote, how can i change the smaler logo while scrolling down?

    Large logo: http://imgur.com/7eQ5aXd
    Small logo: http://imgur.com/7eQ5aXd

    I need some more space below the logo.
    regards, Oliver

    • This reply was modified 8 years, 2 months ago by asegoGmbh.
    April 21, 2016 at 2:29 pm #619188
    pdmeira

    Hi,

    I have a similar problem, my logo is circule and I want it top, left.
    Now I now how can configure more space for the logo. When I increase logo space (height), the logo is always on top, top, top. How can I center it on the space that I have for the logo?

    Should I ask to change logo image to pad some white space before de logo or is something that we can configure on the enfold layout?

    Sorry but I am just starting.

    Thanks

    April 25, 2016 at 5:20 am #620976
    Ismael

    Hi!

    Edit the js > avia.js file, look for this code around line 1602:

    logo.css({'maxHeight': newH + 'px'});

    Adjust the value of the newH. Or replace it with:

    var logoH = 88; // height value here
logo.css({'maxHeight': logoH + 'px'});

    Best regards,
    Ismael

    April 26, 2016 at 5:31 am #621878
    jh100

    Hi Ismael,
    I tried your suggestions, but they don’t seem to work. I want to make it so the logo shrinks, but not quite so much. Where do I tell the logo how much to shrink when scrolling? (I need explicit directions, as I don’t know JS.)

    Thank you!

    April 28, 2016 at 9:58 am #623572
    Ismael

    Hey!

    Did you adjust the value of the following?

    var logoH = 88; // height value here

    The “88” is the shrinking logo value. Remove browser cache or hard refresh before testing the page.

    Cheers!
    Ismael

    April 29, 2016 at 5:13 am #624102
    jh100

    Yes, I tried that, but it makes it so the logo doesn’t shrink at all, and the height of the header row gets less deep, covering up part of the logo.

    April 29, 2016 at 6:10 am #624110
    Jordan

    Hi,

    Could you please provide a link and login details to your site, so that we can have a closer look. You can place the information in the Private Content section of your reply.

    Best regards,
    Jordan Powell

    April 29, 2016 at 6:12 am #624112
    jh100

    I don’t have the site online anywhere yet, unfortunately.

    April 29, 2016 at 6:19 am #624115
    Vinay

    Hey!

    Please try the below CSS in Enfold > General Styling > Quick CSS

     #top .logo img { 
    width: auto;
    height: auto;
    max-height: 100%;
}

/* Responsive logo size */
@media only screen and (max-width: 756px) {
 #top .logo img { 
    width: auto;
    height: auto;
    min-height: 60px!important;
}
}

    Without us being able to see your site it’s going to be a lot of back and forth and we can easily avoid this if we are able to inspect the elements on your site. If you still have any issues we kindly request you to get back to us when your site is online so we can quickly inspect your site and provide you with accurate solution.

    Regards,
    Vinay

    August 24, 2016 at 6:23 am #676794
    Briana

    When I try replacing that peice of code with:

    var logoH = 88; // height value here
    logo.css({‘maxHeight’: logoH + ‘px’});

    it makes both the regular and scrolled logo at 88 not only the scrolled one :( My scrolled logo overhangs the header bar it’s so tall.

    August 26, 2016 at 5:16 am #677919
    Vinay

    Hi,

    Would you mind elaborating the issue please? What exactly are you trying to achieve and please share the link to your site where we can see the issue and the element in question to help you better.

    Best regards,
    Vinay

    November 23, 2017 at 11:00 pm #880962
    acamediamarketing

    Hello. I have the same issue.

    Is there a CSS code to make the logo stay the same size, but still move like the shrinking logo does. In other words make the shrinking logo bigger?

    See link below

    November 24, 2017 at 1:06 am #880987
    jh100

    I never could get it to do what I wanted. I would like to control how small the logo gets when the page is scrolled. Currently it gets too small. Here is the site: http://www.structuralmedicine.com

    November 25, 2017 at 2:11 pm #881596
    Victoria

    Hi acamediamarketing,

    I would suggest you make your initial logo bigger, would look better and when it shrinks it will stay bigger. And cut all that transparent space around the logo, it makes it bigger in mb and Google does not like images like that.

    Best regards,
    Victoria

    November 25, 2017 at 2:12 pm #881597
    Victoria

    Hi jh100,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
    You can make your header a bit taller from the start or not use the shrinking logo.
    Image 2017-11-25 at 14.12.07.png

    Best regards,
    Victoria

    November 25, 2017 at 2:55 pm #881622
    acamediamarketing

    Hi Victoria,
    Thank you. I will cut away the extra space. But we would not like the logo to get bigger. We would just like the logo to keep the same size. Is there a code that controls the size of the shrinked logo?

    November 25, 2017 at 6:18 pm #881690
    jh100
    This reply has been marked as private.
    November 25, 2017 at 7:41 pm #881713
    Victoria

    Hi jh100,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.header-scrolled .container.av-logo-container,
.header-scrolled.header-scrolled-full .container.av-logo-container {
  height: 56px !important;
    line-height: 56px!important;
}
.header-scrolled .logo img,
.header-scrolled.header-scrolled-full .logo img {
  max-height: 56px !important;
}
.header-scrolled .avia-menu .menu-item a,
.header-scrolled.header-scrolled-full .avia-menu .menu-item a {
  height: 56px !important;
    line-height: 56px!important;
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    November 25, 2017 at 8:05 pm #881725
    jh100

    That causes the scrolled logo to be cut off on the bottom. I tried playing with the 56px dimensions, but nothing works to fix it.

    November 25, 2017 at 8:07 pm #881727
    acamediamarketing

    Unfortunately that did not work for me.

    November 26, 2017 at 6:32 pm #881957
    Victoria

    Hi acamediamarketing,

    Yes, the code did not work for you, did you see my other suggestion that was for you?

    Shrinking Header Logo Size

    If you need further assistance please let us know.
    Best regards,
    Victoria

    November 26, 2017 at 6:35 pm #881958
    Victoria

    Hi jh100,

    I would not post the code, if it was cutting the logo off. Works fine on my end.
    Also, this time I put the code in your child theme style.css and it worked fine. Please try that.

    Best regards,
    Victoria

    November 26, 2017 at 6:46 pm #881965
    jh100

    It’s not that it doesn’t work, it is that it does’t work the way I want it to. The problem is that the logo gets cut off when it shrinks (see the second link that you posted– the bottom of the logo is cut off). I want the whole logo to show when it shrinks. The only thing I wanted to change was for it to shrink less when scrolled, and for the container to be the right size so the logo doesn’t get cut off. I don’t see a way to make it work using CSS.

    November 26, 2017 at 6:54 pm #881968
    Guenni007

    dear jane – maybe this is a nice lecture for you: https://kriesi.at/support/topic/shrinking-of-header-amount-an-info/

    November 26, 2017 at 7:09 pm #881972
    jh100

    Thanks Guenni007, I will try that!

    November 26, 2017 at 7:28 pm #881984
    Victoria

    Hi jh100,

    Let us know how that worked for you.

    Best regards,
    Victoria

    November 26, 2017 at 9:19 pm #882018
    acamediamarketing

    Hi Victoria,
    If you are referring to your message about cropping the image than yes. But this does not help me with keeping the logo the same size (not shrinking). It is still a matter of increasing the size of the logo when it is moving to the new position (the shrinked position).

    Hope you understand my message.

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 40 total)
1 2
  • The topic ‘Shrinking Header Logo Size’ is closed to new replies.