can hero image be linked?

Support Area Forums Elite can hero image be linked?

Viewing 9 posts - 1 through 9 (of 9 total)
URL to the page in question: http://islandpoppers.com
  • Author
    Posts
  • #28790
    Avatar photoR. whitehouse
    Participant

    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!

    #28822
    Bill Robbins
    Moderator

    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

    #28985
    Avatar photoR. whitehouse
    Participant

    That sounds perfect. So then the entire hero image would be able to link. Thank you so so much!

    #28993
    Bill Robbins
    Moderator

    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.

    1. Go to your theme options page and choose the Advanced tab.
    2. 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;
      	}
      
      }
      
    3. Update your settings.

    Have a great day,
    Bill

    #29033
    Avatar photoR. whitehouse
    Participant

    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!

    #29036
    Avatar photoR. whitehouse
    Participant
    This reply has been marked as private.
    #29041
    Bill Robbins
    Moderator

    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

    #29046
    Avatar photoR. whitehouse
    Participant

    you are a genius! thank you thank you thank you!!!

    #29049
    Bill Robbins
    Moderator

    Anytime

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘can hero image be linked?’ is closed to new replies.