Archived topic
Heading bar above post title
7 replies · Started by Rui on September 15, 2018
Hi there!
In this Mashable post (that Tom mentioned in an old topic!):
http://mashable.com/2015/07/10/magnet-cosmic-explosion/
the H2 tag is in a very nice top bar (the name "World" above the H1 post title).
The bar is merged with the post content and has a charming arrow.
I do not know if Mashable uses GP, but I would love to implement this functionality on my site. Is there a way to do this with Elements, for example? I am trying to reproduce it, but I am not very experienced in CSS!
May I have some help of you guys?
Hi there,
you could try with a Header Element with the Width set to Contained, add your content etc and add underline to the Element Classes.
Then add this CSS:
.underline {
position: relative;
}
.underline:after {
content: "";
position: absolute;
bottom: -24px;
left: 0px;
height: 24px;
width: 100%;
z-index: 1;
background: url(https://a.amz.mshcdn.com/assets/drop-nubbin-noshadow-ed3ed96217b273f04164fa1d4046c3cdc5b23321f588a5c25e24f93f9b874b54.png) bottom left repeat-x;
visibility: visible !important;
}Note the image URL provided here is the one being used by Mashable. So you will need to replace it with your own.
Great! Thank you, David.
Should I put this CSS in additional CSS section in the Customizer?
Because I did it, but have not seen any result.
Yes, it should work from the Customiser. If you can share a link to the page then i can have a look. I tested and it worked, although that PNG is really hard to see
Sure!
Still in development (staging) but you can see at:
https://www.staging.zenite.nu/o-que-e-zenite/
I created a Header Element (set to Entire Site) and have added 'underline' to the Element Classes box.
I made a tweak to the code above should work now.
Yes! It's Ok now.
One more question: I want to make that bar a little higher (add equal spacing above and below the text). So I made this tweak to your CSS code:
.underline {
position: relative;
padding: .6%;
}It is working. But since I'm not very good in CSS, I'd like to ask if it's right to do this way! Thank you.
You can edit your Header Element and add top and bottom padding in there :)
But that CSS is ok, rarely do i use decimals for %'s but if it works then all ok
