This question already exists:
Fixed position navbar obscures anchors [duplicate]
Closed 8 years ago.
I have a Bootstrap 3.0 navbar with that is always visible at the top of the page, but this could represent anything for which the position property is fixed.
<nav class="navbar navbar-default navbar-fixed-top" >
Because fixing it takes it out of the document flow, I need to add some padding to the body element so the content isn't hidden when the page is first display
body {
padding-top: 70px;
}
The problem is that when I click a menu item to navigate to a section, like #About then the top of the section is cut off.
jsFiddle
Q: Is there a way to adding padding so that the full item will come into view when navigated to?
Updated Answer:
As described in this answer, The problem is, your browser always wants to scroll your anchor to the exact top of the window. If you set your anchor where your text actually begins, it will be occluded by your menu bar.
Instead, set the padding-top for the container to the amount offset you want, and the margin-top for the container to the opposite of the padding-top. Now the container's block and the anchor begin at the exact top of the page, but the content inside doesn't begin until below the menu bar.
section {
padding-top: 60px;
margin-top: -60px;
}
jsFiddle
I would set the overflow: hidden on the body and add your site's content to a scrollable element.
Your layout should look like this:
<html>
<head></head>
<body>
<div class="navbar"></div>
<div class="wrap">
<!-- rest of content for site -->
</div>
</body>
</html>
Add these CSS rules:
html, body {
overflow: hidden;
height: 100%;
}
body {
padding-top: 50px;
}
.wrap {
height: 100%;
overflow: auto;
}
Check out my fiddle
Related
This question already has answers here:
How to position a div in bottom right corner of a browser?
(3 answers)
Closed 3 years ago.
I defined a jump up button so that one comes at the button, he can go back to the top of the screen without scrolling top. But it has placed exactly at the middle of the screen. I want it to be at the right bottom and appears when one goes down to the screen.
It'll be a lot easier to answer this if you posted your code along with the question.
There are a few ways you can try to achieve this and their usefulness might vary depending on other thing you're doing in your web page.
First, if you're sure that your content will exceed the window's length just place the button at the very bottom the body element and and wrap in a<div> with text-align: right. CSS:
.btn {
text-align: right;
}
HTML:
<div class="btn">
<button>Scroll up</button>
</div>
If you're not sure about the length of your content you can try the following approach: Use position: relative on a container that wraps your entire page and height: 100vh to make sure it fills up the entire view port. And then use position: absolute for the button to stick to the bottom-right corner.
This is the CSS:
.container {
position: relative;
height: 100vh;
}
button {
position: absolute;
bottom: 0;
right: 0;
}
And this is the HTML:
<div class="container">
<div>
<!-- all your content -->
</div>
<button>Scroll to top!</button>
</div>
If these do not help you please post your code (HTML and CSS) so it'll be easier to help you.
Good luck!
I am building a website for my upcoming wedding and I want a sticky header, but for some reason, it "disappears" by moving up after you go a certain way down the page. My test url is this: https://betterradiotech.com. Here is the nav markup:
<!-- Start Nav -->
<header>
<nav>
<ul class="nav-list">
<li>Home</li>
<li>Music</li>
<li>Gallery</li>
<li>Feed</li>
</ul>
</nav>
</header> <!--/ End Nav -->
Here is the nav SCSS:
header {
padding: 1em;
position: sticky;
top: 0;
z-index: 100;
width: 100%;
background-color: $burgandy;
}
.nav-list {
display: flex;
flex-flow: row nowrap;
li {
list-style-type: none;
margin-left: 10px;
}
a {
color: $pink;
font-weight: 600;
}
}
.active-nav {color: $navy !important;}
There is no JavaScript in making the nav, except for making the active nav work...for completeness sake, I will include that as well:
switch(location.pathname) {
case "/":
document.querySelector("a[title*='Home']").classList.add("active-nav");
break;
case "/admin/":
document.querySelector("a[title*='Admin']").classList.add("active-nav");
break;
case "/feed/":
document.querySelector("a[title*='Feed']").classList.add("active-nav");
break;
case "/gallery/":
document.querySelector("a[title*='Gallery']").classList.add("active-nav");
break;
case "/music/":
document.querySelector("a[title*='Music']").classList.add("active-nav");
break;
}
Why is my nav bar disappearing after a certain distance down the page? It seems to happen right before the end of the full background picture in the first section.
The reason for this is probably that your containing element is not as tall as you think, and you may have to set that element's height to fit-content explicitly, because sticky elements cannot leave their parent!
In most situations, the simplest solution will be to add this rule to your CSS:
body {
height: fit-content;
}
But generally, which solution you need and which element you have to apply it to depends on your document structure. Let's say it looks something like this:
<body>
<header>
<nav>
<!-- Your navigation -->
</nav>
</header>
<main>
<!-- The main content of the site -->
</main>
</body>
And you probably use some CSS reset that contains a rule like this one:
html, body {
height: 100%;
}
This allows using percentage heights on your page, but it will break sticky headers without additional work.
When you look at the size of the body with the dev tools, everything may look alright:
But once you scroll down, you see a problem:
The body is just as tall as your viewport. All other content you see is just overflowing out of it. But a sticky header can't do that, it will stay within the body and disappear with it. We now have three potential solutions:
If you don't need percentage-based heights on your page, you can use this CSS rule:
body {
height: fit-content;
}
If there are some percentage-base heights, try replacing them with vh instead, and see if that works for you. Then you can apply the fix from above.
If you do need percentage-based heights, then you might want to make the body stay in place but scroll the overflowing content through it:
html {
overflow: hidden;
}
body {
overflow: scroll;
}
I think you'll get the desired behavior by switching from sticky to fixed. Sticky is sort of a hybrid of fixed and relative positioning, and changes its behavior relative to context, and is commonly used to allow items to respond to its neighbors via scroll position.
Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent.
So you want:
header {
position: fixed;
}
PS: The reason its disappearing for you is that your body has a computed height, but the contents of the body overflow beyond that height. The sticky element scrolls away once you scroll past the computed height of the body, which is the header's parent.
The previous soultions did not work for my situation.
position: fixed made the other elements hide beneath it. And adding margin top or top to them messed the header a little bit. After almost two days of banging my head against the wall, I ended up adding this css to my modal in my styles.scss:
.modal-class{
display: initial;
}
This worked for me, hopefully helps save someone else's time.
I have a setup similar to:
<body>
<div class="non-moving-header">
</div>
<div class="floating-header">
</div>
<div>
Some vertically expanding content...
</div>
</body>
with
body, html
{
height: 100%;
min-height: 100%;
}
.floating-header
{
z-index: 9999;
top: 0;
position: sticky;
}
The issue is that the sticky element works fine, until it reaches the position of the original bottom of the viewport, where it stops as if it had reached the end of its parent element. If I manually set the body/html height property to something like 1500 it tracks as expected all of the way down the document. Is there a way to get position:sticky to properly track to an auto-sizing parent element?
You need to add overflow: scroll to your CSS for your full page wrapper/container div, then your targeted sticky element should scroll the full length of your web page and not get stuck when you exit your original view port.
I have created a plunkr here
I have a main page with left navigation (index.html). When I click on Header details the AddHeader.html page should be opened. Where I have added all the files. I think I am missing out something due to which the AddHeader.html page is not getting perfectly fitted in the main page. When I run this in internet explorer the AddHeader.html page is always shown at the bottom. Please help.
I am just adding a snippet from index.html where I have added ng-view:
<div class="pull-right" style="margin-right:20px">
<div ng-view></div>
</div>
Navigation bars are fixed, you have to set margin for the content. I have updated your code here
Look at index.html line 58, as your code above, I have removed pull-right and added a class page-content to the div and set margin for it in CSS:
.page-content {
margin-top: 50px;
margin-right: 20px;
margin-left: 140px;
}
You have a navbar on the left with position: fixed. You either need to float the navbar and container to the left (which probably wouldn't be desired behaviour), or account for this with a margin offset on your container:
.container {
margin-left: 60px; /* Equal to the width of your navbar */
}
Hope this helps!
I'm using wordpress and bootstrap and I have a a navber that sticks to the top of the page when scrolling, problem is it falls behind some of the contents on the page (see image for reference). How to I get the nabber to always be in front of whatever its scrolls past? Thanks in advance.
HTML:
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="91" id="search-nav"></nav>
CSS:
#search-nav {
height: 50px;
width: 100%;
background-color: #000;
}
You can try to put a value of z-index combined with a defined position (could be fixed, absolute, relative .. ) which is higher than the default z-index value of the below elements.
Source : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
Bootstrap is currently using these values for z indexes: https://getbootstrap.com/docs/5.0/layout/z-index/
CSS:
#search-nav {
z-index: 1100;
}
this should do