Wasn't sure how to word the title properly - basically I want to know how the fixed header div disappears behind the nav bar in this codepen.
http://codepen.io/Guilh/pen/JLKbn
Header code:
header {
height: 300px;
padding-top: 50px;
background: #f07057;
position: fixed;
width: 100%;
top: 0;
}
nav bar code:
.main-nav {
background: #fff;
height: 80px;
z-index: 150;
margin-bottom: -80px;
box-shadow: 0 2px 3px rgba(0,0,0,.4);
position:relative;
}
How is that working? In contrast, my attempt is here:
http://codepen.io/Sasoon/pen/bVNVQv
Thanks so much!
Cast your .filler block as relative to make it above fixed block when scrolling and add background filling.
Here is your example modified:
http://codepen.io/anon/pen/YyPWpX
In the codepen1, they have used a script which will add a class to navigation when the page is scrolled. So the position will be fixed for the navigation once the new class is added (on scrolling down). If user scrolls page up, then the class will be removed. If you add the JavaScript that they have used, you can get the same functionality.
Related
On my site, I have a tutorial that appears in a modal. The wrapper is a translucent gray that covers the entire site (including the parts that you must scroll down to see).
I am trying to center the modal vertically, but since the div covers below the fold (it goes where you must scroll down), the modal appears half cut off on the bottom of the page because it is placed in the center of the modal wrapper div. I'd appreciate it if someone could look at my code below and tell me how can I change the CSS so that the modal box will always appear in the center of the screen (vertically), even if the parent div moves below visibility.
Here's my code:
.modal-wrapper {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: none;
background-color: #000000;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
position: absolute;
background-color: #fefefe;
border: 1px solid #888;
border-radius: 12px;
margin: 15% auto;
padding: 20px;
width: 80%;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
You may be wondering what happens when the screen's width is smaller. As the browser size shrinks, the div slowly moves further up the page, but it is never fully revealed. I would like this modal to be centered similarly to the Wordle Help Modal. If you play around with it, you'll see that it always stays in the same spot no matter how small or large the browser's width is. Thanks in advance for any answers!
I'm completely new to front end and have been coding using html and css for 3-4 months.
I'm currently completing a free course on free code camp and I'm currently working on a technical document page.
My main issue is figuring out how to stop my body element from scrolling behind my nav bar which is positioned on the left. I want the body element to only scroll upwards/downwards.
my second issue is figuring out how to build my list items with the top and bottom borders surrounding the list items fully extending within the nav bar
here is my project --> https://codepen.io/kboogie/pen/zYzBwXa
Thanks for the help and sorry for poor explanation
body { line-height: 30px;
min-width: 100%;
font-family: Azeret Mono, monospace;
padding-left: 250px;
}
#navbar { position: fixed;
left: 0px;
top: 0px;
height: 100%;
border-right: solid;
border-color: rgba(44, 187, 0, 0.603);
background-color: rgb(223, 253, 170);}
header {
text-align:left;
}
.head-n { text-align: center;}
li {
padding-right: 10px;
list-style: none;
}
Here is a solution to your first problem. The issue comes from setting the min-width: 100% and padding-left: 250px. This will cause all of the content to be 100% of the width plus an extra 250px. This will always result in content that is too big to fit on the screen. That is what is causing the horizontal scroll bar.
To fix this you should remove min-width: 100% from body{}. There is no need for this style since the text will automatically wrap regardless of the size of the screen.
I am designing a webpage in which I have a sidebar and some other stuff like shown below
Here, Your Friends is the sidebar I am talking about. whenever I put my cursor over that sidebar and scroll, the page is scrolling instead of the sidebar.
What I am expecting to happen is that, when I put my cursor outside of that sidebar and scroll, the main page should scroll down. and when I keep it on the sidebar and scroll the sidebar should scroll down.
This is the CSS of my sidebar
header .c-header-container .c-side-bar-right {
position: fixed;
top: 80px;
bottom: 37px;
right: 0px;
background-color: var(--side-bar-color);
display: flex;
flex-direction: column;
padding: 1rem;
border: 4px solid black;
border-top: none;
width: 20%;
z-index: -1;
overflow-y: scroll;
}
Is there any way I can achieve this?
I really see no flaw in your codes but could you please try setting the z-index to a positive value or better still remove it?
Relative to which element did you set the z-index and what are the css properties of this element?.. We're still working
The sidebar isn't scrolling probably because of its z-index. Try setting it to high value, maybe 99 or more. This should fix the problem.
.sidebar-class {
z-index: 99;
}
I'm doing exercise from freeCodeCamp in HTML/CSS section. I have no knowledge of JS as of right now.
I made a fixed position navbar in my website, and when I scroll through the page it doesn't hide some of the elements "underneath" it.
I want both "premium materials" and the little icon on the left to be hidden when navbar is "above" them.
navbar css code:
#header{
grid-area: nav;
position: fixed;
display: grid;
grid-template-columns: 20% 40% 40%;
background-color: rgb(198, 198, 198);
border-radius: 5px;
height: 60px;
width: 100%;
top:0px;
left: 0px;
rifth: 0px;
}
What's going on there and how could I fix it?
Your fixed navbar needs to be stacked on top of all other elements on your page. Add a z-index css property to your #header element like this:
#header{
z-index: 1; // keep increasing this by 1 for as long as there are elements still overlapping the navbar
/* other css properties below */
}
Basically everything is working fine except the scroll bar shows up on pages where it's not needed and when the page is resized the navbar won't extend down with it and will end up like this (Image Below), You can see the navigation bar won't extend down with the moved content of the page.
http://i.stack.imgur.com/QynSv.png
Here is a JSFiddle link, any help would be greatly appreciated!
JSFiddle: https://jsfiddle.net/pq3t70th/1/
Navigation CSS Code
nav {
border-right-style:solid;
border-right-color:black;
border-right-width: 5px;
background-color: #3b5999;
height: 100%;
width: 180px;
position: absolute;
}
You use display: table-cell; for section and nav
jsfiddle