Dear,
I want to add breadcrums for specific pages (shop, posts, product category, etc.) so I added another bar to my custom header.
I put this bar as absolute, but how do I ensure there is enough padding in the page without having to modify all these specific pages. Without padding the content (e.g. product filters) are too close to the breadcrums.
It looks fine on pages with hero images but the product pages etc need this offset
KR!
Yves
Hello There,
Thanks for writing in!
When you select the bar as absolute, just make sure that you have also inserted the correct height of your bar so that the theme will adjust enough space between the bar and your page contents.
Hope this helps.
Hi, thanks for the reply. My bad, I meant “Relative”, not absolute
Changing the height doesn’t have an effect.
The image I included the spacing is fine cause it’s a hero image but on the other pages the text is too close, I need to make this height take effect. Also the breadcrum bar shouldn’t be sticky
Hi there,
If your bar is set to relative then then content below it should automatically display right below the end of the bar unlike when you set the bar as absolute.
But if you want to add a bottom padding to the bar, click on the customize setting of the bar and add this to the Element CSS:
$el {
padding-bottom: 20px;
}
You can read more about the Element CSS here:
Hope this helps.
Hi thanks for the reply, I’ve tried it but the padding nor margin have effect on the actual page, because the “relative” bar isn’t taken into account for the header height.
Please check the images attached for clarification
Hi @yvescleeren
Please share your website URL showing this issue so we can investigate it further.
Thanks.
Ok, I will include the link in a secure note
Hi There,
Thank you for the credentials, you said the bar was set to “Relative”, but when I check its set to “Absolute”
Please set it to “Relative” and then the element CSS below should give enough space between breadcrumbs and content, adjust it where you see it fits
$el {margin-bottom: 20px;}
Cheers!
I perhaps failed to explain the issue properly. The issue is that if I put it to “Relative”, the bar is not transparent and doesn’t show the content behind the header.
I’m trying to solve it with Absolute, but in that case I have that padding issue.
I have included another screenshot
Hi There,
Thank you for the clarification, that means we need to set the breadcrumbs bar to absolute when it’s viewing a standard page, and relative when it’s not.
To do that, please keep your bar as absolute and add this to your breadcrumbs bar’s Element CSS area.
body:not(.page) $el.x-bar-absolute {
position: relative;
}
Hope it helps,
Cheers!
And this is why X theme rocks: you guys have the best support.
Thanks!
Hi again,
Thank you for your kind words. If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.
I recommend you to watch following video that will help you to get started with CSS.
Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.