Top padding issue after hiding page title area (body content hiding under nav/header area)

[seola]

I’m hiding the page title area using this code:

/* HIDE PAGE TITLE AREA */
.x-header-landmark {
    display:none;
}

it looks good for my individual blog posts, like this one here for example: https://tinyurl.com/yb8g23uy

…but on other pages, like my main blog page, it’s hiding the top of the content under the header/nav area. for example, see my main blog page: https://tinyurl.com/y9vme2z7

how can i fix this? thanks

[christian]

Hey @armintz,

The issue was not caused by that code but this.

.masthead {
    position: absolute;
    width: 100%;
}

I see you’re using it for the home page only. It is best that you add it in the Content CSS rather than Global CSS. If you wish to add it in Global CSS, please add the home class to it like this .home .masthead

Also, if you’re not using the Header Landmark or the Breadcrumbs area, it is best to disable it rather than use CSS. You can disable it in Appearance > Theme Options > Header > Breadcrumbs.

Thanks.

[seola]

.masthead {
    position: absolute;
    width: 100%;
}

this code above was here by default, I think it was part of the Expanded Demo I first installed.

I changed it to this:

.home .masthead {
    position: absolute;
    width: 100%;
}

It seems to fix the issue.

I already had Breadcrumbs disabled in theme settings but removing this code:

/* HIDE PAGE TITLE AREA - CAUSING ISSUE ON MAIN BLOG PAGE */
.x-header-landmark {
    display:none;
}

leaves a large gap in the top area, which does not look good, screenshot: https://imgur.com/a/XAN0v

so i’ve added this code back:

/* HIDE PAGE TITLE AREA - CAUSING ISSUE ON MAIN BLOG PAGE */
.x-header-landmark {
    display:none;
}

[christian]

I see. In that case, that would be the solution.

Thanks.