Header for blog

BB Theme
1

Hey there! I am trying to change the header, or add a picture like the rest of my pages, behind the menu just on my single blog post pages. How can I accomplish this?

right now I’m using Supermenu plugin and my header is transparent.Here’s a post where I need this: http://oursummit.cc/quit-living-in-someone-elses-highlight-reel/

2

Hi Andrew,

I have never used the SuperMenu plugin so I am not entirely sure how you have added it your the rest of your site.

However, if you have added via a shortcode using the Builder and wish to include the same menu on your single post pages. You’re going to need to use a child theme and edit the single.php file and add the code needed to implement the SuperMenu plugin.
Thanks,
Danny

3

I did not add it via shortcode. It takes the place of the regular menu.

4

Hi Andrew,

I have taken a closer look at your single post page and something rather odd is happening. The SuperMenu is there, but it is hidden behind your page content.

I think the issue here is that somehow on you single post page you have your scripts and stylesheets loading after the body tag. Which is causing the issue. However, I am not sure how this is happening, as this isn’t happening on any of other pages.

Have you done anything specific on your single post pages?
Can you disable all active plugins and except for SuperMenu and Beaver Builder and see if the issue persists.

Thanks,
Danny

5

I’ve added the transparent header CSS snippet. How have other people that have added that piece of CSS fixed the header on the blogs to still show? Like how can I add a cover photo?

6

Hey Andrew,

You can do the same thing with your Pages on our Posts, i.e., use BB to add a background image to the row and it will serve as the image behind your menu. You can copy the page.php file to your child theme, and rename it to single.php. This will make all Posts behave like a Page - default template. Give it a shot and let us know how it goes! :slight_smile:

Ben

7

Ya, but I don’t need the page builder on every blog post. I just need to put to add a background image or color to the header aerator post page that is the same across the board.

8

Hi Andrew,

If you want to add a custom background image or color to the top of all your posts, you’re going to want to do as Ben suggested and use a child theme.

Then copy the page.php file, rename it single.php and add your custom header background color/image code there. This will then appear on all single post pages.

You’re also going to need to try and find out what is causing your scripts and stylesheets to load after the body tag, as this shouldn’t be happening. They should be appearing before the body tag.

Thanks,
Danny

9

So for every blog someone writes they are going to have to go to the page builder and add a cover photo? That’s what I’m getting at. There’s no way I can just add CSS for a certain image to load by default like a cover photo?

Also Danny, I’ve migrated the site and am using Hero Menu on theSummit.cc. Maybe the tags are different there?

10

Hey Andrew,

I was under the impression you wanted to place a different background image for each single post hence my suggestion. If you only want to place the same background image on all single posts, it can certainly be done with CSS. Try the snippet below and check if it’s what you’re looking for.

.single .fl-page-content {
  background: url(www.domain.com/bg.jpg);
}

Ben

11

Hey Ben.

I added

/* Posts Page Cover */
.single .fl-page-content {
  background: url(http://www.thesummit.cc/wp-content/uploads/2015/09/city-backdrop-orange-1.jpg);
}

Still doesn’t seem to want to work?

12

Hi Andrew,

I have just this moment added Ben’s CSS to your site via Chrome’s dev tools and the code is working.

Cloudup

Where did you add the CSS?

Also, I am not able to see a similar issue on the other site you linked. However, I recommend you disable all active plugins and enable them one by one. Then see if the stylesheets and scripts being added in your body tag returns. As this is something you’re going to want to address.

Thanks,
Danny

13

[Content Hidden]

14

Hey Andrew,

Sorry, the code I added above was tested for the oursummit site, which you posted on your first post. Can you verify which site we are working on so we can check the code there? We can also just add a top margin to move your blog down to make space for the hero image. :slight_smile:

Ben

15

  1. The correct site is theSummit.cc

  2. I don’t want a background for the whole page. What I’m looking for is like a default header image for each post. Ideally the header image would be the featured image (but it can just be a default image if that’s too much) of the post overlayed with the Post Title/author/date.

16

Hi Andrew,

Can you try the following CSS, please:

.single .fl-page-content {
    background-image: url(http://www.thesummit.cc/wp-content/uploads/2015/09/city-backdrop-orange-1.jpg);
    background-repeat: no-repeat;
    background-size: 100% 600px;
}
.single .fl-post {
    margin-top: 600px;
}

Thanks,
Danny