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 */
}
Related
I want to keep the footer component at the end of my router-outlet. The problem is, when using this code
:host {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 0;
}
the footer stays at the bottom, but acts as fixed footer. But I want the footer to change its position w.r.t. the router-outlet's size. Changing to position: relative makes it go down and I have to scroll down. The picture below will give the detail about this:
You can see the page gone down.
My responsive topbar component has the following code:
.mat-toolbar {
height: 7vh;
background-color: white;
}
.mat-sidenav-container {
background-color: white;
height: 93vh !important;
z-index: 0 !important;
}
What I am thinking is that probably the height of mat-sidenav-container is causing the problem.
Please help me out in this scenario.
This is my sample example.
The topbarComponent is not just a Div placed at the top, it covers the entire screen. RouterOutlet and footerComponent must be defined in mat-sidenav-content.
As per to the given stackBlits, use below code:-
<mat-sidenav-content fxFlexFill>
// Awesome content within router-outlet
<router-outlet></router-outlet>
<app-footer></app-footer>
</mat-sidenav-content>
Keep Position CSS property as Default/unset for footerComponent i.e. relative;
Did you try it using Grid? Add the following code to your CSS:
body {
min-height: 100vh;
display: grid;
grid-template-rows: max-content max-content 1fr max-content;
grid-template-columns: 100%;
}
I would like to have a border bottom that is overrule the container width to the right. So I have two colomns of six col-md-6. The right one has an article as a child. That article has a border-bottom of one px. That should reach the window viewports right. See image bellow:
As you can see, the right vertical line wil show the container end. There should stop the content and let text for example position on a new line. But the border should overrule that so it will reach the viewport right.
Oh and I make use of bootstrap grid if that was not clear!
Code in progress:
http://codepen.io/anon/pen/gaewLB
Borders can't extend beyond their element.
BUT you can use a pseudo-element instead; like so.
.page header,
.page article {
padding: 60px 30px;
/*border-bottom: 1px solid #c2c2c2; */
position: relative; /* positioning context */
}
body {
overflow-x: hidden; /* prevent scrollbars */
}
.page header::after,
.page article::after {
content: '';
position: absolute;
top:100%;
left: 0;
height: 1px;
background: #c2c2c2;
width: 100vw; /* or some other large px/em value */
}
Codepen Demo
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.
I'm trying to figure out how to get the footer to stick to the bottom of the page in the css of http://bit.ly/138xOAB
I've tried alot of things which were said in tutorials, such as:
the position absolute,
bottom:0,
and min-height of the container 100%,
height of the body 100%,
But none of those things turned out well.
You can see the HTML and CSS by inspecting the website. I can't get the proper code over here.
Can someone help me, maybe there is something wrong in the HTML?
The problem with you footer's position: absolute; is that it will hide the other elements behind it.
Your footer can be best viewed if you remove position: absolute; so as to show all elements and add margin-top: 20px; for some gap in between the footer and the element before it..
Try it.
EDIT:
If you want the footer to be always float on the screen, use the following CSS (comments inline):
.container {
max-width: 1200px;
margin: auto;
padding: 0px 3%;
margin-bottom: 250px; /* so that all content is visible */
}
.footer {
background: #efefef;
position: fixed; /* so that the footer floats */
overflow: auto;
bottom: 0px; /* float at bottom */
padding-top: 20px;
padding-bottom: 20px;
height: 180px;
width: 100%;
margin-top: 20px;
}
Remove "position: absolute" and "bottom: 0" from the .footer class. I think that fixes your issue. And add a small margin above the footer so there is a small space between the content and the footer.
I'm working on a web design project for one of my classes. I cannot figure how to make the divs go down the whole page (the color)
http://jsfiddle.net/vmm1s4Lt/
http://codepen.io/bmxatvman14/pen/fihwD
Excerpt:
nav {
background: black;
color: white;
float:left;
width:20%;
height:800px;
display:inline-block;
/*margin-top: 40px;*/
padding-bottom: 40px;
position: relative;
z-index: 10;
}
#main {
background-color:#04cfe1;
float:right;
width:80%;
/*margin-right:10px;*/
}
Notes: I'm a pretty moderate coder, so I have tried height: 100% and that didn't do anything.
I'm trying to make the black side bar go all the way, and the blue span across the rest of the page.
Full page site: http://rubergaming.com/project/
Thanks a ton!
You can achieve this by using height 100%, but you may have forgotten that you also need to give container elements a height of 100% in order for that to work when you are giving your #main div that 100% height. I also slightly modified some of your other styles, you may need to tweak as needed. http://jsfiddle.net/ngz6e5p1/.
/*Give containing elements, as well as our main div, a height of 100%*/
html, body, #wrapper, div#main {
height: 100%;
}
/*This is overriding styles you already had - I changed the nav's height from 800px to 100%, and removed padding which will cause there to be an extra white space under the main blue nav if present */
nav {
height: 100%;
padding-top: 0px;
padding-bottom:0px;
}
What do you mean for the black bar to go all the way? And to span the blue div across the rest of the page try this:
<div id="main" style="
position: absolute;
margin-left: 20%;
bottom: 0;
top: 0;
">
//ALL THE OTHER STRUFF INSIDE THIS DIV
</div>