Navbar margins and color on blog entry pages

[NickMacedo]

I am using a transparent header for my website that overlays on an image background at the top of each page. However, for the individual post pages (I am using plugin The Events Calendar which tabs into the blog posts it seems) I need to ad a solid color to my navbar and also adjust the padding or pargin down some so the page content will sit lower beneath the nav bar.

Please see current state at this link
http://tkh.f81.myftpupload.com/event/base-path/

I have tried a bunch of different option but have not been able to figure out the correct css to target the headers on post entry pages.

Thanks!

[thai]

Hi There,

You should target the custom CSS to work for the home page only.

Please find this custom CSS:

.home .masthead {
    height: 0px;
}

.home .x-navbar {
    background-color: rgba(255,255,255,0.0) !important;
    border: 0;
}

And change to this:

.home .masthead {
    height: 0px;
}

.home .x-navbar {
    background-color: rgba(255,255,255,0.0) !important;
    border: 0;
}

Hope it helps

[NickMacedo]

The CSS you provides is the same in both boxes… However, that won’t work because I don’t want to target the home page only. I want the custom heading work I have done on every page EXCEPT the blog post entry pages. How do I target only the entry pages?

Thanks!

[paul.r]

Hi Nick,

To achieve that please replace this code

.masthead {
    height: 0px;
}

.x-navbar {
    background-color: rgba(255, 255, 255, 0.0) !important;
    border: 0;
}

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

with this.

body:not(.single-tribe_events) .x-navbar {
    background-color: rgba(255, 255, 255, 0.0) !important;
    border: 0;
}

body:not(.single-tribe_events) .masthead {
    position: absolute;
    width: 100%;
}

Hope that helps