hi
I have created a topbar above my menu bar in Pro Header Builder. The bar is for social media icons and the background is set to transparent
yet when I preview it, the topbar is white
Any reason why it is doing this?
cheers
Hi @guybower1,
Thank you for writing in, the topbar has actually a transparent background (see the header on homepage). That white background we see on your screenshot is the body background.
If you’re expecting a color background behind that top bar, please set it on the color picker instead of setting it to transparent.
Cheers!
Hi Friech
Thanks for your reply
Actually what I was expecting was it to behave like a standard topbar should. Before I added the menu bar using the header builder, I had a navbar and topbar set using the standard settings and the topbar sat on top of the background image, not below it. So what I was expecting was the same, with the topbar actually being transparant over the background image.
Is it possible to position it that way, above the page content?
Regards
cheers
Hey @guybower1,
I see your topbar’s now transparent so I assume you already figured the correct setup out.
Cheers!
hi Christian
Thanks for your reply
No, there is no change in the posts page. You are right, on the homepage, it works fine, but if you check the page Blog Template, it is white. The same with other posts pages
Any thoughts why it works for the homepage and and other pages but not the posts?
cheers
Hi @guybower1,
It’s already transparent on blog and posts pages, it’s just that those don’t have a slider the same as the home page. Plus, the background in your blog page is set in the section, not on the header. Hence, it will appear as white since the body background color is white.
Try adding a background in Theme Options > Layout and Design and topbar is transparent.
Thanks!
hi Rad
Thanks so much for your reply
I think you may be mistaken. On all blog/posts pages, the topbar is white. On the homepage and all normal pages, it is transparent. I’d like to be able to have a consistent look.
You lost me when you said the background in the blog page is set in the section and not in the header. The example I posted is from the page Blog Template, which I am wanting to be the base template for all posts pages. The sections are all transparent, just like all the blog/posts pages currently are, so really not sure what you are referring to. This is the first visible section in the Blog Template page and sits beneath both the blog title and featured image, so it is simply not possible this is causing the white background as it has a transparent background, but is also way below where the topbar sits .
You mentioned there is not a slider the same as the homepage on the blog/posts pages, yet ALL of them have a slider.
The following code was added to my functions.php file to enable that, so I am unsure what you are referring to.
add_action( 'x_after_view_global__slider-above', 'x_print_top_slider' );
function x_print_top_slider(){
if( is_singular('post') || is_category() ){
echo do_shortcode( '[rev_slider alias="Content-Page"]' );
}
}
The topbar is set to transparent in the Ethos stack as well
I did what you indicated and added a background in Theme Options > Layout & Design and it does indeed show a transparent topbar when doing it that way, but the image takes over the entire page rather than sitting above the masthead and really looks messy. I am not wanting the same image on every page? That option is simply not tenable.
I’m really just looking to have the same appearance across the board; meaning a slider above the masthead and a transparent topbar sitting on top of the slider image with the sticky menu bar below that. Is this at all possible?
I also get this message in the Theme Options
I have the header I built in Header Builder assigned to all pages, so am wondering why am I receiving this incorrect message.
Bring on the Layout Builder to allow some freedom in blog pages. Why are posts pages treated so differently to standard pages and why so few option for styling them? It seems any time someone wants to try and style the posts pages much like a standard page, it requires some serious getting under the hood.
Thanks so much for your patience. What seems like such a simple task is turning out to be not so simple
Regards
Hey @guybower1,
What Rad was saying is the same as what Friech said. The top Pro Header bar is white BECAUSE it shows the global background color.
It’s like looking at a white wall through a transparent glass. Just making you understand here.
On your home page, you are looking at the page’s background through the transparent top Pro Header bar.
You haven’t set a background for your other pages and posts that’s why, again, you see white.
You’re also using Pro Header so the Topbar Theme Option DOES NOT apply here so you can get that out of your mind for a moment and to avoid confusion. You can also forget about the section background as that’s not part of the problem too. And, remember your Header Assignments.
Now for all your pages including the Blog page which is just a standard page, simply replicate the setup of your home page where you assigned a Background Image and a Slider Above Masthead. The slider you used for your home page is also transparent so you’re looking through it and seeing the page’s background.
------------------------------------------------------------
Now for your single posts. you will need custom CSS to apply a negative bottom margin to the slider. Please ask for assistance from a developer for this. I’ll just post a sample setup below to help you get started.
------------------------------------------------------------
About the message in the Theme Options, I’ll post this in our issue tracker so it will be queued for fixing.
------------------------------------------------------------
To your comment about the task being simple yet turned out to be hard, it’s because your setup is already complicated. This whole setup would have just taken a Pro Header with Dynamic Content. No custom coding required. This is another topic though.
Hope that helps.
hi Christian
Thanks so much for your reply
Based on your comment, where IS the default background set for other pages and posts? I only see default site background
It is still doing my head in, as I changed the entire site background to transparent, yet still see the topbar showing as white in posts pages.
Incidentally, the selector supplied with the CSS sample setup was not correct, as the slider is unaffected.
I am very keen to take you up on your final comment, “This whole setup would have just taken a Pro Header with Dynamic Content. No custom coding required. This is another topic though.”
I am happy to raise another topic for the matter, as I would much prefer to do this right and if I am making it too difficult for myself, then I’d prefer to simplify. It does seem like a pretty simple task to have a slider above the masthead on all posts pages with a transparent topbar, black menu bar, posts title below that and the featured image last of all before the content, but it has proven to be very difficult
Should I raise it in this forum under a new topic name?
Regards
Hi @guybower1,
Let’s continue on this thread since we are still dealing with the original issue. I’ll make this clear first so you understand what is the issue.
There is one main difference on your Homepage and Posts (Blog Posts) which creates what we perceive as an issue. I think this is not really complicated it’s just we perceive it in a wrong way.
Let’s take a look at your homepage first.
That image of woman selling food is a background of your entire Homepage, believe it or not, your entire Homepage is cover by that image, that includes the top bar that is why you’re seeing that image behind the top bar. There is a white background-color behind the page template’s main container that is why you’re not seeing that background-image behind your content, even the footer, see here what happens if we remove the background-color on your footer (I won’t go on details on this for now since this is not part of the issue).
Now let’s take a look on the Posts page
See that vegetable background-image? That is set on your Slider Slide, that’s the main difference. On your Posts page, the background-image (vegetables) is Isolated on the Slider. It won’t cover the whole page, not even the top bar. Make sense?
Now to resolve this, we either push that slider below/behind the top bar (which is the CSS solution provided by Christian above).
Or we push the top bar above/in-front of the Slider. To do that, add this to the Element CSS of your top bar
.single-post $el.x-bar {
margin-top: -3em;
}
That should offset the height (3em) of your top bar and push it above your slider. The .single-post prefix there is so that CSS rule will only affect the Posts page (blog posts), and not going to affect the other pages.
Hope it helps,
Cheers!
hi Friech
Thanks so much for your reply.
Yes, I was aware how each of the images is placed. The homepage layout is directly from one of the templates at the Design Cloud area and it was interesting to see them do the image this way rather than as the background on the slider in use.
Unfortunately the code you supplied actually affects the main menu bar it seems, as the post title now disappears up behind the menu bar and the featured image almost comes up to where the post title was.
The downside is when I then removed the CSS code, it does not go back to normal, leaving the image as you see.
cheers
Hello @guybower1,
I am viewing this post:
Can you please clarify what should be the expected result or display for this page?
Thank you in advance.
Hi Ruenel
Thanks for your reply
Actually that is NOT a post page you are looking at. It is a standard webpage.
The expected result is what Friech indicated above; the topbar would move -3em up to sit over the top of the slider, as it does on the homepage. With the topbar being transparent, this would see the topbar contents sit on top of the image
I also just realised I made a mistake in where I input Friech’s code; I put it in the site CSS and not the Element CSS. That has now fixed the topbar issue, but it caused another issue when I put it in the site CSS.
Just as one example of what it did, here is a post page
http://wordpress-102462-558755.cloudwaysapps.com/food/food-heroes/itz-time-to-buffet-in-hua-hin/
Here is another
I mistakenly added the CSS code Friech supplied to add a -3em negative top margin to the topbar to the site CSS. It seemed to actually affect something else, as it causes the posts title and featured image to all move up. Below the menu bar there should be the post title, but this has now moved up 3em. The featured image now sits just below the menu bar. You can see an example of how the posts page was originally in Friech’s reply above. He posted a screenshot of both the homepage and posts page. When I realised my mistake and removed that CSS and put it in the Element CSS, it fixed the topbar, but it did not revert the post title to its original location.
So what you are seeing now is all of my posts pages have the posts title sitting in behind the black menu bar, with the featured image positioned just below that.
Christian did make a solution to counter having to use any code at all. He said, “your setup is already complicated. This whole setup would have just taken a Pro Header with Dynamic Content. No custom coding required.” I am more than happy to head that way and avoid any further confusion. If the way I have tried to do this is clumsy, I am very happy to try it another way.
Here is the aim for all posts pages:
-
All posts pages to have a background image sitting above the menu bar. Since this is not possible, I altered my functions.php file to allow a slider do the job so it sits above the masthead in all posts. This seems to work OK.
-
A transparent topbar to sit on top of that slider. The bottom line is to try and emulate the look of the homepage
-
A black menu bar below the topbar
-
The post title below the menu bar (can be done with dynamic content)
-
The featured image below the posts title (can be done with dynamic content)
-
Post content to sit below the featured image (Can also be done with dynamic content, though it is not native to X)
So I am totally open to trying it another way if it is easier and less clunky. For the moment, though, the mistake of initially putting Friech’s CSS code into the global CSS and then removing it, has left the post title sitting -3em in behind the menu bar. Why would it not revert to its original location after removing the code? I guess the solution would be a 3em bottom margin on the menu bar. I tried to do it this way in the Element CSS for that bar
.single-post $el.x-menu {
margin-bottom: 3em;
}
But the post title is still sitting behind the menu bar
So am I making sense on what the ultimate aim is? As indicated, if there is a more sound way to achieve this with minimal code, I have no issues to do it that way.
Regards
Hi @guybower1,
Removing CSS should also removes its effects including negative margin. Perhaps it’s added twice and on different location, or it’s a cache. Don’t add another CSS to negate it, please find the CSS and completely remove it.
Since it’s a topbar which is incompletely in different scope of the layout than the content, then this isn’t possible with just available options of the standard header, it would require customization which we can’t provide here in the forum. It’s where the limit is, and if they are sibling elements then it can easily be styled, but they aren’t.
And yes, Pro custom header will make it easier which already applied to your site. And with your listed points, they are doable and I think it’s better 
But I’ll add some point, 4. and 5. Make post title and featured image on the same header, but the container is in row flex layout, which makes point 6 easier, just hide the built-in featured image through CSS. That makes the content under the featured image added to the header. You may as well hide the built-in post title.
Thanks!
hi Rad
Thanks for your reply
The CSS supplied by Friech was inadvertently placed in the Global CSS instead of the Element CSS, as I indicated. It immediately adjusted everything on the page below the menu bar upwards by 3em, which is odd, as it was code supposed to affect the top margin of the topbar, so not sure how it could move the rest of the content upwards. Anyway, the bottom line is it did. I removed that CSS immediately I realised this. There is NO other CSS anywhere for this except where it should be; in the Element CSS.
As I said, when the CSS was immediately removed, the page did not revert to its previous look. There is no caching on the site as it is merely a staging server, but I cleared any browsing history anyway and restarted Chrome. The posts pages still look the same, with the post title and featured image all sitting 3em higher on the page than they should, causing the post title to be in behind the black menu bar.
cheers
That is why I tried to add some CSS to add a bottom margin to the menu bar, in the hope of pushing everything back down that same amount.
Hi @guybower1,
Let’s take a step back here as there are several different things going on. I’m looking at this page: http://wordpress-102462-558755.cloudwaysapps.com/reviews-4/
After reading through all of the above I’m assuming you want the image to show up as part of the background of the first bar in your header?
If that’s what you’re looking for, we have a feature just for that purpose. Inspect that Bar and set the position to absolute in the setup box. Absolute bars will not create their own physical space in the layout, instead they will sit on top of the rest of the content. After this change is made you’ll notice a loss of spacing since the header bars are not providing their own space. You may need to add additional spacing in the content area of the site.
hi Alexander
That page is not reflective of a posts page, which is what I am trying to do. Try this one and you will see the issue
http://wordpress-102462-558755.cloudwaysapps.com/food/why-take-a-food-tour/
Again, this should be simpler than it has become
- Slider
- topbar (sitting on top of slider)
- sticky menu bar
- post title
- featured image
Some code was supplied .single-post $el.x-bar { margin-top: -3em; } This code was meant to be input in the Element CSS but I inadvertently placed it in the Global CSS. It was meant to control the top margin of the topbar, but when I put it in Global CSS, it caused the post title and featured image to move up 3em, hiding the posts title behind the menu bar. After I removed it, they did not revert to their original positions. When the code was placed in the Element CSS, it did what was supposed to; moved the topbar up 3em so it sat on top of the slider, but the featured image and blog title still remained where they had moved to. This means the post title is actually sitting behind the black menu bar
Does that make sense?
cheers
Hey @guybower1,
It’s not the code that’s causing the issue. I know that as I took it out and still, the issue persists.
The issue you’re experiencing is because of another customization that moves the entry title above the image. The entry title of the Ethos Single Post should be located at the bottom of the image. Fixing that is outside the scope of our product support.
I’d strongly recommend that you remove all customizations and kindly wait for the Layout Builder so you can create your own single post layout without customizing the theme. You can’t replicate the page layout to the single post for now.
Right now, you’re experiencing problems due to customizations and we do not support that.
Thank you for understanding.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.