I have a navbar of bootstrap and a sidebar and I want to make this
but i obtain this
I can't make the navbar appear in front of the sidebar.
Play with z-index properly and it works good :
See it here
.navbar{
margin-top: 20px;
position: relative;
z-index:2;
}
#sidebar-wrapper {
z-index: 1;
position: fixed;
top:0;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #8CCA59;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
Use position:absolute for the navbar (you may want this in a media query so it only applies to larger screens). Then add position:relative to your #wrapper.
You can then use z-index to put the navbar "above" the wrapper...:
Relevant CSS (I added an ID to your navbar):
#navbar
{
position:absolute;
top:0;
right:0;
left:0;
z-index:100;
}
#wrapper {
position:relative;
z-index:50;
...
https://jsfiddle.net/ebvqcq26/
Related
I am trying to build menu bar for my first website. On the window resolution of 1280x800 menu is seen properly. However, when scaling it down, Menu starts aligning incorrectly.
HTML:
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'home/style.css' %}"/>
<div class="menu">
Buy Cherry
</div>
CSS:
body {
background-color: lightgrey;
}
.menu {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: white;
min-height: 10%;
min-width: 150%;
}
.logo {
position: fixed;
top: 0%;
left: 0%;
right: 0%;
background-image: url('http://i.imgur.com/kMdEoP6.png');
width: 250px;
height: 55px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.logo:hover {
background-image: url('http://i.imgur.com/7d2V63b.png');
width: 249px;
height: 55px;
}
.shopbtn {
position: fixed;
font-size: 12pt;
right: 10%;
left: 23%;
top: 5%;
white-space: nowrap;
color: black;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
float: right;
}
.shopbtn:hover {
color: darkred;
I have tried adding margin-left and margin-right with auto statement on all the elements, but the menu would mess up and still would go incorrectly when resized.
What is solution for keeping navigator proper when scaled? Is there any layout that could solve the problem? Can this be done without use of Javascript?
Just remove position fixed from both logo and shopbtn and add float left as below,
.logo {
float:left;
}
.shopbtn {
background:#666666;
float:left;
margin:20px;
}
Now adjust your padding and margin accordingly.
You can add min-width to the <body> tag and set your desired width size. It can help maintain your page size whenever you try to scale it down.
body {
background-color: lightgrey;
min-width: 800px;
}
Edit: Try changing your .logo's position to relative.
body {
background-color: lightgrey;
}
.menu {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: white;
min-height: 10%;
min-width: 150%;
}
.logo {
position: relative;
top: 0%;
left: 0%;
right: 0%;
background-image: url('images/logo.png');
width: 250px;
height: 55px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.logo:hover {
background-image: url('images/logohover.png');
width: 249px;
height: 55px;
}
<link rel="stylesheet" type="text/css" href="{% static 'home/style.css' %}" />
<div class="menu">
Logo
Buy Cherry
</div>
Update: Change the .logo's position to relative. Maybe this is the one that you are looking for.
I have a fixed nav bar running the length of my website, but just now it currently has it's own scrollbar, so when i scroll on the body of the website, the navbar is static, and will only scroll if i physically scroll over the navbar itself.
Is this just the outcome of 'position: fixed;' or am i missing something in my CSS?
body {
margin: 0;
padding: 0;
color: #555;
font: normal 1.3em Arial,Helvetica,sans-serif;
background-color: #FAFAF0;
font-family: "proxima-nova",sans-serif;
display: block;
}
/*NAVBAR*/
#sidebar-wrapper {
position: fixed;
background: #2C4649;
z-index: 1000;
left: 0px;
height: 100%;
margin-left: 0px;
border: none;
display: block;
-moz-border-radius: 0;
-o-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
overflow-y: auto;
overflow-x: hidden;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*PAGE CONTENT TO THE RIGHT OF NAVBAR*/
#page-content-wrapper {
margin-top: 20px;
overflow: hidden;
margin-left: 130px;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
overflow-y: auto;
}
Does anyone know how to fix this so the full height of the website is dependant on either the navbar content or page content - rather than being separate scrollable items?
Thanks
Not exactly sure what you're after, but here's an example fiddle.
All I did was this rule: #sidebar-wrapper{overflow-y:hidden;} which will remove any scrollbar in the fixed element. This means that if there is too much content in the navbar, it will be cut off and not visisble (hence "hidden"). If you are already experiencing a scrollbar in the fixed nav bar, it means you have too much content in it, so this might not be the best solution for you.
Then I added a fixed width of the sidebar to match the margin offset of your content.
I have a couple of questions regarding my current vertical menu. My first question is regarding the placing of my menu. My screen is too small for me to see if my changes have worked or not, but I want it so the vertical menu does not separate from the main content. The actual site that I am working on can be found at www.mecostaosceolacourts.org. That is the current live version that has not been changed. The code that I am specifically talking about can be found below and has been changed to hopefully solve my problem:
/*Side Menu Bar*/
#wrapper {
padding-left: 0;
/*remove the following
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
*/
}
/*remove
#wrapper.toggled {
padding-left: 250px;
}
*/
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: rgba(255,255,255,0.6);
/*remove the following
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
*/
}
/*remove
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
*/
Where I've said "remove" is the code I believe taking out would alleviate my problem.
My second question regards to adding submenu's to the specific code. I've tried left and right I feel like to add submenu's and the code seems to not want to have it. Is there something that I am missing?
I've only posted one other question on here, so I hope I'm doing it right and not stepping on toes. Any help would be greatly appreciated!
I have a container div which in order to make it fluid in relation with the width of the window (and keep square proportions) has the following css:
JSFIDDLE
#container {
width:30%;
height:0;
padding-bottom:30%;
position: relative;
}
it has an inner div with a fixed height and width that should become 100% (both) with a transition when hovering:
#inside {
position:absolute;
top:0;
left:0;
width:30px;
height:30px;
-webkit-transition: width 0.4s, height 0.4s;
-moz-transition: width 0.4s, height 0.4s;
-o-transition: width 0.4s, height 0.4s;
-ms-transition: width 0.4s, height 0.4s;
transition: width 0.4s, height 0.4s;
}
#container:hover #inside {
width: 100%;
height:100%;
}
In Chrome,Firefox,Opera,Safari there is no problem. Internet Explorer 10 however, doesnt transitions the height value, so there is a jump.
Is there a way I can solve this for ie10 without touching the structure of the divs (padding-bottom in parent div)?
Try making the following changes to #inside:
Add min-width: 30px; and min-height: 30px;
Change width: 30px; to width: 1%; and height: 30px; to height: 1%;
#container:hover #inside {
height: 100%;
width: 100%;
}
#container {
background: black;
height: 0;
padding-bottom: 30%;
position: relative;
width: 30%;
}
#inside {
background: pink;
height: 1%;
left: 0;
min-height: 30px;
min-width: 30px;
position: absolute;
top: 0;
-webkit-transition: width 0.4s, height 0.4s;
-moz-transition: width 0.4s, height 0.4s;
-o-transition: width 0.4s, height 0.4s;
-ms-transition: width 0.4s, height 0.4s;
transition: width 0.4s, height 0.4s;
width: 1%;
}
<div class="out" id="container">
<div id="inside"></div>
</div>
JS Fiddle: http://jsfiddle.net/r8rjhy9v/
For IE 10...
After some considerable experimentation I've come to the following conclusions:
using calc() with the height: property causes IE10 to at least
ignore the transition-property:height effect.
the max-height:property acts as a mask, where the size of the element is really what the height: property declares it to be but only up to the max-height: property size is visible.
the transition-property:height effect starts from the full height: of
the element (this is noticeable as a lag as the hidden part of the
element transitions under the mask)
you need to use both height: and max-height: to get transition-property:height to work at all.
http://jsfiddle.net/Neoheurist/5ax5o1ge
HTML
<div class='accordion'>
<section class='sash greedy'>
</section>
</div>
CSS
.accordion {
background:black;
height:10.0em;
}
.accordion .sash {
background:red;
height:2.0em;
max-height:calc(100% - 2em);
transition-property:height;
transition-duration:1000ms;
}
.accordion .sash.greedy:hover {
max-height:calc(100% - 2em);
height:100%;
}
Probably not the first time you see this question... but I can't solve this problem.
Here is live version
http://jsfiddle.net/LndEh/
If you change height for .projectwrap, you will see what I am trying to achieve. I have tried add clearfix etc.
HTML
<div class="projectwrap">
<img src="http://www.vectortemplates.com/raster/superman-logo-012.png">
<div class="inner"><span>sometext</span></div>
</div>
<div class="projectwrap">
<img src="http://www.vectortemplates.com/raster/superman-logo-012.png">
<div class="inner"><span>some text</span></div>
</div>
<div class="projectwrap">
<img src="http://www.vectortemplates.com/raster/superman-logo-012.png">
<div class="inner"><span>some text</span></div>
</div>
CSS
.projectwrap
{
position: relative;
width: 28%;
height:auto;
float:left;
}
.projectwrap img
{
position: absolute;
width: 100%;
}
.inner
{
width: 100%;
height: 100%;
background-image: url(http://goodlogo.com/images/logos/batman_logo_2574.gif);
background-size: cover;
position:absolute;
z-index: 11;
opacity: 0;
-webkit-transition: opacity 400ms linear;
-o-transition: opacity 400ms linear;
-moz-transition: opacity 400ms linear;
transition: opacity 400ms linear;
}
.inner a
{
float:left;
text-align: center;
display:table;
width: 100%;
height:100%;
}
.inner a span
{
display: table-cell;
vertical-align: middle;
width:100%;
height:100%;
color:#fff;
text-align: center;
text-transform: uppercase;
}
.inner:hover
{
opacity: 1;
-webkit-transition: opacity 400ms linear;
-o-transition: opacity 400ms linear;
-moz-transition: opacity 400ms linear;
transition: opacity 400ms linear;
}
Since the containers are floated and contain absolutely positioned images, they have no height and will float over each other.
If you want all three logos to appear, change the CSS for the images to position:relative
.projectwrap img {
position: relative;
width: 100%;
}
http://jsfiddle.net/LndEh/1/
EDIT:
Another method, if you need to use position:absolute on the images:
Set a minimum height for the .projectwrap divs so that they don't collapse to zero height.Then they will float as expected.
.projectwrap {
position: relative;
width:28%;
float:left;
min-height:5px;height:auto!important;height:5px;
}
http://jsfiddle.net/LndEh/2/
EDIT:
For the additional three (hidden) images, I have changed from using a background image to using the same 100% width method you used for the superman logos. I placed the links over the image by positioning them absolutely.
.inner {
position:relative;
width: 100%;
...
}
.inner a {
position:absolute;
...
}
http://jsfiddle.net/LndEh/3/
EDIT:
I think I see now what you're going for.
I switched from using background-image on .inner to using <img /> and kept your elements positioned absolutely. Does that work better?
http://jsfiddle.net/LndEh/7/