Different Header Settings by Page

rmendis · June 2016

Hi Muffin Group,

How do you set up the header such that it is transparent on the home page, but has a header background on blog and other pages?

For example, the Be Journey sample has a transparent header on the home page: http://themes.muffingroup.com/be/journey/

and a background header on the blog pages: http://themes.muffingroup.com/be/journey/blog/

I am only able to set the header globally across all pages, and cannot find how to set it for individual pages.

Thanks!

Albert · June 2016

Hi,

for this demo, we used Transparent header type but on the inner pages, we set header background with Featured Image option which is on the right hand side when you create/edit page.

rmendis · June 2016

I am using the Parallax demo, and I have a transparent header that you can see on the home page:

www.uisherpa.com

However, on the inner pages, including blog/portfolio pages, it still has the transparent header which overlaps the section even when there is a featured image selected :

http://uisherpa.com/?portfolio=aliquam-eratac

How do you change this so that the header on the inner pages has a background, like this one:

http://themes.muffingroup.com/be/journey/vivamus-non-augue-mauris-amet/

Thanks

Albert · June 2016

To set header background on inner pages, you need to use Header Image or Featured Image options (depends on what kind of page it is). Header Image works for posts and portfolio pages but Featured Image for regular pages.

rmendis · June 2016

Under Appearance > Be Theme Options > Header, I have set a Background image.

Under Portfolio > "Portfolio Item" page, I have set a Featured Image, Default template, no slider, and also set another header image.

I still do not see any header at the top. See page here:

http://uisherpa.com/?portfolio=aliquam-eratac&preview=true

There must be some setting I am missing?

rmendis · June 2016

After doing some more research and looking at the source code, I believe this is due to a missing item in the "Parallax" demo, which is not displaying the header image correctly.

Note that in your own hosted Parallax demo, there is no header image displayed in the portfolio pages: http://themes.muffingroup.com/be/parallax/?portfolio=aliquam-eratac

If this is true, would it be possible for you to update the Parallax demo to use the header image, or provide us with the code to fix this issue?

Many thanks

Albert · June 2016

We are sorry but there is nothing to be fixed as it's not a bug. It's just how Transparent header looks like. The whole sense of being transparent is that whatever you have below, it goes behind the section which is transparent. Anyway, if you want to set height for transparent header on inner pages, you need to use an extra css:

body:not(.template-slider) #Header_wrapper { min-height: 200px !important; }

rmendis · June 2016

Thanks for the code on how to increase the header height. I put the code in Theme Options > Custom CSS, but it also applies it to the home page. Is there a way to only increase the height for transparent header on the inner pages?

Albert · June 2016

We are not sure because we didn't saw your settings but it might do not appear if you set Minimalist option under Header section.

rmendis · June 2016

That must be it. Thank you.

Albert · June 2016

You are welcome

Different Header Settings by Page

Comments