Need help? Check out our Support site, then


CSS to get rid of header on homepage?

  1. I am using the Dyad 2 theme but did not want the giant image on the homepage that is used as the "featured image" or "header" for this template... so I did some playing around with the CSS and was able to basically put the page contents over the top of the banner (I don't know how and I couldn't do it again if you asked me to).

    So, it is as though the header is not even there. I gave myself a pat on the back and went about my business--then I check the site on my cell phone. It looks horrible, there are massive blank spots and the massive header image shows anyway -- so, I am wondering if anyone out there would be willing to provide whatever CSS I may be able to plug in to simply remove the header image completely from the homepage?

    It may not be as easy as that, but right now I have a bunch of custom CSS in there which only accomplishes half of my objective. I'd like to get rid of all of that unnecessary code and do this properly.

    Alternatively, is there a way to simply redirect mobile users to the main Blog page instead?

    Thank you very much for taking the time to read this and for any advice you may be able to offer.

    Temp PW to view the site in progress is "fyisci"

    The blog I need help with is fyisociety.com.

  2. So you probably shouldn't post passwords here.

    I took a quick look at what you did and yes it is messed up on mobile.

    Can you put it back to how it was? Then I can look at the code and maybe give the proper css to remove the Feature image you are talking about.

  3. Thanks dt,
    I have removed the code and it now looks (more or less) the way it did.

    Matt

  4. Oh, and as for the PW - I will change it once we are finished here! Not a PW I use anywhere else and it only allows one to view the page, so we should be good!

    :)

  5. I looked at the Dyad 2 theme really fast.

    This code removes the feature image at the top

    .featured-content {
        display: none;
    }

    This moves the posts down so the menu isn't over them
    `main#primary {
    margin-top: 90px;
    }`

    You'll probably need to adjust the media queries a bit to tighten it up on different devices. When it gets to mobile you'll want it set to

    margin-top: 0px;

    That should point you in the right direction.

  6. dtlevin,
    I definitely appreciate that, and sure enough it got rid of the header on the homepage. Unfortunately, it also gets rid of the "featured" slider on the blog page!

    This theme would literally be perfect if they just had the option to put the "featured" slider on a page other than the same page that all recent posts post on.

    I really, really appreciate you looking into this for me, though!

  7. Oh sorry I misunderstood what you meant.

    try

    .home .featured-content {
        display: none;
    }

    that should remove it only on the home page

  8. I wish! Looks like that removes the featured slider from the blog page as well. It's a stubborn thing.

  9. Oh, no.. wait a minute. It isn't actually removing it from the Blog page, the margin-top tag is just pulling the recent posts up on the page, covering the featured slider. I'd imagine I can adjust the margin on that page, though.

    But.. for whatever reason, it still shows the large image on mobile!

  10. Scratch that, it shows without it on mobile now as well!

    THANK YOU SO MUCH!!

  11. strange it worked when I tried it.

    You didn't leave the original one there as well?

    Did you empty your page cache?

    I'm not sure what plan you have but you might want to use a premium theme. Some of them allow for this type of functionality and you wouldn't have to worry about messing it up on mobile etc. Also if WordPress.com allows for page builders that would also solve your issue easier than having to mess with the code.

    Just to make sure this is the blog page you want the header with Al Franken to appear on right?
    https://fyisociety.com/blog/

    And no slider/header on the home page?

  12. ok sounds good. Let me if you have any other issues, I'll try to help.

    Here is a good reference on css
    https://www.w3schools.com/css/default.asp

    This site also has a lot of good info and advice
    https://css-tricks.com/

  13. dtlevin,
    My preference would be to have the slider on the homepage and the latest blog posts automatically posted to the blog page. This theme forces both the slider and the latest posts to be on the same page.--and that page cannot have any other content.

    That's how I got myself into this trouble, I was trying to figure out a way to get the slider onto the homepage by itself with content below it.

    Anyway, thank you very much. You saved me from pulling my hair out.

You must log in to post.

About this Topic