Navigation Styles

I'm working on a project for a client and they would like the header image to "bleed" under the navigation bar (see screenshot).

They don't want this to look this way on the homepage. (see screenshot) Is it possible to do both of these things? and if so, however would I go about doing them?

Hi Deborah,

Both screenshots are the same so I am not sure what they don't want 🙂

When you upload an image via dashboard->appearance->header, this image will standard appear under the navigation bar.

Thanks for the reply Bas.

I'm taking your reply as no, they cannot have the navigation bar slightly transparent so that the header image appears underneath it as shown in the screenshot ?

Sorry Bas, there was an issue with the links. I just updated the second link.

Deborah, do you basically not want the bar transparent on the home page?

Hey Thierry, Yes, the bar needs to be transparent and the header image to sit underneath it so it shows throw the bar

I put together a the snippet below which you can paste in your child theme functions.php.

add_action( 'wp', 'beans_child_setup_document' );

function beans_child_setup_document() {

  // Modify image on home page, else remove the image.
  if ( is_home() ) {

    // Add class for image.
   beans_add_attribute( 'beans_body', 'class', 'tm-header-image' );

    // Remove uk-block which is added in the inner wrapper.
   beans_remove_attribute( 'beans_header', 'class', 'uk-block' );

    // Remove add header inner wrapper for styling.
   beans_wrap_inner_markup( 'beans_header', 'beans_child_header_inner', 'div', array( 'class' => 'uk-block' ) );

 } else {

    // Remove the header image of not home.
   beans_remove_action( 'beans_header_image' );

  }

}

Then in your CSS or LESS which ever you chose to use, paste the snippet below.

.tm-header-image .tm-header {
 height: 500px;
}

.tm-header-image .tm-header > div {
  background-color: rgba(255,255,255,.6);
}

If your Settings->Reading->Front page is set to use a page, then you would replace is_home() with is_front_page().

So this basically set the header image only for the home page, set a height of 500px (you may change it in the CSS snippet), wraps the header content and adds the transparency styling to it. I have added comments which should be self-explanatory.

Hope that helps 🙂

Hi Thierry,

I'm afraid that didn't work. There was no navigation panel opacity on any of the pages, and it added a grey block to the bottom of the navigation panel of the home page.

Hey Deborah,

• Do you have development mode enable in Appearance->Settings?
• Do you have a page set in your Settings->Reading->Front page?
• Do you perhaps have link to your website or is it a local install?

This is what you should see with the code snippets I provived.

Thanks,

Hi Deborah, this is just a quick follow up to check if you managed to get the your header working?