Im trying to create a stick nav. However on doing so, the nav goes into the background.
I've set the position on the nav div like so,
.site-header {
...
position: fixed;
}
However, this has worked as expected, as mentioned above. Is there anything else I should be adding, to ensure the div is ontop and fixed.
https://jsfiddle.net/fe6jc8nu/
Thanks,
Add z:index: 9; to .site-header rule:
.site-header {
background-color: #fff;
padding-bottom: 25px;
padding-top: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: fixed;
z-index: 9;
}
Related
So I guess the main question here is can I keep everything under my header nav bar that's in a fixed position but if I need to scroll it goes under my header? Here is a fiddle of me just setting the margin-top of the hr tag but after trying it on different screen sizes it just doesn't work and over laps on smaller screens.
https://jsfiddle.net/RVKuzmik/se0etqew/3/
Code here
html,
body {
padding: 0;
margin: 0 auto;
text-align: center;
background-color: #ffffff;
width: 100%;
}
header {
top:0;
position: fixed;
width: 100%;
padding-bottom: 1%;
padding-top: 1%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
}
hr {
margin-top: 10%;
}
<header>
<nav>
<ul>
<li>Campus</li>
</ul>
</nav>
</header>
<hr>
try to add position fixed to your form this will work
You are setting a percentage value as the margin-top on the hr element. The thing with percentage values is that it changes as the viewport changes, so on a smaller device the 10% value may not be the same as it is on a large computer screen.
Since your navbar is going to stay the same height (with fixed elements on top it is always a good idea to know beforehand what's the maximum height the element will be at any given point).
Instead of giving hr tag a margin-top value, I would suggest you setting a margin/padding-top value on the top container of the elements that are in a scroll-able view and not fixed.
By default it will be the body element where your elements positioned normally and the fixed header / navbar is, so let's do it on it.
html,
body {
padding: 0;
margin: 0 auto;
text-align: center;
background-color: #ffffff;
width: 100%;
}
body {
/* The height of the header is around 70px (give or take) at most of the screens, since you are using percentage value for the padding-top and bottom of it */
margin-top: 70px;
}
header {
top:0;
position: fixed;
width: 100%;
padding-bottom: 1%;
padding-top: 1%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
}
https://jsfiddle.net/00w0cng6/
Or even better, to make sure things look right on every device, you either use responsive media queries to set different values for certain screen sizes or just one fixed height for your fixed element.
html,
body {
padding: 0;
margin: 0 auto;
text-align: center;
background-color: #ffffff;
width: 100%;
}
body {
/* 70px because that's the max our fixed element is going to be */
margin-top: 70px;
}
header {
top:0;
position: fixed;
width: 100%;
/* Padding top, bottom and the height of the header sums up to 70px */
padding-top: 10px;
padding-bottom: 10px;
height: 50px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
}
https://jsfiddle.net/RVKuzmik/se0etqew/3/
**CSS**
html,
body {
padding: 0;
margin: 0 auto;
text-align: center;
background-color: #ffffff;
width: 100%;
padding-top: 60px;
}
header {
top:0;
position: fixed;
width: 100%;
padding-bottom: 20px;
padding-top: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
height:80px;
}
**HTML**
<header>
<nav>
<ul>
<li>TEST</li>
</ul>
</nav>
</header>
<hr>
Just give the header a background:color:white;position:sticky And it will work fine..
What is happening is that the header has a background color which is transparent and position is fixed....This will work fine..
You can make use of position: fixed
for example:
Here's the code
I want to move the header up to the topmost. But it won't go, here's the fiddle http://jsfiddle.net/DCtH7/4/
As you see in the fiddle, there is a white space above the header. I tried padding: 0 but it won't work.
Add position: absolute to the header
header {
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: white;
width: 100%;
height: 34px;
box-shadow: 0px 3px 3px black;
margin: 0 auto;
position: absolute;
}
An example : http://jsfiddle.net/DCtH7/6/
As an alternative way change margin to padding here:
header #header-content {
padding: 10px;
}
This will also fix the problem without use any absolute position
An example : http://jsfiddle.net/DCtH7/7/
Hi i have 2 header as follow:
when i click the notification button, the drop down seems break the header layout. Following are the screenshot
The notification dropdown css are as follow
#notification_dropdown {
-webkit-box-shadow: 0 0px 13px rgba(20, 20, 20, 0.5);
-moz-box-shadow: 0 0px 13px rgba(20, 20, 20, 0.5);
box-shadow: 0 0px 13px rgba(20, 20, 20, 0.5);
background: white;
border: solid #888888 1px;
left: 300px;
width: 380px;
display: none;
float: left;
color: #444444;
}
what am i doing wrong here?
add position relative to its parent and position absolute to itself. by doing that it will come in to layering of layout and will not break your existing layout.
add position absolute like
#notification_dropdown {
position:absolute;
z-index:1;
}
and add position relative to its parent like
parent_0f_dropdown
{
position:relative;
}
I have two div likes ,
<div class="imageDiv"></div>
<div class="imageDiv"></div>
and css class ,
.imageDiv
{
margin-left: 100px;
background: #fff;
display: block;
width: 345px;
height: 220px;
padding: 10px;
border-radius: 2px 2px 2px 2px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
You can see the result Here :)
I want to overlap this two div likes ,
add to second div bottomDiv
and add this to css.
.bottomDiv{
position:relative;
bottom:150px;
left:150px;
}
http://jsfiddle.net/aw8RD/1/
See demo here
you need to introduce an additiona calss for second div
.overlap{
top: -30px;
position: relative;
left: 30px;
}
I edited you fiddle
you just need to add z-index to the front element and position it accordingly.
check this fiddle , and if you want to move the overlapped div you set its position to absolute then change it's top and left values
Why don't you use just one div and then use pseudo element :: before or ::after and set position of that pseudo element to absolute then set top: 100px and left 100px
I have been working with HTML and CSS for about 5 years now, and I am at a complete loss with this one. http://napletonlaw.connectionsquad.com/
On that page, there is a single div in that container with an ID of Clarity.
I have the CSS rules as follows:
#clarity {
text-align: center;
width: 320px;
}
The code for it is as follows:
<div id="clarity">
<img src="Resources/magnifying-glass.png" />
<p>You have questions, and we have answers. We can help break down the situation into easy-to-understand terms and clear advice. Napleton Law is here to help you!</p>
</div>
For some reason the width I apply to that DIV is not taking... In dreamweaver's preview it shrinks the div to 320px, but when previewed it does not.. I do not know why the clarity div is spanning the entire page when I set a width of 320px...
There is a missing bracket in the preceeding rule that is likely the cause of your issue.
#container {
width: 960px;
height: 800px;
margin: 0px;
position: relative;
z-index: 100;
background-color: #a0a0a0;
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 1; <--- Missing bracket
-moz-box-shadow: 0 0 10px rgba(0,0,0,1);
}
#clarity {
text-align: center;
width: 320px;
}
<div id="clarity">
<img src="Resources/magnifying-glass.png" />
<p>You have questions, and we have answers. We can help break down the situation into easy-to-understand terms and clear advice. Napleton Law is here to help you!</p>
</div>
#container {
width: 960px;
height: 800px;
margin: 0px;
position: relative;
z-index: 100;
background-color: #a0a0a0;
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 1; <--- Missing bracket
-moz-box-shadow: 0 0 10px rgba(0,0,0,1);
}
#clarity {
text-align: center;
width: 320px;
}
There is a CSS error, a missing bracket, at style -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 1;
#container {
width: 960px;
height: 800px;
margin: 0px;
position: relative;
z-index: 100;
background-color: #a0a0a0;
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 1); //Added a missing bracket here.
-moz-box-shadow: 0 0 10px rgba(0,0,0,1);
}
<div id="clarity">
<img src="Resources/magnifying-glass.png" />
<p>You have questions, and we have answers. We can help break down the situation into easy-to-understand terms and clear advice. Napleton Law is here to help you!</p>
</div>