Docs

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi again,

You have helped me to create a transparent header which is great but my case study and blog item pages required fixed banners so the menu is visible.

I inserted this code for blog items:

.single-post .x-navbar-wrap {
background-position: top center;
background-size: cover;
background-image: url(http://withus.lmdev.co.uk/wp-content/uploads/2016/07/slim_banner.jpg);
min-height: 400px;
background-repeat: no-repeat;
}

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Thai]

Hi There,

Please find this CSS under Customizer > Custom > Global CSS:

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

And replace with this:

.single-post .masthead {
    background-position: top center;
    background-size: cover;
    background-image: url(http://withus.lmdev.co.uk/wp-content/uploads/2016/07/slim_banner.jpg);
    min-height: 400px;
    background-repeat: no-repeat;
}

Also remove this CSS:

.single-post .x-navbar-wrap {
    background-position: top center;
    background-size: cover;
    background-image: url(http://withus.lmdev.co.uk/wp-content/uploads/2016/07/slim_banner.jpg);
    min-height: 400px;
    background-repeat: no-repeat;
}

Hope it helps 🙂

[3b1a2f46-a516-40cf-beba-b611930e4819]

Sorry that seems to have broken the whole site appearance (see attached)

thanks

[Lely]

Hi There,

See attached screenshot. Is that what you want to achieve? If yes, please update this custom CSS:

.single-post .x-navbar-wrap {
    background-position: top center;
    background-size: cover;
    background-image: url(http://withus.lmdev.co.uk/wp-content/uploads/2016/07/slim_banner.jpg);
    min-height: 400px;
    background-repeat: no-repeat;
}

To this:

.single-post .masthead {
    background-position: top center;
    background-size: cover;
    background-image: url(http://withus.lmdev.co.uk/wp-content/uploads/2016/07/slim_banner.jpg);
    min-height: 400px;
    background-repeat: no-repeat;
}

Then also remove this part:

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

If that is not what you want to achieve, please do give us a screenshot so we can give you specific suggestion.

[3b1a2f46-a516-40cf-beba-b611930e4819]

Yes that is correct for the blog post item page – but when you delete:

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

It affects the header on the rest of the website to turn grey??

When you find a solution for this could you give me similar code to do the same to a portfolio post item page?

many thanks

[Joao]

Hi There

Please add the following code to Appereance Customizer Custom CSS

.single-post .masthead {
    position: relative;
    width: 100%; 
}
header.masthead.masthead-stacked {
  background-image: url(http://withus.lmdev.co.uk/wp-content/uploads/2016/07/slim_banner.jpg);
}
.x-navbar-wrap {
  background: transparent !important;
}

To apply the code on portfolio items you can use the same code you used but instead of .single-post you will use .single-x-portfolio

Hope that helps

Joao

[3b1a2f46-a516-40cf-beba-b611930e4819]

This works thank you – but you can see this on every page before the rev slider loads?

[Joao]

Hi There,

Try updating the code above to:

.single-post .masthead {
    position: relative;
    width: 100%; 
}
.single-post .masthead {
  background-image: url(http://withus.lmdev.co.uk/wp-content/uploads/2016/07/slim_banner.jpg);
}
.x-navbar-wrap {
  background: transparent !important;
}

Hope that helps

Joao

[3b1a2f46-a516-40cf-beba-b611930e4819]

Sorry that hasn’t worked Joao?

[Rad]

Hi there,

It will only work on single posts, your other pages that have slider has separate styling which isn’t related to the above CSS. For example,

header.masthead.masthead-stacked {
    background-image: url(http://withus.lmdev.co.uk/wp-content/uploads/2016/07/slim_banner.jpg);
}
.masthead {
    position: absolute;
    width: 100%;
}

The question will be is, how’d you like to be displayed on pages with the slider? Should it be hidden since you said: “but you can see this on every page before the rev slider loads?” If yes, you can then remove those CSS since they are only applicable for those pages.

Thanks!

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi,

Yes I definitely only want this to display on the single post pages for blog and portfolio.

Currently it displays on every page BEFORE the rev slider loads on top of it.

Could you tell me how to avoid this then please?

thanks

[Christopher]

Hi there,

Please update your code to:

.single-post header.masthead.masthead-stacked,.single-x-portfolio header.masthead.masthead-stacked {
    background-image: url(http://withus.lmdev.co.uk/wp-content/uploads/2016/07/slim_banner.jpg);
}

Hope it helps.

[Author]

Posts