I've got a stylesheet where the intention is to have a fixed navbar which stays at the top of the screen no matter how far you scroll down. For this I've just used position:fixed; - but when I actually scroll down, the #content div overrides it and goes straight over the top (so the navbar stays at the top of the page but is underneath the content div.)
I haven't done any serious CSS coding in years, so I'm a bit rusty - it's probably a very simple solution, so apologies for being so trivial!
style.css
body {
margin:0;
background:#eeeeee;
}
#navbar {
background-color:#990000;
position:fixed;
width:100%;
height:50px;
text-align:center;
vertical-align:middle;
line-height:50px;
top:0px;
}
#navbar a {
color:#fff;
}
#content {
background:#eeeeee;
margin-top:50px;
width:100%;
}
#feed {
background: #fff;
position:absolute;
left:22%;
width:776px;
}
Pages are structured like this:
<body>
<div id="navbar"><?php include core/navbar.php; ?></div>
<div id="content">
<div id="feed">
CONTENT
</div>
</div>
</body>
In order to fix this you need the property z-indexdefined by W3 that specify the level of the element. Try this:
#navbar {
background-color:#990000;
position:fixed;
z-index:1; /*Add this*/
width:100%;
height:50px;
text-align:center;
vertical-align:middle;
line-height:50px;
top:0px;
}
If you're using Bootstrap 4, the .navbar background is clear and can be covered by some elements. Setting the z-index won't work. Use a background color, e.g., .bg-white.
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-white">
To fix the override issue use CSS z-index Property
z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) .
#navbar {
background-color:#990000;
position:fixed;
z-index: 1;
width:100%;
height:50px;
text-align:center;
vertical-align:middle;
line-height:50px;
top:0px;
}
Sometimes if you use z-index -1 in order not to let the element pass over the fixed nav bar this thing solves the problem but at the same time another problem arises, now on the element which we gave z-index:-1, hover will not work.
So to take care of these things we must use index 0 at the element and in the fixed nav bar we need to use z index 1. then all things will be sorted.
Related
I'm trying to achieve something that I'm not sure is supposed to be possible at all. Note that I'm looking for a CSS-only solution, I know I can solve this with JS, but I don't want to.
Consider the following pen:
https://codepen.io/fchristant/pen/PjoKOq
The second navigation bar (dark) is sticky, as you scroll down, it will stick to the top of the viewport. The first navigation bar (light) is not sticky, it will simply scroll away.
However, that light navigation bar has a child element that is sticky. The idea is that the parent will scroll away, yet the child sticks, effectively blending with the second navigation bar (which is sticky).
This does not work, however. Hence my question: is it possible at all to have a sticky child element inside a parent that is not sticky?
HTML:
<div class="site_header">
Site header
<div class="site_header_child">
sticky
</div>
</div>
<div class="site_nav">
Site header
</div>
CSS:
.site_header {
display:flex;
position:relative;
width:100%;
padding:10px;
background:#eee;
}
.site_header_child {
border:1px solid red;
margin-left:auto;
position:sticky;
z-index:2;
top:0;
right:20px;
}
.site_nav {
display: block;
position:sticky;
padding:10px;
background:#333;
color:#fff;
position:sticky;
z-index:1;
top:0;
}
It is not possible to use sticky in such case. The same effect can be achieved by other means though. You can simply use "fixed" positioning and the sticky child will stay were it was.
.site_header_child {
position:fixed;
top:10px;
background:#eee;
}
Demo: https://codepen.io/anon/pen/VMWovv
You can try adding display: contents; to the parent to make it act as the parent.
The .site_header_child will only stick for the duration of its parent element's height.
You will need to give the .site_header_child element a fixed position if you want it to appear in the second bar.
try it:
-> instead of top: 0 => top: 10px
.site_header_child {
border:1px solid red;
margin-left:auto;
position:sticky;
top:10;
z-index:2;
right:20px;
}
.site_nav {
display: block;
position:sticky;
top:10;
padding:10px;
background:#333;
color:#fff;
position:sticky;
z-index:1;
}
Just a little question :
.site-main .sidebar-container {
display:inline-block;
vertical-align:top;
width:25%;
padding:0px;
margin:0;
border:0;
z-index:2;
float:right;
}
.content-area-sidebar{
width:75%;
display:inline-block;
}
why this widths don't work? one of the elemnts always goes down, i need to set 24.79% width to work and then i have a small blank space between them, i have tried with all kind of float combiantions but nothing works.
Any help would be appreciated.
Thank you
set margin:0px to your second css too:
.content-area-sidebar{
width:75%;
display:inline-block;
margin:0px;
}
by ht way if it doesn't work I suggest you use a div as parent container with position relative and child divs have position absolute so never gets mixed up:
<div style="position:relative">
<div style="width:25%;top:0px;left:0px;position:absolute;"></div>
<div style="width:75%;top:0px;left:25%;position:absolute;"></div>
</div>
I'm having problems getting my footer to stick to the bottom of the page when there are position absolute elements in the main container. Here's a fiddle to demonstrate.
<div class="content-wraper">
<div class="side-nav"></div>
</div>
<div class="footer"></div>
.content-wraper {
background-color:blue;
min-height:100px;
position:relative;
width:500px;
}
.side-nav {
background-color:red;
height:3000px;
position:absolute;
top:0px;
left:0px;
width:200px;
}
.footer {
background-color:black;
position:absolute;
bottom:0px;
width:200px;
height:50px;
}
Change position: absolute; in .footer to position: fixed;
Updated fiddle
UPDATE
To fix the footer to always be below the absolutely positioned side-nav using jQuery try this:
$(".footer").css("top", $(".side-nav").height());
Example Fiddle
absolute positioning refers to window size, not content size, so if content is higher than window, you won't get the effect you want.
Try different approach:
sticky footer
This css has been somewhat difficult to figure out...Basically what I want is what is in this picture, but with dynamically changing content.
so I set up my html like this, basically all the elements are piled into the wrapper, the pictures and titles will be dynamically rotating and will be different widths and heights:
<div id="wrapper">
<div id="title"><h2></div>
<div id="image"><img></div>
<div id="leftbutton" class="but"><img></div>
<div id="rightbutton" class="but"><img></div>
</div>
Everything I have tried Hasn't worked out. how should I go about this?
The closest I have got is this, but the title field can change heights and that makes this method not work, since, I have to position the image relatively and its relative position changes with the title element growing and shrinking:
#wrapper{
position:relative;
text-align: center;
}
.but{
z-index:20;
position:absolute;
}
#leftbutton{
left:0px;
}
#rightbutton{
right:0px;
}
#title{
z-index: 3;
display: inline-block;
width:auto;
min-width: 80px;
max-width: 340px;
}
#image{
z-index: 1;
position: relative;
top:-21px;
}
If you mean the Title in the center use this way:
#title {
margin: 0 auto;
width: /* your width */
}
the position should be relative at the wrapper.
JsFiddle UP
I just reorganized the body structure, adding one more div and floating everything.
Then inside the central section I added title and image that you can style to be centered to the relative div.
If you provided some example code we would better be able to assist you. In the meantime, the following code should take care of what you're looking for:
HTML
<div id="wrapper">
<div id="title"><h2>Article Headline</h2></div>
<div id="image"><img></div>
<div id="leftbutton"><img></div>
<div id="rightbutton"><img></div>
</div>
CSS
#wrapper {
background:#6cb6d9;
display:inline-block;
position:relative;}
#title {
position:absolute;
top:0;
width:100%;
text-align:center;}
#title h2 {
background:green;
color:white;
padding:10px 15px 10px 15px;
display:inline-block;
max-width:200px}
#image {}
#image img {
min-width:200px;
height:300px;
width:500px; }
#leftbutton {
position:absolute;
left:0;
top:0;
height:100%;
width:75px;
background:black;}
#rightbutton {
position:absolute;
right:0;
top:0;
height:100%;
width:75px;
background:black;}
Though instead of hardcoding the img size, just remove those lines of CSS to have the div automatically adjust to the default size of the img.
http://jsfiddle.net/b7c7c/
None of these solutions worked correctly, ultimately the way to get it to work is with this trick: How to center absolutely positioned element in div?
Then you just position all elements absolutely within the wrapper and the sub elements relatively as seen in the post
I hope this is not a repost! I have looked everywhere and so I am sorry if it is.
I have a header div that is position:fixed and it has some image links and a login div. Since the position:fixed is relative to the window, whenever I resize the windows to test liquidity, the content in the header div gets jammed and starts to drop down the page.
Is there anyway to get a horizontal scroll bar to appear and remove the space? I have min-width set on the body and the header div but no luck. I am not coding for IE at the moment and only using latest Chrome and Firefox for testing now.
Thank you for any help!
CSS:
body {
min-width:1000px;
padding-top:0;
padding-bottom:0;
margin:0;
background-color:#022F00;
}
.container {
padding: 0;
margin-left:auto;
margin-right:auto;
height:100%;
margin-top:160px;
}
.header {
width:inherit;
padding:5px;
position:fixed;
left:20px;
right:20px;
top:15px;;
min-width:850px;
}
.login {
float:right;
padding:0;
margin:0;
border:0;
position:relative;
}
img {
margin:0;
border:0;
padding:0;
}
a {
margin:0;
border:0;
padding:0;
}
HTML:
<body>
<div class="container">
<div class="header" id="titlebar"><img src="title.jpg" /><img src="newaccount.jpg"><img src="newarticle.jpg">
<div class="login" id="logindiv">content</div>
</div>
</div>
</body>
i found this solution, it may help you
Set a min-width to your container:
#container { min-width: 1000px;}
you may want to check this link
Two divs floating left and right: How can I keep them on the same level when a page resizes?
it was an answer to
"Two divs floating left and right: How can I keep them on the same level when a page resizes? "follow this link