How to make only content to scroll?

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. :slight_smile:

Thanks anyway!

Hi,

It looks as though you have already implemented a sticky/fixed sidebar but your header is really too tall to be fixed as it will swallow up half the page. A lot of sites are now just swapping in a smaller version of the header to remain fixed (something like this from [URL=“http://www.webtutorialplus.com/sticky-header-on-scroll-jquery/”]here) or [URL=“http://www.jqueryscript.net/menu/jQuery-Plugin-For-Sticky-Header-Elements-clingify.html”]this.

You need to be careful with the fixed sidebar because on small screens (height-wise) the content is unreachable when it goes below the fold.

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 :slight_smile:

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.

Thread moved.

Are u talking about navbar?

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.

Hi,

I believe you can fix that in the JS settings as there is a variable called padding which applies a default padding to the top of the sticky box.

e.g.


<script>
jQuery(document).ready(function() {
	jQuery('.navigation-menucard').stickySidebar({ 
		speed: 400,
		[B]padding: 220,[/B]
		constrain: true
	});
});
</script>


Okay. And what about “class=“page-header””. Is there a way to make it fixed and still visible?

HI,

That page seems to have changed as the side panel is missing now?

If you want to fix page-header then you are eating up a lot of your screen with a fixed element. You’d probably need to do something like this.



.canvas{
padding:300px 0 0;
}
.page-header {
top:0;
position:fixed;
z-index:3;
background: url(images/bg-content.png) repeat-x 0 0;

}
.content{background:none}

(The above code is extra not a replacement)

Of course that will change all pages and you would need to change the sidebar again (wherever its gone to).

I’m not sure if that’s what you meant anyway.

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.

Hi,

I assume you removed this script:


<script type='text/javascript' src='http://bistro83.com/wp-content/themes/linguini/js/sticky.js?ver=3.6.1'></script>

and then removed this section from custom.js


jQuery(document).ready(function() {
	jQuery('.navigation-menucard').stickySidebar({ 
		speed: 400,
		padding: 0,
		constrain: true
	});
});


That would seem to work.

Thanks. You are the best.

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?

You can see here if you visit the site from iPhone http://iphone4simulator.com/… Just enter url

Hi,

Can you clarify which page we are talking about as the original link seems to have gone awol :slight_smile:

Then we will need to know what you are trying to hide exactly and how it differs from what we see?

LINK

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?

Hi,

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}
}

content-home doesn’t seem to be doing anything either (on the home page) so try hiding that as well.


.home .content-home {
display:none;
}

Put it in the media query if it does have a purpose on desktop.

I applied your changes what do you think now?

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 :slight_smile:

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.


.navigation-menucard ul {
    position: fixed;
    bottom: 61px;
    top: 346px;
    overflow: auto;
}