Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • June 14, 2019 at 8:17 pm #1110467
    sky19er

    I have this css working for a wider centered logo on my client’s inside pages (eg https://atlanticspecialtycoffee.com/about-us/ ))…

    .html_header_top.html_logo_center .logo {
left: 0;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
transform: none;
}
.logo a img {
    margin: 13px auto;
    width: 70%;
}

    …but I’m having trouble replicating it on my client’s home page, where we’re using a transparent glassy header ( https://atlanticspecialtycoffee.com/ ). I have this css, which sort of works, but, because I’m having to use precise negative margin, the vertical positioning of the logo jumps around too much, depending on the browser width — too much so to control with media queries.

    .logo img.alternate {
    position: relative;
    top: -115px;
    max-height: none;
    }

    Do you have a bit of css that would better handle this positioning of such a wide logo in the transparent glassy header?

    June 15, 2019 at 8:21 am #1110597
    Mike

    Hey sky19er,
    Thanks for the links and showing your css, but as I look at your homepage with the transparent glassy header I don’t see the logo jumping on scroll.
    Please include a screenshot of what you are seeing, you can add screenshots by uploading your images to a service such as postimages.org and pasting the html code given in your post.

    Best regards,
    Mike

    June 15, 2019 at 8:46 pm #1110703
    sky19er

    Not on scroll — I said depending on the browser width. Anyway, I toke another crack at it and found something that seems to work — here it is, including all my media queries, in case it helps anyone. Let me know if you think there’s a simpler/better way — again, this is for https://atlanticspecialtycoffee.com/ 

    /* WIDER LOGO - STICKY HEADER & TRANSPARENT ON HOME PAGE */
div .logo {
    float: none;
    position: relative;
}
.logo a img {
    margin: 0 auto;
    width: 850px;
}
.logo img.alternate {
    position: relative;
    top: -95px;
}
@media only screen and (max-width: 1200px) and (min-width: 990px) {
  .logo a img {
      width: 670px;
      margin: 10px auto;
  }
  .logo img.alternate {
      top: -85px;
  }
}
@media only screen and (max-width: 989px) and (min-width: 768px) {
  .html_header_top.html_logo_center .logo {
      left: 0;
      -webkit-transform: none;
      transform: none;
  }
  .responsive .logo img {
      width: 600px;
      margin: 12px auto;
  }
}
@media only screen and (max-width: 900px) and (min-width: 768px) {
  .responsive .logo img {
      width: 450px;
      margin: 20px auto;
  }
}
@media only screen and (max-width: 767px) {
  .responsive .logo img {
      width: 400px;
  }
}
    • This reply was modified 5 years, 6 months ago by sky19er.
    June 16, 2019 at 3:26 pm #1110797
    Mike

    Hi,
    Thanks for sharing your solution, your “-webkit-transform: none);” has a stray “)” otherwise it looks good.

    Best regards,
    Mike

    June 16, 2019 at 6:11 pm #1110840
    sky19er

    Ooh, thanks for catching that — I’ve edited the code above to remove that stray.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘wider centered logo, transparent glassy header’ is closed to new replies.