can hero image be linked?
URL to the page in question:
http://islandpoppers.com
-
Hi Bill, I hope all is well. This site is currently under construction but I am working to try to link the homepage hero sliders to pages. I have tried to move the position of the hero button with no success so I was wondering if the home hero images can be linked. If so, do you have any direction as to how that can be done? I searched the forum and support and can not find anything. Thanks so much for your help!
Good Morning,
It might be possible to do that if you don’t mind the button disappearing. What that would entail is changing the text and background of the button so that they are transparent and then absolutely positioning it so that it fills the hero section.
But you would lose the button as a button in the process. If you want to go that route, let me know.
Have a great week,
Bill
That sounds perfect. So then the entire hero image would be able to link. Thank you so so much!
Let’s give this a try and see if it works. It replaces the button on devices larger than a phone. My past experience with full screen buttons on a phone is they can be very frustrating since users essentially can’t scroll. I would stick with a traditional button there.
- Go to your theme options page and choose the Advanced tab.
- Scroll down to the Custom CSS box and add this:
@media only screen and (min-width: 768px) {
.hero-copy {
position: static;
padding-top: 20%;
width: 100%;
padding-left: 10%;
padding-right: 10%;
}
#hero-section .button {
position: absolute;
color: rgba(255, 255, 255, 0);
background-color: rgba(255, 255, 255, 0);
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
}
- Update your settings.
Have a great day,
Bill
Hello Bill,
I added this code but it does not link. I do not know if I am missing something but I need the hero images to link. All homepage slide images will actually link to the same url. Any ideas? Thanks so much for your help!
This reply has been marked as private.
I spotted a few things. The trigger for the hero button to be generated on a page is actually the text for the button. It appeared to be missing from the slides so since no button was generated on the front end, we couldn’t swap it be full screen.
Also in the Custom CSS, this media query was missing its closing bracket:
@media only screen and (min-width: 768px) and (max-width: 1200px) {
#primary-menu {
display: none;
}
.slicknav_menu {
display: block;
right: 0;
top: 10px;
}
It would need to be like this:
@media only screen and (min-width: 768px) and (max-width: 1200px) {
#primary-menu {
display: none;
}
.slicknav_menu {
display: block;
right: 0;
top: 10px;
}
}
Take care,
Bill
you are a genius! thank you thank you thank you!!!
- The topic ‘can hero image be linked?’ is closed to new replies.