Jump to content
Sign in to follow this  
jbekefy

Social Media Icons don't work outside of the Header

Recommended Posts

mackenzie    12
mackenzie
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]

Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

---------------------------------------------------

Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post


Link to post
Share on other sites
jbekefy    0
jbekefy
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
catrina    103
catrina
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

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Rob    547
Rob
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.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jbekefy    0
jbekefy
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
catrina    103
catrina
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

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jbekefy    0
jbekefy
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
Rob    547
Rob
This worked for me: [code].main_nav_container.nosearch, .nosearch .main_nav { margin-right: 0; z-index: 1; }[/code]

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jbekefy    0
jbekefy
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  

×