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.
Related
I need to show title in two line.
Like it shown in below image.Second Item is fine but first Item is coming is single line that I dont want
.ms-tileview-tile-titleTextMediumCollapsed {
width: 120px !important;
top: 80px !important;
-webkit-transition: top 0.5s ease-out;
-moz-transition: top 0.5s ease-out;
-o-transition: top 0.5s ease-out;
text-align:center;
line-height: 1.5em;
height: 3em;
overflow: hidden;
}
<div class="ms-tileview-tile-titleTextMediumCollapsed">Group Members</div>
<div class="ms-tileview-tile-titleTextMediumCollapsed">Temp Document Library</div>
You could change the width:
width: 80px !important;
is it that important?
If you don't whant to change the width, you could put a <br/> in the middle of the title.
<div class="ms-tileview-tile-titleTextMediumCollapsed">Group <br/> Members</div>
Here is another way you can achieve it although leo's answer is simple and elegant.
.ms-tileview-tile-titleTextMediumCollapsed {
top: 80px !important;
-webkit-transition: top 0.5s ease-out;
-moz-transition: top 0.5s ease-out;
-o-transition: top 0.5s ease-out;
text-align:center;
line-height: 1.5em;
height: 3em;
overflow: visible;
word-wrap: break-word; // word break with overflow display
max-width: 120px;
}
please check out the link.
https://jsfiddle.net/sarojsasmal/6ce9ym4n/4/
You can easily achieve this by changing the elements width.
But if you don't want to mess with the width, then simple solution is to use padding and box-sizing: border-box properties.
Like this:
.ms-tileview-tile-titleTextMediumCollapsed {
width: 120px !important;
top: 80px !important;
-webkit-transition: top 0.5s ease-out;
-moz-transition: top 0.5s ease-out;
-o-transition: top 0.5s ease-out;
text-align:center;
line-height: 1.5em;
height: 3em;
overflow: hidden;
padding: 0 20px;
box-sizing: border-box;
}
<div class="ms-tileview-tile-titleTextMediumCollapsed">Team Members</div>
<div class="ms-tileview-tile-titleTextMediumCollapsed">Draft Document Library</div>
So you want "Team Members" to be on two lines? But keep everything else?
I would wrap those words in a wrapper that way you don't have to repeat that class on ever menu item. I don't know how much you can customize the html but this might work better for you:
HTML
<div class="title-container">
<span class="two-line-title">Team Members</span>
<span>Draft Document Library</span>
</div>
CSS
.title-container {
width: 120px !important;
top: 80px !important;
text-align:center;
line-height: 1.5em;
overflow: hidden;
transition: top 0.5 ease-out;
}
.title-container span {
display: block;
margin: 0 auto;
}
.two-line-title {
width: 70px !important;
line-height: 1.2em;
}
http://codepen.io/StefanBobrowski/pen/ryRRRv
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'm working on this website template and I keep running into issues. My biggest one right now is that when the fixed header goes over the content boxes, the semi-transparent boxes overlap the header until the user hovers over the box and causes it to return to an opacity of 1. I'm not sure why it does this and I'm really desperate to get this fixed. Any help is appreciated.
Here's a snippet relating to my content boxes:
#wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
-o-transition: .25s;
-ms-transition: .25s;
-moz-transition: .25s;
-webkit-transition: .25s;
transition: .25s;
opacity: 0.5;
}
#wrapper:hover {
width: 960px;
margin: 0 auto;
text-align: left;
opacity: 1;
}
And here's the full fiddle: http://jsfiddle.net/rkgy5zvz/
#nav {
position: fixed;
background-color: #222;
opacity: 1;
width: 100%;
top: 0;
z-index: 99999;
}
Just add the z-index property with the proper number. Here the JSfiddle
I'm trying to create a zoom effect by using CSS transition to grow an image inside a fixed size container on hover. The container frame has a border and padding, and I would like them to stay when the image grows. The problem is that when it grows, the padding on the right and bottom disappear.
Here is the CSS code:
.videoframe {
width: 200px;
height: 113px;
border: solid 2px;
border-radius: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding: 10px;
overflow: hidden;
}
.videoframe img {
border-radius: 20px;
width: 200px;
height: 113px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.videoframe img:hover {
width: 300px;
height: 168px;
overflow: hidden;
}
And here the HTML code:
<div class="videoframe"> <img src="image.jpg" /> </div>
Is there any way to maintain the 10px padding all the way around the image when it changes size?
I've transfered the transition to the frame (when the frame gets hovered, the transition kicks in).
Working Fiddle
HTML: (another div added)
<div class="videoframe">
<div>
<img src="http://www.ac4bf-thewatch.com/initiates/upload/20130909/big_522e1c989c94f.jpg">
<div>
</div>
CSS
.videoframe
{
width: 200px;
height: 113px;
border: 2px solid black;
border-radius: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding: 10px;
}
.videoframe div
{
border-radius: 20px;
width: 100%;
height: 100%;
overflow: hidden;
}
.videoframe img
{
width: 100%;
height: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.videoframe:hover img
{
width: 300px;
height: 168px;
}
sorry I'm a little bit confused, do you want the parent container to expand with the image?
if so please see http://jsfiddle.net/NcaAA/
you can use
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
with
padding:10px;
to keep consistent padding that takes into account the total width and height you want.
There is a siderbar and we do not want it to scroll. So clearly either position:fixed or position:absolute should do the trick, but they don't!
The following happens with position:fixed:
the sidebar glitches on scroll and breaks up and just acts oddly
The following happens with position:absolute:
the sidebar scrolls rather than staying in place.
Here is the css for the sidebar (not correct id name)
#sidebar{
font-family: 'Jura', sans-serif;
position: fixed;
margin-top:80px;
margin-left:1020px;
font-size:18px;
padding-top:0px;
padding-bottom:17px;
text-align:center;
height:420px;
width:300px;
overflow:hidden;
solid #000000;
color:#000000;
-webkit-transition: opacity 0.3s linear;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
background-color:transparent;
opacity: 1;
z-index:999;
}
this is a link to the blog so you can maybe check with developer tools to see the glitching and what exactly is happening.
Why is the positioning acting so odd, and how can that be fixed?
And this happens in safari and chrome, I do not have firefox or internet explorer installed, so I am not sure the response for those browsers
picture of glitch, splits sidebar image up and occasionally will show some of the text:
Remove overflow:hidden from the element with the four-letter F-word.
#???? {
font-family: 'Jura', sans-serif;
position: fixed;
margin-top: 80px;
margin-left: 1020px;
font-size: 18px;
padding-top: 0px;
padding-bottom: 17px;
text-align: center;
height: 420px;
width: 300px;
/*overflow: hidden;*/ <---- remove for "glitch" to go away
color: #000000;
-webkit-transition: opacity 0.3s linear;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
background-color: transparent;
opacity: 1;
z-index: 999;
}
The element is named a censored (I assume) F word!
You want the css overflow property: Overview. Hidden or visible should do the trick.