[Andrea GParticipant]

Hi there,
in my page at http://www.passionebiketours.com/tuscany/
I created a custom sidebar menu, linked to the content-bar anchors. I need it to remain fixed in position and not scroll up with the rest of page.
Please advise on how to to do this, txs.

[RadModerator]

Hi Andrea,

Thank you for writing in!

You can use this css to make your sidebar menu scroll, though this will affect all of your sidebar. If you intend to use this for specific pages, then I can give you specific css for those pages. Just let me know 🙂

@media (max-width:979px) {
.x-sidebar.right {
position: relative;
}
.widget_nav_menu {
position: fixed;
width: 20%;
}
}

Hope this helps.

[Andrea GParticipant]

Hi and txs for the answer. It’s not working unfortunately, I tried copying it both in the Custom CSS of the Customizer as well as the CSS on the page itself. No change. Please advise on how to proceed

[RadModerator]

Hi Andrea,

How about this one 🙂

@media (min-width:980px) {
.x-sidebar.right {
position: relative;
}
.widget_nav_menu {
position: fixed;
width: 20%;
}
}

Thank you.

[Andrea GParticipant]

Hi there,
txs for the quick reply. This seems to works, the only problem is that when the scrolling goes all the way to the bottom, the Menu gets covered up by the footer, which slides up onto it. Is there any way to avoid this?
Also, the menu stays quite low, near the bottom of the page. Is there a way that once I click and pages scroll, that I can get the menu to go up near the top of the viewport?

Txs again for your quick reply and help with this.

[RadModerator]

Hi Andrea,

Seems like you already removed the sidebar, would better if you could provide another url and I’ll continue checking what else needed for fix.

Thank you.

[Andrea GParticipant]

Hi there,
not removed, just a different url, ha!
Here it is: http://www.passionebiketours.com/tuscanyside/
Txs for your help, appreciate it!

[RadModerator]

Hi Andrea,

Please remove all css I gave above and just add this :

@media (max-width:767px) {
.x-sidebar {
position: static!important;
}
}

Then add this javascript into your customizer’s custom javascript.

jQuery(function($){
		$(window).scroll(function(){			
			if( $(this).scrollTop() >= $('.x-main').offset().top ) {				
				$('.x-sidebar').css({position:'fixed', top:$('.x-navbar').height(), left: $('.x-main').offset().left + $('.x-main').width() });
			} 
			else {
				$('.x-sidebar').css({position:'static'});
			}
		})
});

This might render different in your page and I might need to see it before adding more fixes.

Thank you.

[Andrea GParticipant]

Hi there,
Txs so much for your help and the incredibly quick answer. It seems to work for the most part, except that it seems to jump to the side of the main column when scrolling down. Also, it disappears when on mobile (or reducing browser window to mobile size), is there a way for the menu to remain visible, maybe on the top of the viewport when on mobile?

Txs again for your help!

[RadModerator]

Hi Andrea,

You didn’t removed the css I gave you before that

Let start from here, and I’ll give you another set of code.

Remove this :

@media (min-width:980px) {
.x-sidebar.right {
position: relative;
}
.widget_nav_menu {
position: fixed;
width: 20%;
}
}

Remove this :

@media (max-width:767px) {
.x-sidebar {
position: static!important;
}
}

Remove this:

jQuery(function($){
		$(window).scroll(function(){			
			if( $(this).scrollTop() >= $('.x-main').offset().top ) {				
				$('.x-sidebar').css({position:'fixed', top:$('.x-navbar').height(), left: $('.x-main').offset().left + $('.x-main').width() });
			} 
			else {
				$('.x-sidebar').css({position:'static'});
			}
		})
});

Then add this css:

@media (min-width:980px) {
.x-sidebar.right {
position: relative;
}
.widget_nav_menu.fix_my_position {
position: fixed;
width: 20%;
}
}

Then add this javascript :

jQuery(function($){
		$(window).scroll(function(){			
			if( $(this).scrollTop() >= $('.x-main').offset().top ) {				
				$('.x-sidebar .widget_nav_menu').addClass('fix_my_position').css({ top:$('.x-navbar').height() });
			} 
			else {
				$('.x-sidebar .widget_nav_menu').removeClass('fix_my_position');
			}
		})
});

There is css that conflicts with given css, the force it to be fixed position(hidden) on mobile. So i would like you to post all your customization here.

Also, I think if you really need to manipulate sidebar visibility and position for mobile, you will need to have full template customization. This one works because its already in its position on sidebar, thus putting it on top requires another set of customization ( responsiveness must be preserved ), and you might need to consult a developer for that.

Sidebar is already too far from top view port and have different container, thus have different responsive width. Responsive content only works on relative parent.

Thank you.

[Andrea GParticipant]

Hi there, txs again for your help.
I didn’t make any specific CSS customizations, I now tried to delete the page, recreate it and add your code and it works! Txs so much!

I noticed now the menu/sidebar moves to the bottom, is that because of the responsive layout, is there no way for it to show up top?

[AlexanderKeymaster]

Hi Andrea,

Glad to hear that’s working! Yes, the responsive design moves the sidebar to the bottom. This can be changed, but involves template modifications and custom theme development. This kind of customization would be outside the scope of support we can offer. Thanks for understanding!

[Andrea GParticipant]

Hi there, txs again for your help and the time to get through this. If you can’t help me to make this custom modification, would it be possible for you to point me in the right direction, maybe just a hint of what would need to be done and if there are resources online I can look to and study?

Txs so much!

[SupportMember]

Hi Andrea,

You would need to study responsive CSS for that to be able to target the viewport size of each devices and force it to use a specific set of CSS. There are lots of available resources online that you could play around and study.

Thanks!

[Andrea GParticipant]

Hi there,
I noticed that in visual composer there is a “visibility” shortcode, for targeting different sizes with different layouts and css. Could I use this to target the css to a certain size and move the menu to the top, and if yes, what css can I use to move the menu to the top?

Txs again for your precious suggestions.

[Author]

Posts