How to make on this site following. I want left “menu” to be fixed positon aswell as header and I only want the “content (menu, food whatever you call it)” to scroll. Is it possible to do that. You dont have to give me the code or write, you can give me only some example website. Or you can write a code. Or just some help.
On small screen there is no sidebar. This sidebar right now is dynamic, it moves dynamically. But I want to do is to make positioned absolutely/fixed and when you click/select menu category, only the content will scroll.
That’s not true as if you just reduce the height of the browser the content is unreachable. I usually tile my windows to work on more than one thing at once so I never ever have my browser maximised. It’s a minor issue but an annoying one for me
This sidebar right now is dynamic, it moves dynamically. But I want to do is to make positioned absolutely/fixed and when you click/select menu category, only the content will scroll.
The problem is that this is heavily scripted; it is not a CSS solution as such and will need help from the JS forum so I will move the thread there.
If you just wanted the header fixed and the sidebar fixed we could do that with css but then you would never be able to reach the sidebar content because it is below the fold even when my browser is maximised. It seems you must have the dynamic (js) solution for the design that you have to work.
You also say you want the header fixed but it depends on what you are calling the header? You would be better of just creating a sticky nav at the top as in that demo I showed. Of course this is JS territory again and not my remit.
You need someone like @Pullo to advise or one of the other JS wizards.
The element called navigation-menucard. If I have the browser closed half way up then I lose the last few menu items (more if I have zoomed the text). It’s a minor issue but you just need to be careful with fixed elements.
Visit the site now and see what happens when you click something on that sidebar. A part disappears. Is that possible to fix in css? That “content” needs a margin-top or something like that, but Im not sure to which element.
I want to remove .js functiion from sticky sidebar, so it wont be sticky anymore. But when I do that my mobile menu loses its function, it cant be activated. is there any way to remove that sticky function from the sidebar but at the same time keep mobile menu good and working.
Another question. If you visit the site on your mobile phones, you will see it scrollable, thats because of the slider, I think. Is it possible to make overflow hidden only on homepage? Which element should I set overflow:hidden?
Just open that link here http://iphone4simulator.com/ and you will see what Im talking about. The scroll bar will apear. How to hide that overflow, but at the same time not to affect menu?
I don’t see the menu on the small screen display (or on the desktop at small widths).
Edit:
Ok, I just realised the “Select a page” text was the menu trigger and I was expecting the usual mobile menu icon.
You won’t be able to hide the overflow and have the menu work because it will get hidden. You wil just need to ensure that everything is within that page as mentioned below.
The page scroll is mostly because you are placing the slideshow caption absolutely from the top (top:520px) and of course on small screens that too far below the fold (even on desktop).
You should probably optimise this a little better for mobile and hide the previous and next arrows and the text.
e.g.
@media only screen and (max-width:600px){
#prevslide,#nextslide,#slidecaption{display:none!important}
}
Also I have new problem. HERE The left sidebar menu cant fit with height, one item is missing and my montitor is quite big (24" 1920*1200) so, who know what happens on 20" monitors. Do you have any idea what should I do to fix this?
This is the issue I mentioned originally with fixed elements
What you could do is use a media query based on height and when the height isn’t enough to display all that side menu then remove the position:fixed and just let it be a normal floated menu instead.
@media only screen and (max-height:900px){
.navigation-menucard ul{position:static}
}
You’ll have to play with the height until it fits.
The only other alternative would be to add a scrollbar but would look messy.