Floating an href over part of a background image… from outside the div?

  • Hi all, first post here! I am creating a WordPress template for my company, and running into somewhat of a game-ender here. I will try to make this as clear as possible, but please ask if something isn’t clear.

    If you go to https://www.turbosocialmedia.com/dev-environment/ you will see a red “FREE VIDEOS” button at the right side of the navigation menu at the top. This is actually just part of the background image, and currently not clickable. I want to put a clickable area over it to give the impression of a clickable button.

    Because the navigation bar is controlled within a core file of WordPress, I am not able to directly edit the html of the nav bar, (otherwise this issue would be easily-solved) and if I were to do so, a WordPress upgrade would overwrite my changes (since it’s a core WP file, not a theme file that controls the nav).

    Within the header template file, all I can see regarding the menu is the following call: <?phpwp_page_menu(); ?>

    So, my question is, can I float an href over that area from OUTSIDE of the menu html? My header file essentially ends at the bottom of my header image, and then the menu is simply called by the line above, so if I put something between the menu call and the header div, is it possible to manipulate it to cover the red button within the menu?

    I will attach both the header php file and some visual aids for reference. I apologize if this request is unclear; I’m having trouble wording it properly. Any help is greatly appreciated!

    Benjamin

    Header file: https://php.pastebin.com/m449ba191
    Site homepage: https://img11.imageshack.us/img11/3136/originalku.jpg
    Site homepage with section and notes overlay: https://img238.imageshack.us/img238/1056/overlayo.jpg

Viewing 4 replies - 1 through 4 (of 4 total)

  • can I float an href over that area from OUTSIDE of the menu html?

    It should be possible. Since you’re using a fixed width menu that follows a header whose height is known, you can add your video link as a div in the footer and then use absolute positioning to move that div into position over the end of the menu bar.

    You’ll need to define the width & height of the div to match the image and place the link plain text inside span tags. You can then use the span to move the link text off the page using something like:

    #video a span {
display:block;
position:absolute;
top:-6000px;
left:-6000px;
}

    The end result should be a clickable box over your video graphic.

    Thread Starter tovlakas

    (@tovlakas)

    esmi, thank you so much for your help. Just so I make sure I understand correctly:

    1. add a div to the footer, containing <a href="#"><span>test here</span></a>.
    2. in the stylesheet, define width/height of this div to match red “button”
    3. in the stylesheet, define positioning of the div’s <a> class to be positioned over the button.
    4. in the stylesheet, define positioning of span class for text to be way off the page as you’ve shown.

    Is this correct or am I missing something?

    Thanks!!!

    That sounds like you’ve got it covered. ??

    Thread Starter tovlakas

    (@tovlakas)

    esmi, you are awesome, that totally worked. Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Floating an href over part of a background image… from outside the div?’ is closed to new replies.

Tags