CSS modifications only applied to homepage

  • Unknown's avatar
    hdevri · Member ·

    Hi everyone! I’m having trouble customizing my logo/title using CSS.

    I have made some modifications to align my logo to the title using CSS, but it only works in my homepage, and in the rest of the website the logo is mixed with the title.

    Can anyone help?

    Thanks!

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

  • Unknown's avatar
    otpidusprime · Member ·

    Hello @hdevri,
    It happening because you have added this custom CSS for the site-title: 

    h1 a {
    position: relative;
    top: 0;
    left: 90px;
}

    Which is fine, but it only affects the title on the home page as the home-page title HTML looks like this: 

    <h1 class="site-title">
    <a href="https://hdevri.com/" rel="home">Human Development</a></h1>

    And for the rest of the page the title HTML looks like this: 

    <p class="site-title">
    <a href="https://hdevri.com/" rel="home">Human Development</a>
</p>

    And since you are only targeting anchor tag inside h1 with your custom CSS it only works on the home page.

    So what i would suggest is target the “.site-title” class instead of the h1 tag since, site-title class is present in all the pages.

    Here’s the CSS code you will need: 

    .site-title a {
    position: absolute;
    top: 0;
    left: 90px;
}

    instead of this: 

    h1 a {
    position: relative;
    top: 0;
    left: 90px;
}

    Hope this helps :)

  • kathrynwp · Staff ·

    otpidusprime – thanks for the assist here!

    hdevri – please let us know if otpidusprime’s suggestions did the trick.

  • Unknown's avatar
    otpidusprime · Member ·

    @kathrynwp happy to contribute! 😊

  • The topic ‘CSS modifications only applied to homepage’ is closed to new replies.