Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1283456

    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, 7 months ago by Eleina_Shinn.
    #1283823

    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

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