• 0
Sign in to follow this  
Followers 0

Social Media Icons don't work outside of the Header

Question

Posted · Report post

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. http://ec2-184-169-134-244.us-west-1.compute.amazonaws.com/ Help.

Share this post


Link to post
Share on other sites

9 answers to this question

  • 0

Posted · Report post

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): [code]element.style { bottom: -22px; right: 1px; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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: http://www.w3schools.com/cssref/pr_pos_z-index.asp

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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 (http://getfirebug.com) as explained here: http://www.pagelines.com/wiki/Custom_CSS#How_to_use_CSS_Inspection_Tools

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

This worked for me: [code].main_nav_container.nosearch, .nosearch .main_nav { margin-right: 0; z-index: 1; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Fantastic, thank you [b]rangelone[/b].

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0