I am trying to make the navbar stick at the top when i scroll down and i found this example on w3schools.
But when i add the margin at the top of the main content, the margin seems to get added to the navbar instead since it moves down 100px, can anyone help me out?
This is my code:
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Titillium Web', sans-serif;
}
nav {
display: flex;
justify-content: space-between;
padding: 10px;
box-shadow: 0 0 10px;
position: fixed;
width: 100%;
}
.pages-container p {
display: inline;
margin: 0 35px;
font-size: 20px;
}
.pages-container .last {
margin-right: 0;
}
nav .title {
font-size: 20px;
}
.main {
margin-top: 100px;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght#0,400;0,700;1,400&display=swap" rel="stylesheet">
<nav>
<p class="title">Portfolio Willem</p>
<div class="pages-container">
<p>Economie</p>
<p>Bedrijfseconomie</p>
<p>Wiskunde A</p>
<p class="last">Geschiedenis</p>
</div>
</nav>
<div class="main">
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
</div>
Thanks in advance!
I was expecting the main content to move down and not the navbar.
Add to <nav> top: 0; background: white;
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Titillium Web', sans-serif;
}
nav {
display: flex;
justify-content: space-between;
padding: 10px;
box-shadow: 0 0 10px;
position: fixed;
top: 0;
width: 100%;
background: white;
}
.pages-container p {
display: inline;
margin: 0 35px;
font-size: 20px;
}
.pages-container .last {
margin-right: 0;
}
nav .title {
font-size: 20px;
}
.main {
margin-top: 100px;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght#0,400;0,700;1,400&display=swap" rel="stylesheet">
<nav>
<p class="title">Portfolio Willem</p>
<div class="pages-container">
<p>Economie</p>
<p>Bedrijfseconomie</p>
<p>Wiskunde A</p>
<p class="last">Geschiedenis</p>
</div>
</nav>
<div class="main">
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
</div>
Related
I am rephrasing this post to make more sense:
The background of my page has an image and I am trying to hide the track of the scrollbar. however, when I set the background color to transparent it leaves a White gap where the track used to be. this is because the scrollbar takes up space on the page and you cannot put anything under it. I set the position of the scrollbar to absolute but that Property does not apply to this element.
I cannot get this to work with the rebuild scrollbar, I might have to build one with js.
EDIT:
I was trying to do this again recently and found a solution if you set overflow-y: overlay; the scrollbar will overlay on-top of the content. this makes the scrollbar thumb appear to float over the page if the track is transparent.
You can set background-color: #000; for your html page. It will remove the white corners for scroll.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<style>
html {
background-color: #000;
color: aliceblue;
margin: auto;
background-image: url('https://www.ledr.com/colours/black.jpg')
}
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
background-color: red;
border: 1px solid black;
border-radius: 20px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background-color: lightgreen;
border: 1px solid black;
border-radius: 20px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background-color: green;
background-size: 100px;
}
</style>
</head>
<body>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
</body>
</html>
I have a wrapper that contains two children which each takes up 50% in width. They are equal in height which is higher than the parent. The parent handles this with overflow-y.
The right div could contain content that is wider than the divs width which is handled with overflow-x on the div. My problem is that I want the scrollbar to be fixed at the bottom of the parent div so it’s always visible.
Here is the html to illustrate the problem.
<div class="parent">
<div class="left">
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
</div>
<div class="right">
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
</div>
I have created a plunkr to show the setup and the problem
https://plnkr.co/edit/QkH0QT7bhUjKcntPjMtG?p=preview
How to wrap by lightgreen color #left "Scrolling Content" container to the bottom of the page when scrolling down? When there is no "Scrolling Content" in the left column it should be also stretched of 100% of page. I think that the right column under fixed container should also follow the same rules.
.wrapper,
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
/* flex-flow: column wrap; */
flex-direction: column;
/* align-items: stretch; */
height: 100%;
}
.top {
height: 60px;
}
.content {
flex-direction: row;
align-items: stretch;
display: flex;
flex: 1;
height: 100%;
}
nav {
height: 60px;
background: tomato;
position: fixed;
top: 0;
width: 100%;
}
#left {
display: flex;
background: lightgreen;
flex: 0 0 40%;
/* justify-content: center; */
flex-direction: column;
/* flex-wrap: wrap; */
}
#left > p {
flex: 1;
}
#right {
display: flex;
flex: 0 0 60%;
}
#fixed {
position: fixed;
background: aqua;
width: 60%;
/* height: 100%; */
}
<div class="wrapper">
<div class="top">
<nav role='navigation'>
</nav>
</div>
<div class="content">
<div id="left">
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
</div>
<div id="right">
<div id="fixed">
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
</div>
</div>
</div>
</div>
/* .wrapper, */ /* removed this */
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
/* flex-flow: column wrap; */
flex-direction: column;
/* align-items: stretch; */
min-height: 100%; /* changed here */
}
.top {
height: 60px;
}
.content {
flex-direction: row;
align-items: stretch;
display: flex;
flex: 1;
height: 100%;
}
nav {
height: 60px;
background: tomato;
position: fixed;
top: 0;
width: 100%;
}
#left {
display: flex;
background: lightgreen;
flex: 0 0 40%;
/* justify-content: center; */
flex-direction: column;
/* flex-wrap: wrap; */
}
#left > p {
flex: 1;
}
#right {
display: flex;
flex: 0 0 60%;
}
#fixed {
position: fixed;
background: aqua;
width: 60%;
/* height: 100%; */
}
<div class="wrapper">
<div class="top">
<nav role='navigation'>
</nav>
</div>
<div class="content">
<div id="left">
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
</div>
<div id="right">
<div id="fixed">
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
</div>
</div>
</div>
</div>
I've removed redundant blocks and styles. Here is minimal HTML and CSS:
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
display: flex;
flex: 1;
}
nav {
height: 60px;
background: tomato;
position: fixed;
top: 0;
width: 100%;
}
#left {
display: flex;
background: lightgreen;
flex: 0 0 40%;
flex-direction: column;
}
#right {
display: flex;
flex: 0 0 60%;
}
#fixed {
position: fixed;
background: aqua;
top: 60px;
width: 60%;
height: calc(100vh - 60px);
}
<nav role='navigation'>
</nav>
<div class="content">
<div id="left">
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
</div>
<div id="right">
<div id="fixed">
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
</div>
</div>
</div>
The sidebar and main content is staying next to each other in the page.
sidebar is fixed with scroll auto
main-content is normal
see this pen http://codepen.io/shmdhussain/pen/QdXmQm
.sidebar{
background:black;
color:white;
position:fixed;
width:20%;
height:100%;
left:0;
overflow:auto;
}
.main{
background:silver;
color:black;
width:80%;
float:right;
}
.main p{
margin-bottom:50px;
}
<div class="cont">
<div class="main">
<p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p>
</div>
<div class="sidebar">
<p>sidebar content</p>
<p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p>
</div>
</div>
Actual Result:
Here when the user scrolls the sidebar and comes to the end of the sidebar, main content content is scrolled when the user scrolls more, entire page is scrolled.
Expected Result:
Here when the user scrolls the sidebar and comes to the end of the sidebar, main content content should not be scrolled.
Is there any way to achieve this?. Thanks in advance for any help.
.sidebar {
background: black;
color: white;
position: fixed;
width: 20%;
height: 100%;
left: 0;
overflow: auto;
}
.main {
position: fixed;
width: 80%;
height: 100%;
left: 20%;
overflow: auto;
background: silver;
color: black;
}
.main p {
margin-bottom: 50px;
}
<div class="cont">
<div class="main">
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
</div>
<div class="sidebar">
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
</div>
</div>
You need to separate both the divs in order to have their own scrolls.
This CSS should do the trick.
.main{
position:fixed;
width:80%;
height:100%;
left:20%;
overflow:auto;
background:silver;
color:black;
}
Codepen: http://codepen.io/hunzaboy/pen/KajoJG
I have a div with width:500px and height:300px in the middle of a page.
I want inside this div to have my navbar-fixed-top.
Can you please correct my html/css to accomplish that?
Thanks
http://jsfiddle.net/MgcDU/7874/
<div class="container" style="width:500px;height:300px;border:solid black 1px;overflow:scroll">
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-inner" style="padding:10px">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" style="height:70px;" data-toggle="dropdown">
<div class="icon-some"></div>Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link
</li>
<li>Dropdown link
</li>
</ul>
</div>
</div>
</nav>
</div>
<div id="wrapper">
<div id="content">
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
</div>
<div id="padding-bottom"></div>
</div>
</div>
Based on what you said you want the nav bar with the class navbar-fixed-top to be inside the div, it seems simple enough.
All I did was add a position:relative to the css file for the .navbar class
.navbar{
position:relative;
}
Here is it working
http://jsfiddle.net/tKCm6/
Now if you wanted the nav to stay fixed in the div as you scroll down the page thats a different story.
Here is the code for that
.container{
position:absolute;
}
.navbar{
position:fixed;
width:500px;
}
and live
http://jsfiddle.net/vARTv/