Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 29, 2017 at 9:24 pm #801260
    tomipro

    Dear Sirs,

    i wanted to make the main logo bigger and overflow the header container on both sides with the following CSS:

    .logo a {
margin-top: -10px;
}

.logo, .logo a, .logo img {
overflow: visible;
max-height: 110px important!;
}
#header_meta { z-index: 1; }

    The problem is, that the property max-height doesnt go from 90 to 110 and when scrolling the header resizes but the logo doesnt resize with it accordingly.
    Any ideas how to solve that?

    Thank you so much.
    Tomi

    • This topic was modified 6 years, 11 months ago by tomipro.
    May 29, 2017 at 11:45 pm #801299
    John Torvik

    Hey tomipro,

    Just to have sure about your question: Do you want to have the same logo size while the header is resized?

    Best regards,
    John Torvik

    May 30, 2017 at 10:25 am #801424
    tomipro

    Hey John,

    no I would like to have the logo resize accordingly.

    Thank you, br,
    Tomi

    May 30, 2017 at 2:00 pm #801517
    Sarah

    Hi Tomi,

    It looks like the exclamation mark in the !important rule is in the wrong place. Can you try this instead, for the middle part of your code:

    .logo, .logo a, .logo img {
overflow: visible;
max-height: 110px !important;
}

    Also, for your reference, when the header is scrolled, it takes the class header-scrolled. So if you want, you can use this in your CSS:

    .header-scrolled .logo, .header-scrolled .logo a, .header-scrolled .logo img  {
CODE HERE
}

    Best regards,
    Sarah

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.