Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • February 24, 2021 at 5:21 pm #1283456
    Eleina_Shinn

    Hi: I have an overlapping logo on this staging site I’m creating, but having trouble with the logo on smaller screens. I want the logo to just be normal Tablet and Mobilel – right now it’s too large on both, and yo can’t get to the hamburger icon on mobile, but looks great on large screens. Wonder if I can make the logo just normal on Mobile, but maybe a tiny bit overlapping on tablet wiith a smaller version of the logo.

    . Here’s the CSS I have now, to accommodate the fixed navigation as well, on scroll, don’t know if I’ve done this right:

    /*MAKE LOGO OVERLAP */
    .logo, .logo * {
    max-height: 188px !important;
    height: 188px !important;
    width: 300px !important;
    }

    .header-scrolled .logo a {
    max-height: 94px !important;
    max-width: 150px !important;
    }
    .header-scrolled .logo img {
    max-height: 94px !important;
    max-width: 150px !important;
    }

    Site is here: https://highflyer.hoeggercommunications.com/

    • This topic was modified 3 years, 9 months ago by Eleina_Shinn.
    February 26, 2021 at 11:56 am #1283823
    Rikard

    Hey Eleina_Shinn,

    You can wrap your code in media queries, if you want different settings for different screen sizes:

    @media only screen and (min-width: 1025px) {
  CSS for desktop goes here
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  CSS for tablets goes here
}

@media only screen and (max-width: 767px) {
  CSS for phones goes here
}

    Best regards,
    Rikard

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