Need to remove header bar in blog posts

Support
#1

Hello

There is a beige header bar that appears in my blog posts. It repeats the heading that is shown underneath. I would like to remove the beige header bar. If this is not possible, the. I would like to minimise it, make it white and remove the text (I.e. So that people can’t see the header bar, even if it is ‘there’).

Kirsty

#2

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.single-post .x-header-landmark {
    display: none;
}
#3

Thanks, that worked perfectly! Would you be able to help with another question please:

  • When viewed on a mobile device, the menu (3 lines / burger) appears below the logo. Is there any way to make it appear next to the logo, to save space?
#4

Hey,

If you apply this customization, the logo will be decreased like here: http://prntscr.com/gq7e2s - to do it adding following CSS under the code below to X > Launch > Options > CSS

   display: inline-block;
     bottom: 22px;
    position: relative;
}
.x-logobar {
   display: inline-block;
}```
#5

I waited to apply this code as I changed my logo to an image. I’ve now tried the code but it doesn’t do anything. Could you take a look and provide updated code please?

#6

Hi,

You can try this code instead.

@media (max-width:979px) {
.x-logobar {
    display: inline-block;
    vertical-align: middle;
    max-width: 90%;
}

.x-navbar-wrap {
    display: inline-block;
    vertical-align: middle;
}
}

Hope that helps.

#7

Unfortunately, that didn’t help either. Now the ‘burger menu’ has moved to the left (which is fine) but it still below the graphic logo. I would like it parallel to the graphic logo and to the left.

Also, and I don’t understand why this has happened… I’ve deleted the code that you provided but the burger menu has stayed where it is.

Could you suggest alternative code to align the burger menu with the graphic logo for mobile devices please?

#8

Hi There,

This is how your header looks on mobile.

screenshot

You need to understand that you set your Logo and Navigation layout as Stacked (logo above navigation).

Even if you set the Logo and Navigation layout as Inline, the menu will still be below the logo because the logo is taking all its entire container space, there is no space for the menu to be on either side of the logo.

We can position the mobile menu layer above the logo though, but Im not going to advice that since that requires a complex CSS and it will just end up the mobile menu covering your logo.

I think with that type of logo, it is only fitting that you setup the Logo and Navigation as Stacked and not to force it to be Inline.

Thank you for understanding,
Cheers!

#9

I have tried the one above and the one below. Any other suggestions for Pro and removing Headers?
}.single-post .entry-header {
display: none;
}

#10

Hey Jason,

You don’t need custom CSS. Just create an empty header and assign it to All Posts.

It’s better than hiding the x-masthead using custom CSS because the masthead is empty in the front-end.

Hope that helps.