Archived topic
Banner in the grey area
5 replies · Started by Luke on May 8, 2020
Would it be possible to place a banner in the grey area either on the right or on the left or on both sides of the page? That would have to be a banner that would be visible all the time as you scroll down the page just like the Brain Evolution System banner in the right widget. Is it easy to do it? If it was possible to attach a screenshot to this message I would do it.
And if banner is not possible then maybe it would be possible to just write something that would be clickable and put it either on the right or on the left?
Hi there,
you could do something like this:
1. Create a new Hook Element:
https://docs.generatepress.com/article/hooks-element-overview/
1.1 Add this to the hook content:
<div class="banner-surround">
<div class="banner left">
<!-- Add your left banner content here -->
</div>
<span class="banner-spacer"><!--spacer--></span>
<div class="banner right">
<!-- Add your right banner content here -->
</div>
</div>1.2 Select the after_header hook.
1.3 Set your Display Rules
2. Add this CSS:
/* Hide Banner on small devices */
.banner-surround {
display: none;
}
/* Adjust @media for when banner should display */
@media (min-width: 1200px) {
.banner-surround {
display: flex;
position: sticky;
position: -webkit-sticky;
top: 60px; /* Set position from top */
}
.banner-surround .banner-spacer {
flex: 0 0 1000px; /* 1000px = width of container */
}
.banner-surround .banner {
flex: 1 1 auto;
}
}First I'd like to ask about the hook content code. Where it says "Add your left banner content here", I should replace this line with a banner URL, right?
And the CSS code is to make the banner sticky?
You would need to replace <!-- Add your left banner content here --> with the content of your banner.
If you want to insert a link then you need to use the <a> tag:
https://www.w3schools.com/tags/tag_a.asp
The CSS is to split the area in half and make it sticky.
Replace "Add your left banner content here" with the content of my banner?
Something like this:
<a href="https://mywebsite.com/"><img src="https://mywebsite.com/wp-content/uploads/2020/05/Best-Music.png" border="0" /></a>
I don't know if this is the right code. I think I omitted something?
That HTML looks correct - if you want to add it to your hook and set the Display Rules on a test page i can take look.
