Jump to content
Sign in to follow this  
anthalis

Styling assistance for NavBar (I think)

Recommended Posts

anthalis

Hi there, I am building a website where I am trying to replicate the Scroll Spy behavior in a modified NavBar. The NavBar modification was making it a lot taller, which also required me to add a padding at the top of the page canvas. However, now I when I use the NavBar menu or Scroll Spy to scroll down to the various page sections, the page scrolls a bit too low and part of each segment's intro (including the heading) is not visible (hidden by the very tall NavBar). Removing the padding-top did not solve the problem. I could really use some assistance in figuring out how to fix this. My guess is that it can be solved with a CSS tweak (praying), but I am at my wits end with it so I leave myself to the mercy of a css superhero ;). Using WPMU (latest) with Child theme built on PL Dev Framework 2.2.5. Any help would be greatly appreciated. Thanks in advance, Anca

Share this post


Link to post
Share on other sites
batman

The scrollspy is new for me and I??m a newbie too, But ..... You see this link http://demo.pagelines.com/framework/sections/ (Tab scroll spy) I can reed this: "Wrap the markup in a div, add a FEW special classes, and you'll Instantly Have a styled page heading your mom would be proud of." I think you need this and nop the CSS rules. You also can see with firebug this page and look how it is make. ;)


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
anthalis

Hmmm, I'll try that and get back to you.

Share this post


Link to post
Share on other sites
Danny

Hi, What would best in my opinion would be for you to create a div above the title you wish to navigate to. For example, instead of this:

Our Focus - Retirement Income Planning

[/code] Try this:
[code]

Our Focus - Retirement Income Planning

Or something like, the above is untested but what should happen is when you click on one of your menu item, it will scroll to the

tag instead of the

tag.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
anthalis

Hi there, @batman - wrapping everything in divs did not do the trick, but it was definitely in the right direction. @Danny - added a div id="our-focus" containing the shortcode for the image separator with a padding-top and whaddayaknow - problem solved :) It had to be something embarrassingly simple like that :D Thank you both for the eye-opening. I consider the issue resolved.

Share this post


Link to post
Share on other sites
Danny

Thanks for letting us the issue has been resolved, we appreciate it.


Please search our forums, before posting!

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  

×