on this site i have the side nav position: fixed and it works fine, until someone clicks on "my cart" which then has the cart appear in a drawer, thus pushing down the main container.
however, the side nav isn't being pushed down and it looks like this. you can see the logo is working right as a comparison and the nav should be below it, but it's not.
here's the CSS on the sidebar currently
#index #sidebar, #index-v2 #sidebar {
top: 100px;
position: fixed;
left: 0;
z-index: 99;
}
any idea how to get it to work so the sidebar pushed down when the container is active?
As along as you have it set to position:fixed it will always remain right there. If you want it to move down when the drawer opens I would suggest placing the side nav inside the main container and setting it to float:left or position:absolute instead of position:fixed.
If you use the latter option you should set the main container to position:relative
Related
I want my navigation bar to be fixed at the top, but when I put the css coding in, all the other buttons on my page stop working.
This is my CSS
#header {
position: fixed;
left: 0;
top: 0;
bottom:200px;
padding:inherit !important;
width: 100%;
z-index:9999;
}
I have tested it and the website works fine when I take this out.
I would assume that the since your layout is fixed and you are using the position properties and z-index that your #header is above everything else and putting an "invisible barrier" between where you click and the buttons underneath all buttons below 200px from the bottom of your screen should be clickable to see for yourself try adding a background color to see what is going on. Removing the top and left positions will help and if possible you might not even need to use the z index property depending on what you are trying to achieve.
I've been researching this problem and can't seem to find an answer that properly addresses my issue. I have created a vertical sidebar menu which stays docked to the left side of the screen. The menu has a different background color than the rest of the page and should be as tall as the entire page. To accomplish this, I've used the CSS properties:
#menu {
height: 100%;
background-color: #222;
position: absolute;
top: 0px;
bottom: 0px;
}
This works correctly, however, when elements are dynamically added to the body in such a way that they cause the height of the body to change, the height of the menu no longer takes up the entire screen. Instead, I get white space below the dark background color of the menu. This also occurs when I have the console open in Firefox and then scroll down.
How can I keep the vertical menu bar stretching down then entire side of the page? None of the similar suggestions I've seen so far on Stackoverflow or Google seem to work.
height:100%; takes up the view-port height so if your body content are increased than view-port height then you'll see your siderbar 100% heighty as its view-port as is.
You can just remove the height:100%; and your code would work fine, by using fixed positioning and using top:0;bottom:0; which would be the document's top and bottom values.
#menu {
/*height: 100%;*/
background-color: #222;
position: fixed;/*using fixed positioning only works*/
top: 0px;
bottom: 0px;
}
Also, don't forget to use the width while using fixed positioning, or alternatively, you may use left and right values.
Right now I have a floating box on the left side of my site that holds a stumble, facebook, twitter share code.
#fixmetoo {
position: absolute;
right: 30px;
top: 0px;
}
#fixme { position: fixed; }
It stays put as you scroll but i want it to disappear if the footer is showing.
I have a page that is 960 px wide and the floating box shows great but the footer is 100% wide and the box covers the footer.
so if my footer is 300px tall how can i hide the floating box IF i am less than 300 px from the bottom of the page?
Note that the z-index solution is probably what you want, but it will only work if the footer is a sibling element of the fixed-position panel (not exactly... just has to be in the same 'stacking context').
You probably however want to make the footer {position:relative; z-index:2;}, unless it is already absolutely positioned.
If you dislike the panel going behind the footer, the only sane way you can get the panel to stop scrolling before the footer is with javascript.
Try using the z-index property.
#footer{ position:absolute; z-index:2; }
#fixme{ z-index:1; }
Please post more of your code. Or use http://jsfiddle.net
I have a website scrolling horizontally using this script:
http://tympanus.net/Tutorials/WebsiteScrolling/index.html
Sometimes with this build I end up with a vertical scrollbar because, depending on the user's resolution, the copy may run further down the visible portion of the page.
I have a bit of footer information that I want to scroll along with the page horizontally, but I want it to always be at the VERY bottom of the page if there is a scrollbar, not just the window. Using this CSS:
.footer { position: fixed; bottom: 10px; left: 100px; }
Doesn't do what I want because the footer will overlay the site's copy.
So I also tried something like this:
html, body { min-height: 900px; }
.footer { position: fixed; top: 880px; left: 100px; }
Which also didn't work because the information was still always pushed off the visible portion of the page.
So I'm looking for a solution to essentially let the footer information lay wherever it naturally falls on the page, but always fixed 100px from the left as the page scrolls horizontally.
Thanks for any help!
I'm not sure you can do this entirely with CSS. I would make a javascript (or jquery) function that detects the size of the content div (or body) and positions your footer div after it (with offset if you're using jquery, or by manipulating the top margin if not). Then you can use the .scroll method on the window to move the div's horizontal position when a user scrolls to the right.
I have a layout template made to have a top banner, a left side menu and a content area to the right of the menu. I'm trying to figure out how to keep the 'application_layout_content' div from dropping below the 'application_layout_menu' if the browser window is narrowed. I'm not sure if I was doing this the right way to begin with; otherwise it seems to work fine.
(looking at IE7/IE8 mainly), I've played around with 'overflow' and 'position' properties but either will cause problems in one version or the other. Like 'Overflow: auto' will work in IE7 (main content div won't drop below the menu div), but in IE8 it will cause a greyed out vertical scrollbar and the main content div will still drop below the menu div.
Thanks!
#application_layout_header
{
background-image: url('../hHeader.jpg');
background-repeat: no-repeat;
height: 103px;
}
#application_layout_menu
{
width: 205px;
float: left;
}
#application_layout_content
{
float: left;
}
I don't think you can accomplish this as long as you have a fixed width defined for #application_layout_menu. Try making it a percentage value.
try setting a min-width on #application_layout_header