Different Header Settings by Page

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!

Comments

  • 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.
  • 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 : 

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

    Thanks
  • 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.
  • 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: 

    There must be some setting I am missing?


  • 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
  • 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; }
  • edited 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?

  • 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.
  • That must be it. Thank you.

Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.