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!
Related
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/
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.
If you see the code here https://jsfiddle.net/ojagwxc0/ the following is not working :
.parallax > div .txparallax a {
position: absolute;
top: 50%;
right: 0;
margin-top: -49px;
display: inline-block;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: #3498db;
width: 126px;
height: 126px;
line-height: 126px;
text-align: center;
overflow: hidden;
-moz-transition: 0.5s all ease;
-o-transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
}
All I want to see is any kind of "movement" for the words "Select", "Fishing Tackle You Need" & "Mes cuml dia sed inenias ingerto lot aliiqt dolore ipsum commete".
What am I doing wrong? Please advice.
Try somthing like this. For a transition to work you need to be moving it somehow, for example here I'm, moving it from left:0px; to left:400px on hover:
https://jsfiddle.net/ojagwxc0/2/
.parallax > div .txparallax {
width: 100%;
padding-right: 150px;
display: inline-block;
position: relative;
left:0px;
}
.parallax > div .txparallax:hover{
left:400px;
-moz-transition: 0.5s all ease;
-o-transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
}
you should add an action on hover for ex:
a:hover{
background-color:red;
}
working fiddle : https://jsfiddle.net/ojagwxc0/1/
I developed a sidebar. However I have a issue that the button required to open the sidebar gets invisible on mobile devices. If you know the position you can click on it and it works. The button to hide it works fine.
Here is a link to the website:
https://gdi.ethz.ch/jenkins/pages/current.html
And here the relevant html:
<div id="wrapper" class="container container-fluid col-md-12">
<header><nav id="sidebar-wrapper">
<ul class="sidebar-nav">
Some menue
</ul>
</nav>
</header>
<div id="main">
the site content
</div>
<footer></footer>
</div>
And the css code:
#menu-toggle {
position: fixed;
overflow:hidden;
z-index: 1100;
background-color: #009bf0;
color: white;
top: 0;
left: 249px;
padding-left: 10px;
padding-top: 3px;
width: 40px;
height: 40px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #menu-toggle {
left: 0px;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#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: #009bf0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
Because the element is in a fixed position it is getting cut off when your screen gets smaller on mobile.
You'll either need to adjust how it handles the viewport or have its width adjust with the screen.
The problem is that the was inside the fixed #sidebar-wrapper. This resulted in an issue in chrome mobile. By moving the #menu-toggle outside the #sidebar-wrapper everything worked fine.
I'm trying to create simple auto-hide menu/header with css. I use transition but I think this is not a point here.
When I hover header is should slide down and show whole content, when I move mouse away it should slideup. It works for me. I want also screen content to expand when header is slidedup. This is mayor problem. The only way I know to have div expanded on whole page (screen) is to fix its top, bottom, left & right. It does not work when top value is changing.
Please look at my code example:
http://jsbin.com/ahamid/2/edit
The green part is problematic. I tried to fix it with changing top value on hover - but it does not work when mouse is outside of content & outside of header too.
Below is code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="main">
<div id="head">
<span> header </span>
</div>
<div id="content">
<span>
test content
</span>
</div>
</div>
</body>
</html>
and css:
body {
position: relative;
}
#main {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: white;
}
#head {
display: block;
height: 50px;
top: -44px;
right: 0px;
left: 0px;
background-color: #fcc;
margin: 0px 3px;
position: absolute;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
#head:hover {
height: 50px;
background-color: red;
top:0px;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
}
#content {
background-color: cfc;
position: absolute;
top: 50px;
bottom: 0px;
left: 0px;
right: 0px;
margin: 3px;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
}
#head span {
color: black;
font-weight: bold;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
#head:hover span {
color: yellow;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
}
#content:hover {
top: 6px;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
I think that the problem is that you set the #content as you want it to be on hover.
What you really want is that it is always that way, and only change it (downwards; increasing top) in the hover of the #head
Change the #content to:
#content {
background-color: cfc;
.....
top: 6px;
.....
}
and modify the top in the hover of the head:
#head:hover ~ #content {
top: 50px;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
You can do that because head and content are siblings, so you can use the sibling selector.
This way it behaves correctly, the only strange thing comes from the transitions timing being different, but you can manage this :-)