Home Forums Glissando Different logo on home page than others?

This topic contains 2 replies, has 2 voices, and was last updated by  Samantha 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #46503

    Samantha
    Participant

    Joshua,

    I hope you’re well!

    Quick question about the logo. I’m building a site that will have a home page with lots of white space, but subpages will have title headers.

    On the home page, I’d like to have the logo/navigation dark so that it will be visible, but on subpages I would like to have the logo/navigation white so that they appear on dark header images. When I scroll there will be a 60px sticky header that has white background with the dark denoted scrolled logo and dark navigation text.

    Any thoughts on how to make the homepage only have a different navigation than the rest of the site as far as logo image and navigation colors?

    Your help is much appreciated!

    Samantha

    #46505

    Joshua
    Keymaster

    Sure. You could add this to your Custom CSS. I wasn’t sure if your home page header was supposed to be dark in background or in font color, so just make sure to replace the hex colors with those you’d like to use for the homepage. The logo is a bit trickier, you’ll have to set the height and width for it to show properly with this fix and also replace the image URL with that of your logo’s.

    @media only screen and (min-width: 769px) {
    .home header[role='banner'] {
        background: #000000;
    }
    .home header[role="banner"] .nav li a {
        color: #ffffff;
    }
    .home #logo img {
        display: none;
    }
    .home #logo a {
        width: 200px;
        height: 90px;
        display: block;
        background-image: url('http://yourdomain.com/your-logo.png');
    }
    }
    #46528

    Samantha
    Participant

    Perfect! Thank you so much!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.