I have a sticky navigation on the top of my page and i also have one as the right column.
My problem is that when i link the side navigation to an anchor it scrolls the page to that anchor and puts it behind the top navigation.
Is there anyway that i can have it so it scrolls the page to 100px above the actual anchor so it isn't behind the top sticky navigation?
I am using bootstrap with affix-top on the top navigation and data-spy="scroll" and alsoaffix` on the right column navigation
bold
Since i am using the data-spy="scroll" this affects the way that the scrollspy works since the anchor goes behind the top navigation before it changes the spy on the side navigation.
This is why i ant to have an offset on my anchor.
As long as you can set this up so that it won't interfere with the rest of your layout, the following is an easy manner to do what you want:
Sample Jsfiddle: http://jsfiddle.net/qWHgR/
selector {
padding-top: 200px;
margin-top: -200px;
}
I'm not personally familiar with Scrollspy so you may have to make some minor changes to it if the offset becomes a problem.
+1 to #Nit suggestion. I like that it works beautifully well on inline and block level elements, wouldn't have thought.
http://jsfiddle.net/gCs7C/
HTML:
<nav>
Scroll to content
</nav>
<div>Spacer</div>
<div>
Spacer<br />
<span id="hash">Content</span>
</div>
CSS:
html, body {
padding: 0;
margin: 0;
}
div {
height: 1000px;
}
nav {
position: fixed;
height: 24px;
width: 100%;
background-color: yellow;
}
#hash {
padding-top: 24px;
margin-top: -24px;
}
Related
I am trying to create a simple web page with a navigation bar and a title centered in the page. However, the margin of the title div somehow affected the positioning of the navigation bar.
I think this is caused by the margin collapsing of two adjacent block-level boxes? I have tried to fix this problem by adding a <br> after the navigation bar, it worked, but I think it is not elegant.
Is there a better method to achieve what I want?
Below is my simplified HTML code:
<header id='navbar-bg'>
<div id='navbar'>
<ul>
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
</header>
<div id='body'>
<h1 id='search-title'>This is a title</h1>
</div>
And the CSS style:
#navbar-bg {
position: fixed;
width: 100%;
}
#navbar {
display: flex;
align-items: center;
}
#body {
margin-top: 200px;
}
Since the position of #navbar-bg is fixed, I want the navigation bar as a whole to be fixed, and the margin-top of #body should not affect the navigation bar. Yet the margin-top moved both the #body and the navigation bar down, which is strange.
I want to fix this problem using an elegant solution, not adding a <br> after header.
You have to set a top: 0px to the #navbar-bg element. According to Mozilla:
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
So, when you don't use top for the #navbar-bg element, it will fall back to it's initial values, which is relative to body. So the body margin is also present in that element.
For a navbar it's probably best to be on the left of the body, so you could do this in your CSS:
#navbar-bg {
position: fixed;
width: 20%;
float: left;
}
#navbar {
display: flex;
align-items: center;
}
#body {
margin-top: 200px;
float: right;
width: 80%;
}
I have a website here with a sidebar, but I want the sidebar to be hidden until the user clicks on a menu button. Anyways, my .sidebar is on z-index: 0; while my .page-content is on z-index: 1;. Why is the sidebar not hidden when I load the webpage? I have nothing in my page-content except for a <h1> for testing purposes.
Here is my HTML file:
<!DOCTYPE html>
<head>
</head>
<body>
<div class = "page-wrapper">
<div class = "page-content">
<h1>Test</h1>
</div>
<div class = "sidebar">
<ul>
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
</ul>
</div>
</div>
</body>
</html>
And here is my CSS file:
h1 {
/* Just to centre my text */
position: relative;
left: 50%;
}
.page-content {
position: relative;
z-index: 1;
}
.sidebar {
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
width: 120px;
padding: 30px;
background: #333;
z-index: 0;
}
So why isn't my sidebar being hidden when I load the webpage? When I load this, I can see the sidebar and the "Test" text both.
EDIT:
I see many of you have said that the z-index is not for hiding stuff. I am not trying to hide the sidebar. When the user clicks on the menu button, I want the page to slide over to reveal the sidebar, hence the reason I am using the z-index and not display: none;.
EDIT:
Some of you have said that this is a duplicate from another question, but when you read my comments, please realize that the question I am asking, is quite different. I am going to try to explain what I am attempting to do here as simply as I can. I have a website, where a user clicks on the menu bar, the entire website transitions 180px to the right, thus revealing the sidebar that is fixed underneath. You guys mentioned that my .page-content needs a background, but like someone else said, it only takes up my background as big as the objects inside are. How or where can I set a background that will move, yet still cover the sidebar completely?
Firstly, your z-index IS working.
z-index is not responsible for making an element visible or not. (For that, you can use the opacity,visibility, or display properties.
z-index can be used to position elements behind other elements with opaque backgrounds, which may make them appear hidden (pun intended), but rest assured, the element is still there.
Your CSS has no elements with opaque backgrounds with z-indicies higher than 0 that sit on top of .sidebar, so that's why you see it.
Your sidebar is not hidden because your .page-content doesn't have a background. Put a background and add this CSS:
.page-content{
background: #fff;
height: 100%;
width: 100%;
}
This way, you'll be able to slide it to then side afterward.
Add background to .page-content you will see the z-index's effect.
A better approach would be to hide the side bar with left property as some negative value, for example -100px as below.
.sidebar {
position: fixed;
left: -100px;
top: 0px;
bottom: 0px;
width: 120px;
padding: 30px;
background: #333;
z-index: 0;
}
and when the user clicks the menu icon set left: 0px using javascript.
I have a navigation bar at the top of a page with position fixed. The links in the bar go to H2 tags below on the same page. However when the link is selected the link bar covers the H2 title it is linking to. I know it's because the Nav is not in the flow of those other elements. How do I fix this?
You could use anchors instead of IDs on your headings, then pull the anchors up above the headings:
http://jsfiddle.net/isherwood/uZ7n7
<a name="link2"></a>
<h2>Heading 2</h2>
.content a {
margin-top: -80px;
margin-bottom: -80px;
display: inline-block;
position: absolute;
width: 0;
height: 0;
}
Without seeing any code my only suggestion would be set z-index on element that is getting covered.
I have a fixed navigation bar on my website that stays at the top with links that take me to different sections further down the page. However, because my fixed nav bar has a height of 40px, the beginning 40px of every section is covered up. How would I offset where my links take me by 40px using either HTML or CSS?
Thanks.
You might try absolutely positioning "dummy" anchors 40 pixels above the top of each section. You can give them zero width/height and hidden visibility to ensure that these anchors don't affect how your page is displayed. When the user clicks one of the links in your fixed navigation bar, the window will scroll to the top of the dummy anchor, 40 pixels above the beginning of its actual section.
Example HTML:
<div class="navbar">
Anchor 1
Anchor 2
Anchor 3
</div>
<div class="section">
<span id="anchor1" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor2" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor3" class="anchor"></span>
Section Content
</div>
Example CSS:
body {
padding-top: 40px;
}
.navbar {
position: fixed;
width: 100%;
height: 40px;
top: 0;
left: 0;
z-index: 10;
border-bottom: 1px solid #ccc;
background: #eee;
}
.section {
position: relative;
}
.anchor {
display: block;
position: absolute;
width: 0;
height: 0;
z-index: -1;
top: -40px;
left: 0;
visibility: hidden;
}
For a working example, see http://jsfiddle.net/HV7QL/
Edit: CSS3 also includes the :target pseudo-class, which applies to an element whose id has been referenced by the href of a link in the document, or the hash value of the URL. You can apply a 40-pixel padding to the top of the :target that will be applied only to the section the user selects from the fixed navbar.
Example CSS:
.section:target {
padding-top: 40px;
}
This is semantically cleaner than the method described above, but won't work on older browsers.
Working example: http://jsfiddle.net/5Ngft/
I just happened to stumble across this problem myself today so I had been thinking about it for a bit already, but I think I just found a solution:
Add a padding-top: 40px; margin-top: -40px to the element that you want to jump to. The negative margin cancels the padding, but the browser still thinks that the top of the element is 40px higher than it actually is (because in fact it is, only the content of it starts lower).
Unfortunately, this might collide with already set margins and paddings, and if you're using a background on the targeted element it's going to mess it all up.
I'll see if I can work around that and post a jsfiddle, but in the meantime here's a basic answer at least :)
edited: I thought I had a solution for the background, but it didn't work. Removed again.
final edit:
It does kind of work if you know the background color of the wrapping element. In my example I know the text is on a white background, but the titles have a silver background. To prevent the title from having a background on the extra padding we set, instead I put it on a pseudo-element before it:
#three:before {
content: " ";
background: white;
display: block;
margin-top: -40px;
padding-top: 40px;
}
This way the extra padding has a white background again, but this only works if you already know what background it needs. Setting it to transparent for example will show the underlying background of the title itself, not of the article.
jsFiddle: http://jsfiddle.net/Lzve6/
Heading one is the default one you're having problems with.
Heading two is my first solution, guaranteed to work on almost all browsers
Heading three is using the :before pseudo-element, might not work on older browsers.
I am working on new layout of my site & I come across GIZMODO site, I found that the site can make use of page scroll bar to scroll part of the contents in the site. How can they make it ? I studied their CSS via Firebug, but I am quite confused.
Here is my testing page 1 : http://raptor.hk/dev/theme/dummy.html (this page can center the contents, but cannot scroll as I want)
Here is my testing page 2 : http://raptor.hk/dev/theme/dummy2.html (this page can scroll as I want, but cannot center)
I just want to make the page with left side content scrolling with page scroll bar, but right side content stays in the original position, plus the whole site should align center, i.e. combining my testing page 1 & 2. Can anyone give me some lights?
Though your Gizmodo example uses additional scripts for handling of (the vertical scroll bar of) the sidebar (which even doesn't work in all browsers), the effect is perfectly possible with pure CSS and it even is not as difficult as it may seem at first sight.
So you want:
A horizontally centered layout, possibly widened or narrowed for different browser window sizes,
The main content at the left which is vertically scrollable by the browser's main scroll bar,
A sidebar at the right which sticks to the top of the browser window, scrollable separately from the main content, and only showing its scroll bar when the mouse hovers over. When scrolled to the end of the sidebar, the window's scroll bar takes over.
See this demonstration fiddle which does all that.
The style sheet:
html, body, * {
padding: 0;
margin: 0;
}
.wrapper {
min-width: 500px;
max-width: 700px;
margin: 0 auto;
}
#content {
margin-right: 260px; /* = sidebar width + some white space */
}
#overlay {
position: fixed;
top: 0;
width: 100%;
height: 100%;
}
#overlay .wrapper {
height: 100%;
}
#sidebar {
width: 250px;
float: right;
max-height: 100%;
}
#sidebar:hover {
overflow-y: auto;
}
#sidebar>* {
max-width: 225px; /* leave some space for vertical scrollbar */
}
And the markup:
<div class="wrapper">
<div id="content">
</div>
</div>
<div id="overlay">
<div class="wrapper">
<div id="sidebar">
</div>
</div>
</div>
Tested on Win7 in IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0.
I assumed a fluid width for the main content and a static width for the sidebar, but both can perfectly be fluid, as you like. If you want a static width, then see this demo fiddle which makes the markup more simple.
Update
If I understand your comment correctly, then you want to prevent scrolling of the main content when the mouse is over the sidebar. For that, the sidebar may not be a child of the scrolling container of the main content (which was the browser window), to prevent the scroll event from bubbling up to its parent.
I think this new demo fiddle does what you want:
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
I misunderstood your question. I thought you wanted the main scrollbar to also scroll stuff in another div. Well, here you go:
$(function(){
$(document).scroll(function(){
$('#my_div').stop().animate({
scrollTop : $(this).scrollTop()
});
});
});
Demo: http://jsfiddle.net/AlienWebguy/c3eAa/
You can do this with position:fixed. The relevant part from GIZMODO's stylesheet:
#rightcontainer {
position: fixed;
margin-bottom: 10px;
width: 300px;
height: 100%;
top: 0;
}
This technique is seen on lots of websites today. What they do is give position: fixed to the div on the right side of the screen, so it is not affected by the page scroll.
CSS:
body {
position: relative;
}
#leftSide {
width: 600px;
...rules ...
}
#rightSide {
position: fixed;
left: 610px;
}
HTML:
<body>
<div id="leftSide">
affected by scrolling
</div>
<div id="rightSide">
Not affected by scrolling
</div>
</body>
I assume you are looking for something like this.
http://jsfiddle.net/RnWdh/
Please notice that you can alter the width of #main_content as you wish, as long as it doesn't go "behind" your fixed menu as your text will disappear.
The trick to get the fixed menu to the right in your centered container is using left: 50% and margin-left to adjust it correctly.
For example. You have a container-width of 960px, and fixed menu width of 300px, with left: 50%, there will be a white space of (960/2 - 300 = 180) to the right of the fixed menu. Then just adjust it with margin-left: 180px;
One way to "center" the page (i.e. content + right panel) is to adjust the margins while making the right panel fixed position. So, if you have a div#content and a div#rightPanel, the css may look something like:
#content {
margin-left: 15%; /* left page margin */
margin-right: 25%; /* right page margin + rightPanel's width */
}
#rightPanel {
position: fixed;
top: 0;
right: 15%; /* right page margin */
width: 10%;
}
Just make sure that the left margin of #content is the same as the right margin of #rightPanel.
Here's an example: http://jsfiddle.net/william/ZruS6/1/.