- This topic has 5 replies, 3 voices, and was last updated 4 years, 2 months ago by
.
-
Posts
-
Hey there. I’m playing around with hooks and elements to create a landing page. One of the things I want to do is a to make a top bar with invitation to join my mailing list, similar to this page: https://libbykirschbooks.com/
Trying it out here: https://www.ajnorfield.com/home/ but as you can see there’s a black bar between the hook and the navigation. I can’t figure out how to get rid of that hook…
Customer Support
Hi there,
The H6 element has 20px bottom margin attached to it.
If you want HTML then i suggest you add a container with some classes for styling eg.
then you can add some CSS eg.
.custom-top-bar { background-color:#3b6884; } .custom-top-bar h6 { margin-bottom: 0; }Alternatively use a Block Element with the GenerateBlocks plugin – you can build and style directly in the editor then 🙂
I tried this but it does not seem to stick/do anything. is custom-top-bar the correct call for it when I use the hook functionality? Should I use a different text version instead of H6? OR approach this entirely different?
I’ve not managed to make it work with block element either.
Customer Support
Hi Alexander,
What David meant was to add something like a
<div>to wrap the<h6>.So the content you add to the hook would be:
<div class="custom-top-bar"><h6>Get a Free Ebook</h6></div>Then the CSS David provided should work:
.custom-top-bar { background-color:#3b6884; text-align: center; } .custom-top-bar h6 { margin-bottom: 0; }Let me know if this helps 🙂
That worked, thank you very much! Still learning a lot about these class tags and how they respond to different things like calling up a pop-up or custom CSS like this.
Issue marked as resolved. 🙂
You are welcome 🙂
- You must be logged in to reply to this topic.
