Hi X Team - I’m trying to “freeze” a section of content to the top of a page as the user scrolls down the page. Please see the attached graphic to show areas I want frozen to the top as user scrolls (boxed in red). The top blue navigation is already set up as a fixed top and will stay in place as the user scrolls. The next white section with logo and phone number is a section I’d like to stay frozen just under the navigation. How can I accomplish this?
Hi @bluetroop2,
You can make the navigation section fixed in top through the Theme Options > Header > Position. If you want that full section to be fixed, regretfully that is not possible with the X theme, but you can do this by using the customizable header. To get customizable headers, I would suggest you upgrade to the Pro.
Please go through the process here: https://theme.co/docs/converting-from-x-to-pro. You can also get more information on how header can be used here: https://theme.co/docs/header
Hope it helps.
Thanks
Yes, but I’ve already started and built with X. I read in an older forum post that you can assign a class and some Javascript to freeze the top section to remain visible. Can you guide me in this way? The Navigation is already frozen in place.
Hello @bluetroop2,
You may be able to accomplish what you have in mind. Simply edit your page and make sure that you add a custom element ID for your section. Take note of the element ID that you have added. You can then create a simple JS code with the appendTo() function which will take the section ID and append it to your .x-navbar element. You actually have done this before as well. You can check out your old thread here:
Example code based on the old thread:
jQuery(document).ready(function($) {
$('#sectioneElementID' ).appendTo('.x-navbar');
});
Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.
Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance.
Best Regards.
Okay, I will try this. Can you please show me where (based on my screenshot) to apply the custom element ID for the section?
Hi @bluetroop2,
You can find the ID option at the top of the Setup, please find the screenshot marked with it.
Thanks
Seems like it would work, I tried it on the home page. I followed these instructions and only the navigation stays visible at the top as I scroll. Can you check and see if I did something worng?..
More information to follow.
Hi @bluetroop2,
I have checked the code suggested by my colleague with the wrong ID, you have added the section prefix with it. Your section id is LogoPhone, the code should look like the below:
jQuery(document).ready(function($)
{
$('#LogoPhone').appendTo('.x-navbar');
});
If you have fixed the section with the navbar, you may need to adjust the margin and padding for the next sections.
Hope it helps.
Thanks
Yes, seems to work well. Thank you for your help and expertise. I greatly appreciate the X support team.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.