I am making a single page scrollable website and I set my links to anchors along the page. All works fine except that the anchor will be displayed at the top of the page as default and it is covered by the fixed nav bar (73px height).
Is there any way of setting the display position 73px down from the top? All the elements already have their positions, paddings, margins etc :-/
Here is the website http://www.drawlight.net/wordpress/?page_id=1784
I really appreciate the help!
Juliana.
Demo Fiddle
Change the href of the scroll-to-top anchor to, e.g. #this_is_the_top
Then before it in your HTML add:
<a id='this_is_the_top'>top</a>
nb. You dont have to specifically add an a, any element with that id will work.
And also add the CSS
#this_is_the_top{
position:absolute;
top:73px;
}
At present, you are simply targetting the top of your page with the scroll position, as you're href is simply '#', you want to target a specific element which is offset from the top (using position and top).
Related
When I create a relative link in HTML, Bot Workshops it links properly, but places the anchor at the top of the page, covered by a navigation bar. Is there a way to make it be lower so that the anchor is underneath the navbar?
If I understand it correctly, when the user clicked Bot Workshops, it should go underneath the navbar.
In your navbar, add an id. For example:
<div id="bot"></div>
Maybe you need to change the display of the anchor link.
a {
display: block;
...
}
You should add a padding-top to the #bot div (approx the height of the navbar plus some space). (This is based on some assumptions below)
I think your navbar is fixed?
If that is the case, the top of the #bot anchor div will be on the top-edge of the browser viewport. But the navbar will be obfuscating some of that content underneath.
This is more of a css/styling issue.
If you do add a padding-top, you might also want to make sure that value is responsive.
I have a SPA application that is to display a fixed header at the top of the page. This is normally working except that there are some pages that, when scrolling down, some contents of the pages is shown on top of the header (I mean, from the layer point of view, not the location).
For instance, certain divs are hidden by the header, but buttons within those divs are shown on top of the header.
Is there a way to force the header to be always on top?
Thanks!!
I think its about z index property of your fixed header.. increase the z-index property set it to something like 9999 so that it is always above everylayer..
You can use z-index for this...
HTML:
<header></header>
CSS:
header{
z-index:9999;
}
The value of z-index should be higher than all other Divs
Like others said, your problem can be fixed with the z-index CSS property, but I think the root of your problem lies deeper than this. You need to check your components for the position CSS property, it is possible that you missed to add it (along with z-index) on some divs/components.
This is my first time posting on here. I've searched for a while for an answer to this question and I'm now turning to this board because it's proven useful to me in the past.
The motif of the page I'm designing is a one page scrolling website (kind of like http://www.kitchensinkstudios.com/).
I've implemented a fixed navigation at the top, about 70px in height. Below this I've created sections that link to the nav. The idea is to click the link in the nav and the page will scroll up to the section chosen. The problem is: due to the automatic nature of internal bookmarks scrolling directly to the top of the page!, this cuts off a majority of the content.
I've attempted to add hidden div's or break tags with padding-top values to the sections in question but, aside from giving me a proper distance from the top of the page, it creates an opaque background with the same value as the padding.
Does anyone have any suggestions for doing this?
Ideally, when you select a link, the section called upon will float up to about the middle of the page.
Much thanks to anyone who gives this one a shot!
The default behavior for browsers is to scroll an anchor to the top of a view port.
If you offset the anchor vertically upwards, you should find it will bring the content down by an equal amount.
You can do this by specifying the position of the anchor as 'relative', and setting the 'top' attribute to a negative value, e.g.
<a style="position:relative; top: -70px;" name="myAnchor"></a>
Some browsers appear to need the anchor taken out of the normal flow, which is solved by simply floating the element.
<a style="float: left; position:relative; top: -70px;" name="myAnchor"></a>
You should find the line above works for FireFox, Chrome and InternetExplorer.
I have a layout like this: http://jsfiddle.net/MTWu5/
Centered page, with sticky header. Inside the header there's menu links to anchors in the page. My problem is when I click on them, I want the anchor to scroll just under the header, not behind it.
How could I do this??
First, i'd write the anchor that way.
<a name="anchor" id="anchor"></a>
If you don't use the close tag for the a element, no position style can be applied without missed up everything.
Then i just applied that style
#anchor{position:absolute;margin-top:-100px;}
It seems to works. Your layout is preserved, no margin. That solution works only if you work with fixed height. The margin top is the height of your header.
Hope that is what you were looking for.
Link to example jsfiddle
hai your problem is fixed "The path is: http://jsfiddle.net/MTWu5/2/
I'm trying to add a sidebar to my page. The main body container on the page has a box-shadow, so I want the sidebar to appear as though it's coming out from underneath the container so the shadow will be on top of it. I made my sidebar div a direct child of the body container (which has position: relative), and set it's position to absolute, then positioned it using the top and right position values. I got it in the right place, then applied a negative z-index so that it would be under the body. The problem is, this is making any links that I put in the sidebar unclickable in all but IE9. I don't know how else I can accomplish this without knocking out the links. Any ideas?
I would post a link to a page showing an example, but I'm actively making changes to it, so by the time you clicked it you probably wouldn't see what I'm going for. I'll try to explain better.
The body container is 720px wide and has an auto margin so that it appears centered in the page. It is positioned relative.
The sidebar is a direct child (the first child) of the body container. It has a fixed width, position absolute, padding, etc. and has a top and right position applied, along with a z-index of -100.
Here's a link:
http://reachchallenges.infectionist.com
You can remove the negative z-index and give an inner shadow to the sidebar that is the same as the outer shadow of the .body element.
You´d have to try it to see how it affects the border of the sidebar.
I don't fully understand what effect is desired but maybe this barebones fiddle can give some hints as for how to approach problems of such kind.
jsfiddle
The way to get links to work is to toggle z-index back to a positive number. Your CSS will look like:
.z-index1{
z-index: 1 !important;
}
and your JS should be:
$("#div-on-top").click(function(){
$("#div-on-bottom").toggleClass("margin");
$("#div-on-bottom").toggleClass("z-index1");
});
Clicking on #div-on-top will move it out of the way revealing #div-on-bottom and it will also bring #div-on-bottom to the top, making links clickable.
I also applied shadow to the #div-on-top and it looked ok (to me; see jsfiddle).