Custom header for mobile theme – Suits

  • Unknown's avatar
    julieashton12 · Member ·

    I’m trying to customize the CSS for the Suits theme so that a logo appears on the mobile site vs. the full header on the table or desktop version. Any suggestions?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    siobhyb · Member ·

    Hi Julie,

    The first step to create a custom header for the mobile theme would be for you to upload it to your Media Library.

    Next, navigate to the CSS panel of the Customizer and paste the following snippet:

    .mobile-theme header img {
    visibility: hidden;
}

.mobile-theme #branding {
    background: #000 url(mobile-header.png) no-repeat scroll top;
    background-size: cover;
    height: 200px;
}

    mobile-header.png would be replaced with the URL to the image in your Media Library. You can also adjust the value of height according to how big your image is.

    It’s also worth noting that Suits is ready-designed to adapt based on the size of the screen it’s being viewed on. If you’d like to disable the mobile theme and make use of the Suit’s mobile design, we could make use of CSS Media Queries in order to add a custom header on mobile sites only.

    Let me know how you decide to proceed. I’ll be happy to help out in any way I can.

  • The topic ‘Custom header for mobile theme – Suits’ is closed to new replies.