• 0
Sign in to follow this  
Followers 0

Linking to div #anchor when using fixed nav bar


Question

Posted · Report post

So I have this page: 

 

http://bethkadlec.wpengine.com/faqs/

 

I want to be able to link to each FAQ using the DIV ID -- http://bethkadlec.wpengine.com/faqs/#post-20 

 

for example .

 

However this positions the div to the top - behind the fixed nav bar.

 

I found a tutorial at css tricks, but none of the methods presented there are working for me? 

 

I set a custom class to each div -- .faq.

 

So why doesn't the pseudo method work? (or the other method, or any CSS that I've found on stackoverflow work?

 

.faq:before { display: block; content: " "; margin-top: -70px; height: 70px; visibility: hidden; }

 

Is this because of the less CSS? Or am I just not understanding the concept?

 

Anyone successfully link to an anchor on the page - and get it to show up below the fixed nav header? 

 

Thanks! 

 

Share this post


Link to post
Share on other sites

3 answers to this question

  • 0

Posted · Report post

Solved it.  I'm using nickHaskins @Anyloop - which makes these nice sort of, colored boxes around the content.

 

When I switched to padding and margin as you suggested, it worked except you could see the gap, because the CSS was being applied to the <div> - which also has the CSS for the background color.

 

In all the examples, the anchors are always h2 tags. The page uses nick Haskin's #anyloop plugin, which unfortunately does not have any ID's in the full posts <h3's> -- he's got a function down on line 353 of his section.php

<h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute();?>"><?php the_title_attribute();?></a></h3>

I tried to get the WordPress post_count to echo out the post cound into and ID but couldn't swing it... so instead I ended up editing the block "anyfull" loop - and just added in a $faqid=0; before the loop and then $faqid++; into just after the loop.

 

I then replaced his line 242 with: <h3 id="<?php echo $faqid; ?>"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute();?>"><?php the_title_attribute();?></a></h3>

 

So essentially he has this elegant set up where all the various "Anyloop" possibilities like a grid, or recent posts etc, always just call the title function at the bottom of the script. 

 

I uglied it up, by taking out that elegant function and put in my brute force (sorry Nick!)... but hey. It works.

 

and so now here is my CSS:

 

.faq h3 {margin-top: -100px !important; padding-top: 100px !important; }

 

Problem solved ... as long as I remember to not update AnyLoop before looking to see if Nick added in a post_count... just in case we want to link to a post inside the loop, whilst using a fixed header. Sheesh! 

 

I think you can close this as answered.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You will probably want to try something like:

 

.type-faq[id] {
margin-top: -40px;
padding-top: 80px;
}

 

 

If that doesn't work, as its difficult to test on the fly, you will want to play around with that CSS, you need to use margin-top and padding-top not height.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for informing us the issue has been resolved.

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