I have a nav that I want to turn into a modal using a CSS class toggled by javascript. The thing is, because it's a complex layout I can't change the HTML structure I have currently, since this is only for mobiles using mediaquery.
The idea is that the nav looks a certain way (i.e, without the modal class applied) but I will integrate a button which applies the class "modal" to the nav tag, to make the nav tag into a modal box which covers the whole screen.
Here is my code showing how it will look with the nav with the modal class applied: https://jsfiddle.net/spadez/fxnzdofh/3/.
Here is my question / issue. Keeping the same HTML structure, how can I change the modal css to make the blue box from the very top left of the screen, and not instead under the green header bar. The end result is the entire screen blue from corner to corner.
This is the code I tried but didn't give me the result I wanted:
.modal {
position: absolute;
width: 100%;
height: 100%;
background-color: blue;
z-index: 1;
}
Keeping the same HTML structure, how can I change the modal css to make the blue box from the very top left of the screen?
You forgot to add top and left to position it from the top:
.modal {
position: absolute;
width: 100%;
height: 100%;
background-color: blue;
z-index: 1;
top: 0;
left: 0;
}
Fiddle: https://jsfiddle.net/mfjsomca/
Related
I have created a top navigation with these styles below:
div.topnav
{
position: fixed;
width: 100%;
height: 50px;
display: inline-block;
}
And I want to render a object, but that is being displayed behind my top bar, check it out on the image below:
What can I do to fix this?
From the image you provided I believe that what is happening is that your <p> is being rendered behind your topbar
if you add something like:
p {
margin-top: 60px;
}
you should be able to see it!
I'm using 60 because it would be 50 from the topbar height + 10 for a small padding
i have a small problem with my side nav bar in ltr i made it responsive by adding a button to toggle and un toggle it and also i used media query to hide it if it is under 700px and only show the toggle button so that the user could press it and then the side nav will appear so that he could navigate and its style is the same as if it is more than 700 px keep in mind that i want it to be with its same style i don't want to converte it into top nav or smthg after that is explained this is the noraml view at more than 700px
but when i resize my window to be less than the full window scree of the desktop it looks like this
in en version it still has the same width and all but in ar version as you can see it looks like this and the reason why this is happening is because of the poistioning in css the ltr version is by default poistioned to the left but in rtl it should be manually poistioned
my css is too long so that i will only share the poistioning part if you want me to share it all it is ok but it might waste your time because as i said before its too long
ar positioning css
.page-wrapper.toggled .sidebar-wrapper {
left:80%;
}
en
.page-wrapper.toggled .sidebar-wrapper {
left: 0px;
}
working (expected resault but this one is on the left side i want it to be at the right side)
https://jsfiddle.net/r52nhfb4/2/
have the poistioning problem
https://jsfiddle.net/r52nhfb4/1/
keep in mind that i am using laravel so all the weird text and stuff are laravel syntax
just change the below given css:
.sidebar-wrapper
{ width: 260px;
height: 100%;
max-height: 100%;
position: fixed;
top: 0;
right: -300px; /*change this */
z-index: 999;
}
.page-wrapper.toggled .sidebar-wrapper
{
right:0; /*change this */
}
check out my answer:https://jsfiddle.net/zLy8xhfb/
I've got a site which is about to hit a traffic milestone. As we countdown to our millionth visitor, I thought it would be fun to move my stats widget from the right sidebar, and nest it in the corner of my site header element.
So far, I've managed to use this CSS to move the Widget out of the side menu... but I'm really struggling to figure out how to put this element into another div.
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
This popped the widget out of the sidebar, and made it hover always in the corner. Neat...
My goal though, is to move that widget into this spot
Following this guide from the W3 Schools page, I've tried to nest the widget into the div I want it to go inside of (which is called header.site-header)
Here's the element I want it to go inside:
If I set it's position absolute and fiddle with sizing, I can shove it where I want it to go, but this doesn't look good for tablets or mobiles.
#blog-stats-2 {
position: absolute;
top: 75px;
right:5px;
width: 300px;
border: 3px solid #73AD21;
z-index:5;
}
Is there any keyword I'm missing to nest this in the corner of the site-header div?
You'll need to move your hit counter into the header HTML first before using position: absolute; otherwise it simply won't work. Try something like this.
You'll need to work this into your HTML code.
<header class="site-header">
<div id="blog-stats-2">
<!-- code here -->
</div>
</header>
Then your CSS like this.
header.site-header {
position: relative;
}
#blog-stats-2 {
position: absolute;
right: 20px;
bottom: 20px;
z-index: 123;
}
What that does is moves your hit counter into the header section and positions it absolutely to the bottom right of the header. Using position: relative; on a parent container and position: absolute; on a child element will make sure the top, right, bottom and left attributes are relative to the parents location all the time.
For mobile you'll need to change this further using media queries to make sure it sits inside the header nicely.
#media screen and (max-width: 768px) {
#blog-stats-2 {
left: 10px;
right: auto;
bottom: 10px;
}
}
I have a website here with a sidebar, but I want the sidebar to be hidden until the user clicks on a menu button. Anyways, my .sidebar is on z-index: 0; while my .page-content is on z-index: 1;. Why is the sidebar not hidden when I load the webpage? I have nothing in my page-content except for a <h1> for testing purposes.
Here is my HTML file:
<!DOCTYPE html>
<head>
</head>
<body>
<div class = "page-wrapper">
<div class = "page-content">
<h1>Test</h1>
</div>
<div class = "sidebar">
<ul>
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
</ul>
</div>
</div>
</body>
</html>
And here is my CSS file:
h1 {
/* Just to centre my text */
position: relative;
left: 50%;
}
.page-content {
position: relative;
z-index: 1;
}
.sidebar {
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
width: 120px;
padding: 30px;
background: #333;
z-index: 0;
}
So why isn't my sidebar being hidden when I load the webpage? When I load this, I can see the sidebar and the "Test" text both.
EDIT:
I see many of you have said that the z-index is not for hiding stuff. I am not trying to hide the sidebar. When the user clicks on the menu button, I want the page to slide over to reveal the sidebar, hence the reason I am using the z-index and not display: none;.
EDIT:
Some of you have said that this is a duplicate from another question, but when you read my comments, please realize that the question I am asking, is quite different. I am going to try to explain what I am attempting to do here as simply as I can. I have a website, where a user clicks on the menu bar, the entire website transitions 180px to the right, thus revealing the sidebar that is fixed underneath. You guys mentioned that my .page-content needs a background, but like someone else said, it only takes up my background as big as the objects inside are. How or where can I set a background that will move, yet still cover the sidebar completely?
Firstly, your z-index IS working.
z-index is not responsible for making an element visible or not. (For that, you can use the opacity,visibility, or display properties.
z-index can be used to position elements behind other elements with opaque backgrounds, which may make them appear hidden (pun intended), but rest assured, the element is still there.
Your CSS has no elements with opaque backgrounds with z-indicies higher than 0 that sit on top of .sidebar, so that's why you see it.
Your sidebar is not hidden because your .page-content doesn't have a background. Put a background and add this CSS:
.page-content{
background: #fff;
height: 100%;
width: 100%;
}
This way, you'll be able to slide it to then side afterward.
Add background to .page-content you will see the z-index's effect.
A better approach would be to hide the side bar with left property as some negative value, for example -100px as below.
.sidebar {
position: fixed;
left: -100px;
top: 0px;
bottom: 0px;
width: 120px;
padding: 30px;
background: #333;
z-index: 0;
}
and when the user clicks the menu icon set left: 0px using javascript.
I have this site:
http://dl.dg-site.com/functionmentes/
There is a div with color #D9D9D9
Code CSS:
#full_bar{background:#D9D9D9;width:100%;height:100px;}
I want to my div to be the full width site and to be glued to footer.
How can i make this?
I use a theme in Wordpress.
Thanks in advance!
By making the position fixed, this will ensure that it will follow the user as they scroll up and down your website.
#full_bar {
background: #d9d9d9;
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
left: 0;
}
If you add position:absolute; left: 0; to the css, the bar will more or less do what you're trying to do, but it's a dirty hack.
The real problem is that you're adding your 'full_bar' in the wrong place (inside a div which restricts the width). Personally I would opt for placing the full-bar in your <footer> tag.
You should placed your gray bar outside the section, between section and footer or on footer on html.
But if you want a css solution, you need to put your section parent to position relative and set your gray bar on absolute bottom with full width:
section {
position: relative;
padding-bottom: 100px; // Your bar height
}
#full_bar{
background:#D9D9D9;
width:100%;
height:100px;
position: absolute;
bottom: 0;
left: 0;
}
You are putting #full_bar inside class="container". container is the parent of div id #full_bar, that's why its not taking full width.
Do your code outside contaner class and you can see the changes.
See the attachment, i think you want this as per i understand your question.