Jump to content


Photo
- - - - -

Social Media Icons don't work outside of the Header


  • Please log in to reply
9 replies to this topic

#1 jbekefy

jbekefy

    Advanced Member

  • Members
  • 33 posts
  • LocationOakland
  • Framework Version:2.2.5

Posted 06 April 2012 - 11:18 PM

Hi, I have moved my social media icons from the header banner to the space below, more inline with my top nav menu items. Once I do this, the buttons no longer function as they did when they were on top of the header.

Please Login or Register to see this Hidden Content

Help.

#2 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 07 April 2012 - 12:06 AM

I believe this is happening because they are now in the Navigation Row so their functions (clicking, hovering, etc) are hidden by the Nav Row. I can confirm this in FireFox using FireBug and adjusting this code (I adjusted the Bottom # so it was higher in the screen and the "hover" function started to work):

Please Login or Register to see this Hidden Content



#3 jbekefy

jbekefy

    Advanced Member

  • Members
  • 33 posts
  • LocationOakland
  • Framework Version:2.2.5

Posted 07 April 2012 - 12:08 AM

So is there anyway with CSS to enable the hover/link while they remain in the nav row?

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 07 April 2012 - 03:35 PM

When I reduce the width of the navigation in Firebug, the social buttons are clickable again, so it's definitely an issue with the navigation "overlapping" the buttons. You can use the z-index CSS property to bring the social buttons to the top, as described here:

Please Login or Register to see this Hidden Content



#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 08 April 2012 - 08:38 PM

Catrina's correct. It's the menu preventing you from being able to click it. The link she provided will give you examples of how to apply z-index to bring the social media icons forward. Essentially, it helps you select the layer that's clickable.

#6 jbekefy

jbekefy

    Advanced Member

  • Members
  • 33 posts
  • LocationOakland
  • Framework Version:2.2.5

Posted 10 April 2012 - 01:19 AM

Great, thank you I totally understand this in theory. How do I determine the z-index of each of those social media icons?

#7 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 10 April 2012 - 03:06 AM

The social media icons are grouped together in the same DIV layer, so you don't need to apply the z-index to the icons individually. To determine which DIV layer to apply the z-index to, use Firebug (

Please Login or Register to see this Hidden Content

) as explained here:

Please Login or Register to see this Hidden Content



#8 jbekefy

jbekefy

    Advanced Member

  • Members
  • 33 posts
  • LocationOakland
  • Framework Version:2.2.5

Posted 13 April 2012 - 04:52 PM

I've been trying a few different approaches, and I could never seem to use firebug to isolate the exact html or css on the icons. AndI have used firebug successfully in the past. So I went back through the forum and found a suggestion to use the following code. #primary-nav{position:relative;z-index:1 !important;} .icons{z-index:0 !important;} I tried it and it was a partial fix. You can click on the edge of the icons but the middle of the icons do not function, as if they are still masked somehow. Ideas?

#9 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 April 2012 - 06:58 PM

This worked for me:

Please Login or Register to see this Hidden Content



#10 jbekefy

jbekefy

    Advanced Member

  • Members
  • 33 posts
  • LocationOakland
  • Framework Version:2.2.5

Posted 20 April 2012 - 12:54 AM

Fantastic, thank you rangelone.