- This topic has 5 replies, 3 voices, and was last updated 3 years, 11 months ago by David.
-
AuthorPosts
-
May 8, 2020 at 5:25 am #1275171Luke
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?May 8, 2020 at 8:00 am #1275489DavidStaffCustomer SupportHi 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 Rules2. 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; } }
May 8, 2020 at 8:17 am #1275506LukeFirst 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?
May 8, 2020 at 9:28 am #1275612LeoStaffCustomer SupportYou 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.aspThe CSS is to split the area in half and make it sticky.
May 9, 2020 at 1:04 am #1276331LukeReplace “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?
May 9, 2020 at 6:04 am #1276591DavidStaffCustomer SupportThat 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.
-
AuthorPosts
- You must be logged in to reply to this topic.