I looking how to create menu like this http://www.panic.lv/en/ . Menu have to bi fixed in left corner, so menu can stay on scroll. When I use CSS from this website
#nav-corner {
width: 100%;
height: 5em;
position: fixed;
top: 0;
left: 0;
z-index: 800;
overflow: hidden;
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
}
I got this on mine website
http://www.awesomescreenshot.com/image/443096/8c36574b9c0461dbd40f92ecb4257485
Menu isn't in top left corner, and when I downsize width he is moving i corner, but without width:100% I'm losing my corner peace. I only could solve this using top:-170, and add height for example 220px; but that is bad solution because of responsive, on smaller resolutions I'm losing my icon.
Can somebody help me please?
Thank you!
you can use this
body{
background-color: #000000;
}
#wrapper {
width: 100%;
text-align: left;
height: auto;
min-height: 100%;
position: relative;
}
* {
box-sizing: border-box;
}
.menu-space {
position: fixed;
height: 203px;
top: 0px;
left: 0px;
z-index: 800;
overflow: hidden;
transform: rotate(-10deg) translate(-50px, -177px);
padding: 43px;
width: calc(100% + 100px);
background: #FFF none repeat scroll 0% 0%;
}
.menu-icon {
position: fixed;
height: 5em;
top: 1.25em;
left: 1.25em;
z-index: 800;
overflow: hidden;
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
}
<div id="wrapper">
<div class="menu-space"></div>
<span class="menu-icon"><img src="http://motiongiraffx.com/wp-content/themes/motiongiraffx/images/menu-icon.png" id="nav-icon" onclick="changeImage()" alt="Menu icon"></span>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
With this code you can remove top: -170px i use transform: rotate(-10deg) translate(-50px, -177px); Instead transform: skewY(-10deg); And other small changes in html and css
can see here http://liveweave.com/WQZWpX
ok for solve problem in mobile you just need add position: fixed; and width: calc(100% + 100px); to .responsive-menu class
.responsive-menu {
display: none;
position: fixed;
z-index: 900;
width: calc(100% + 100px);
}
and for solve small problem follow me
. change #media only screen and (max-width: 640px) { to #media only screen and (max-width: 630px) { in media-query.css
. add this css to media-query.css file
#media (min-width: 550px) and (max-width: 639px) {
.resp-menu-space {
height: 66px;
}
}
test it
Related
I could really use some help.
I have a 2000x1000 image png file I am using as my background for a website. It works great on a desktop. When viewing on my iphone, only the left 1/3 of the image is shown and it stacks two ontop of eachother. I have tried using background-size: auto and 100%, as well as background-attachment:scroll to no avail. I've created a proper aspect ratio image from the larger image and used media queries, but it still ends up super weird. You can find my current media in here which is supposed to detect if the resolution is < 415px to change the size to max, however this doesn't work. Ideally I would like the background to just center in the middle, maintain its aspect ratio and take up the full window height. Here is my CSS. Thanks.
*
{
margin: 0;
padding: 0;
}
.email
{
color:black;
font-size: 25px;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
body
{
background: black;
background-image: url("images/Mountains.png");
}
.html
{
width: 100%;
height: 100%;
}
.github
{
position: fixed;
top: 37%;
left: 41%;
transform: translate(-50%, -50%);
}
#items
{
transition: margin-left .5s;
padding: 20px;
}
.link_in
{
position: fixed;
top: 37%;
left: 59%;
transform: translate(-50%, -50%);
}
.loc
{
color:black;
position: fixed;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
#media screen and (max-height: 450px)
{
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
#media screen and (max-width: 415px)
{
body
{
background-color: black;
background-size: 100% 100%;
position: fixed;
top: 0;
left: 0;
bottom: 0;
/* Preserve aspect ratio */
min-width: 100%;
min-height: 100%;
}
}
#media screen and (max-width: 1100px)
{
.github {
position: fixed;
top: 37%;
left: 31%;
transform: translate(-50%, -50%);
}
.link_in
{
position: fixed;
top: 37%;
left: 69%;
transform: translate(-50%, -50%);
}
}
.sidenav
{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sidenav a
{
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover
{
color: #f1f1f1;
}
.sidenav .close
{
font-size: 36px;
position: absolute;
top: 0;
right: 25px;
margin-left: 50px;
}
.thanks
{
color:black;
position: fixed;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
}
.under_construction
{
position: fixed;
top: 37%;
left: 50%;
transform: translate(-50%, -50%);
}
I think you're trying to keep the background image fixed and responsive. You can keep the size to cover, so it will resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges. Then you can set the position to center, so if it stretches it will display the center part of the image. And keep the attachment to fixed, so when you scroll the background image is fixed.
background-size: cover;
background-position:center ;
background-attachment: fixed;
I'm trying to change the header background color for mobile screens sizes only. The below isn't working.
I'd ideally not like to change the header or header_wrap code since this is working fine. For more context, if required, I made use of this fiddle: https://jsfiddle.net/eL1cabv9 but intentionally want the header transparent for screen sizes that are not mobile size.
Please assist. Thanks!
#media screen and (max-width: 480px) {
.ico {
width: 100px;
height: 100px;
}
.header {
background: #ffffff;
}
}
.ico {
height: 300px;
width: 300px;
position: fixed;
z-index: 999;
top: 30%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
margin-left: 15px;
margin-top: 16px;
}
header {
width: 100%;
height: 60px;
position: fixed;
top: -125px;
}
.header_wrap {
width: 100%;
height: 100%;
position: relative;
}
header {
background: transparent;
}
#media screen and (max-width: 480px) {
header {
background: #FFF;
}
}
Fiddle: https://jsfiddle.net/1p86ms30/
Your code is valid but css won't work that way. Only the last mentioned style will apply to the element. Let me explain it clearly.
.box{width: 100px; height:100px; background: red;}
.box{background: green;}
<div class="box">
</div>
As you can see from this sample snippet. The background color 'Green' is applied to the box element. The css simply ignored the first line where I mentioned the bg color.
The same applies here.
your code:
#media screen and (max-width: 480px) {
.ico {
width: 100px;
height: 100px;
}
.header {
background: green;
}
}
.body{margin: 0;}
.ico {
height: 300px;
width: 300px;
position: fixed;
z-index: 999;
top: 30%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
margin-left: 15px;
margin-top: 16px;
}
.header {
width: 100%;
height: 60px;
position: fixed;
background: red;
left: 0;
top: 0;
}
.header_wrap {
width: 100%;
height: 100%;
position: relative;
}
<html>
<head></head>
<body>
<header class="header">
<div class="header_wrap">
<div class="ico">
<span></span>
</div>
</div>
</header>
</body>
</html>
The Fix:
Always write media queries at the bottom of the stylesheet.
.body{margin: 0;}
.ico {
height: 300px;
width: 300px;
position: fixed;
z-index: 999;
top: 30%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
margin-left: 15px;
margin-top: 16px;
}
.header {
width: 100%;
height: 60px;
position: fixed;
background: red;
left: 0;
top: 0;
}
.header_wrap {
width: 100%;
height: 100%;
position: relative;
}
#media screen and (max-width: 480px) {
.ico {
width: 100px;
height: 100px;
}
.header {
background: green;
}
}
<html>
<head></head>
<body>
<header class="header">
<div class="header_wrap">
<div class="ico">
<span></span>
</div>
</div>
</header>
</body>
</html>
NOTE: Check the two snippets in responsive for better understanding.
Happy Coding!
I'm using the following code to display a simple lightbox using only CSS. (I'd prefer not to use Javascript).
.lightbox {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
}
.lightbox img {
position: fixed !important;
top: 50% !important;
transform: translateY(-50%) translateX(-50%);
width: 70%;
}
.lightbox figcaption {
display: inline;
position: fixed!important;
top: 70% !important;
right: 5%;
transform: translateX(0%);
color: white;
}
#media (max-width: 500px) {
.lightbox img {
width: 90%;
}
}
#media (min-width: 800px) {
.lightbox img {
width: 50%;
}
}
<img class="img-thumbnail" src="img/sensei/kieflesson.jpg">
<a href="#_" class="lightbox" id="img1">
<figure><img src="img/sensei/kieflesson.jpg">
<figcaption>Test22</figcaption>
</figure>
</a>
As you can see I've been trying to put in a caption immediately beneath the image using figcaption. I managed to get it to display, but it isn't responsive. I want it to move with the changing image size.
Any help would be much appreciated.
Use position: absolute for image and caption. position: fixed is fine with the wrapper. Right now you have put position: fixed to all wrapper and image also.
Thanks for your help. It seems my code was a little over-complicated. I achieved the desired effect using the following:
.lightbox {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);}
.lightbox figure {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:90%;
max-width: 500px;}
.lightbox img {
width:100%;}
.lightbox figcaption {
bottom:0;
position:absolute;
color:white;
width: 100%;
max-width: 500px;
text-align: right;
padding-right: 10px;
background: rgba(0, 0, 0, 0.5);}
I was working on a little something for myself and I walked into a problem i simply cant solve. I am trying to achieve a small effect where there are 2 divs with skewed edges. However, their parent div gets a scrollbar because the skew falls outside.
HTML
<div class="c-r">
<div class=" c-c c-r-l-1">
</div>
<div class="c-c c-r-r-1">
</div>
</div>
CSS
.c-r{
display: block;
height: auto;
overflow: auto;
}
.c-c{
width: 50%;
height: 300px;
margin-top: 150px;
position: relative;
display: inline-block;
float: left;
background: #44bf86;
}
.c-r-l-1:before, .c-r-l-1:after {
content: '';
width: 100%;
height: inherit;
position: absolute;
background: inherit;
z-index: -1;
transition: ease all .5s;
-webkit-transform:skewY(5deg) ;
-moz-transform: skewY(5deg);
-ms-transform: skewY(5deg);
-o-transform:skewY(5deg) ;
transform:skewY(5deg) ;
}
.c-r-l-1:before {
top: 0;
z-index: 12;
transform-origin: right top;
}
.c-r-l-1:after {
bottom: 0;
z-index: 12;
transform-origin: left bottom;
}
.c-r-r-1:before, .c-r-r-1:after {
content: '';
width: 100%;
height: inherit;
position: absolute;
background: inherit;
z-index: -1;
transition: ease all .5s;
}
.c-r-r-1:before {
top: 0;
transform-origin: left top;
transform: skewY(-5deg);
}
.c-r-r-1:after {
bottom: 0;
transform-origin: right bottom;
transform: skewY(-5deg);
}
#media screen and (max-width: 720px){
.c-r{
display: block;
overflow: auto;
}
.c-c{
width: 100%;
}
}
I am not really sure what other info I can give you than this. I hope you all can help me out and thank you for taking your time.
~Greetings
I found the fix to my problem.
All i had to do was add:
padding-top: 5%;
padding-bottom: 5%;
The reason why it has to be 5 is because my skew is going 5 degrees!
To my outer div. everything works fine now. Thanks everyone for their time!
So I made this div for a web projet, it's 1550px wide and I want it centered, no matter the browser's window size.
So far, with margin: 0 auto; I've managed to make it center when the browser windows it at least 1550px *
But when it's smaller, the div doesn't move anymore (it sticks to the left side)
<div class="mosaic rotate-left"></div>
.mosaic { text-align: center;
position: relative;
margin: 0 auto;
width: 1550px;
height: 1550px;
}
This is maybe a bit irrelevant but since it's another class in my div :
.rotate-left {
transform: rotate(-45deg);
}
Thanks in advance !
You can use the absolute/translate trick (it will be centered whatever the width):
.parent {
position: relative; /* or absolute if you need */
}
.mosaic {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
You can do something like this...
.mosaic{
position:absolute;
top:0px;
left:50%;
margin-left:-775px; /* half of the width */
height:1550px;
}
just make sure the parent has a position:absolute/relative on it
How about combining to two aslready working solutions?
#media (max-width: 1550px) {
.inner {
position: absolute;
text-align: center;
background-color: red;
width: 1550px;
height: 1550px;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
}
#media (min-width: 1549px) {
.inner {
position: relative;
text-align: center;
background-color: red;
width: 1550px;
height: 1550px;
margin-left: auto;
margin-right: auto;
}
}