Two pages, one with <a href='some_url#some_name'>, and second, on some_url, with <a name='some_name'>.
So after clicking on URL1, page 2 loads, and URL2 is on the top of the the page.
Now about the problem: this URL2 hidden under twitter-bootstrap's top menu, which have fixed position.
However, when I'm checking named links on Twitter Bootstrap's site, no such problem appears.
I'm tried both Firefox and Opera, it seems no browser dependency.
However, when I'm checking named links on Twitter Bootstrap's site, no such problem appears.
I guess you are referring to the link in the navigation span on the left of each page. If you look at the css, specifically the docs.css file, which contains the style rules for the documentation website, you'll find out that every section has a padding and that's why they don't appear below the navbar.
As you can see the section does start hidden by the navbar, but the padding moves the content down so it became visible.
Hope this helps.
Related
I have a webpage with a horizontal top sticky navbar 60px high.
On my page, I have links to locations on the same page with Link leading to id="someTarget"
My problem is that when the resulting link is clicked, the page scrolls to the target heading, but it is at the very top of the screen, behind my sticky navbar.
How can I specify that the scroll add a 60px cushion so that the target is at the top of the viewable area, not at the top of the screen?
So far I have just been manually adding in my id="someTarget" a few lines above what I actually want to be the target, but this seems a pretty imprecise way of doing it.
If you are okay with using a CSS framework for this, Bootstrap has what you need. There is an offset option that you could use.
I'm having an issue where when I scroll through my homepage with the anchor tag sections it does not line up properly. For instance, if I click "showcase" it will go to the section but not highlight the navigation hover like it should. However, if I scroll slightly down it will then hover.
I read online in the past this was resolved by adding padding into the css for the section tag. I couldn't seem to get it to work.
Any help is appreciated, thank you.
BQ: How do I change the active section the page opens to? I tried changing the "active" tag, but it still uses the same section.
I'm using this template: http://www.blacktie.co/demo/pratt/#home
you have two identical ID's on your page , eg #showcase. Other then that you probably need to set an offset in the jquery scrollto function.
I have added the bootstrap collapse bar to my menu, it is working as it should, however since I have a unique nav bar that is in a fixed footer, it's not expanding and showing the nested content when the button is hit.
My educated guess is because it drops DOWN and there is no space under my footer as it's the lowest element on the page. Is there a way to make the direction go upward?
Here is a link to the site, so hopefully the source code will be enough. If not please let me know what you would like me to post on here.
It's also important to point out that I've tested this in the header and it does not function there either...
I have a fixed menu bar at the top of my site. I have a page that has inline linking by adding a hash tag to the URL making it jump to that particular element. The problem is the element it jumps to is hidden being this fixed menu bar. Is there a way to move the jump down a bit? Here is an example:
Example
Sadly you cannot do that via html, you'd need some JS, or even CSS, depending on your code.
Can you post a sample on jsfiddle.net ?
As a workaround, add another (hidden) element below it and simply link to that one instead:
click me
<!-- further down the page is the content -->
<div id="#element1">Here is what users will be reading!</div>
<div id="#element1-target"
style="visibility:hidden;{make this lower down below the actual text}"></div>
My only question though, is if your header bar is blocking your text that the page 'jumps' to, wouldn't you want the page to link to higher than the target?
Given your question is vague and I don't think your example shows what your problem is, this should do what (i think) you're trying to do.
:)
On the following website, www.josecvega.com, I have a navigation bar with years that link to sections on that same page. Unfortunately it is not working they way I hoped, when the user selects a year it moves to the section of the page and puts that section on the top of the page, I have a fixed div on the top of the page that covers the sections and prevents it from properly displaying. What can I do for this to work?
It hard to explain my situation, but it can be seen by going to www.josecvega.com and clicking one of the years.
Put your anchors earlier in the file. Perhaps use a fixed-height element (the same height as your header) in the margin just before each section and apply the anchor to that.
Or use a script run after the jump and scroll back down X pixels.
Or use a frameset to display the fixed header rather than the position:fixed div you are using now.
I would probably do the latter.
your header (class=bannercontainer") is position:fixed
so this element will not scroll.
if you now click on a year it scrolls the page behind the header.
probably position:fixed is not what you want