Jump to content

Archived

This topic is now archived and is closed to further replies.

jasonkadlec

Linking to div #anchor when using fixed nav bar

Recommended Posts

jasonkadlec    1
jasonkadlec

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jasonkadlec    1
jasonkadlec

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
Danny    1,327
Danny

Thanks for informing us the issue has been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • jchandon
      By jchandon+
      Hello,
       
      I just updated to DMS 2 and the fixed Nav bar came back. I would like to remove it again but I cannot find where to do so. What happened to the Global Settings -> NavBar option? I have also made sure to activate PageLines... No luck searching the forums nor in the DMS User guide.
       
      Thank you for your help!
       
      Jason
    • williamweber
      By williamweber
      I'm wondering if it's possible to insert some text instead of a logo in the fixed nav var. I have the menu setup the way I want but instead of my site title or an image I would like to put some social links sort of like the ones used in Branding tutorial in the Pagelines docs section. http://docs.pagelines.com/tutorials/creating-a-branding-area
       
      It's this possible?
       
      Thanks.
    • Slsp
      By Slsp
      I want to place a sign-up to a newsletter in the top menu bar
      on the site I'm designing I will be using mailchimp.
      Found this posting for
      "poppy" http://forum.pagelines.com/topic/30343-poppy-as-menu-item/  
      thought by replacing the widget with mailchimp it would work
      but it doesn't could you tell what I need to do to get the sign-up
      for newsletter in the top menu bar to work? 
       
      Add to pagelines-customize functions.php/child theme functions.php....
       
      function be_menu_extras($menu, $args) {
      $extras = do_shortcode( '<li class="menu-item menu-item-type-custom menu-item-object-custom">[mc4wp-form type="a"]Contact[/mc4wp-form]</li>' ); return $menu . $extras; } add_filter('wp_nav_menu_items','be_menu_extras', 10, 2);    
      Its the black fixed bar at the top which also has facebook and twitter links. 
       
      http://twb.thewhiskybond.net/
       
      Thanks,
       
      Sarah
       
      [sharedmedia=core:attachments:1691]  
    • purple
      By purple
      I am trying to make the standard nav bar for my site mobile friendly.  You can see it here:  http://www.paragonpe.biz
       
      I am also trying to get rid of the title "Paragon Pest Elimination" in the fixed nav bar area, center the phone #, and change the font color to white.  Any ideas would be appreciated.
       
      Thanks,
       
      Sarah
    • zhonghao
      By zhonghao
      Managed to upload the Simple CSS but seems to only work on the Classic Nav Bar. I found the following thread for changing text, hover colours etc : (http://www.pagelines.com/forum/topic/17985-navigation-text-colours/?hl=change+menu+text+colour)  but this doesn't work so I would really appreciate any help on changing the Text Colours of the Fixed Nav Bar - they are currently whitish/grey and I would like them Blue. Thanks in advance.
×