Home › Forums › WoodMart support forum › How to make the left gallery sticky while the right content scrolls?

How to make the left gallery sticky while the right content scrolls?

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • May 14, 2026 at 4:55 am #718416

    Lz
    Participant

    Hi WoodMart Support Team,

    I’m using the WoodMart theme on my WordPress website, and I would like to achieve a specific scrolling behavior on one of my pages.

    The layout has two columns:

    * The left side is an image/gallery section.
    * The right side is a text/content section with a long description.

    What I want is:

    When the user scrolls down, the left image/gallery section should stay fixed or sticky in place, while only the right text/content section continues scrolling down. After the right content reaches the end, the whole section, including both the gallery and the text area, should continue scrolling down together.

    In other words, I want the left gallery to remain sticky only while the right long content is being scrolled, instead of both columns moving at the same time from the beginning.

    Could you please let me know if this can be configured inside the WoodMart theme settings, Elementor/WPBakery settings, or if it requires custom CSS/JavaScript?

    I have attached a screen recording showing the scrolling effect I would like to recreate.

    Thank you.

    May 14, 2026 at 1:31 pm #718468

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Maybe you are using a custom layout for a single product page. Navigate to Layouts > Edit Single Product Layout with Elementor> Edit container where the image gallery is added and enable the option “Sticky Container”. https://ibb.co/C1XsRkS

    Best Regards

    May 14, 2026 at 4:46 pm #718485

    Lz
    Participant

    I’ve already turned on the switch just as you instructed, but the link isn’t working at all.

    Attachments:
    You must be logged in to view attached files.
    May 15, 2026 at 8:53 am #718504

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Please note that the sticky behavior only works when the content in the opposite column (the right content section) is taller than the left image/gallery section. In such cases, the gallery column remains fixed while the longer content scrolls.

    Currently, the content in your right column is not higher than the images section, so there is not enough scrollable area for the sticky effect to become visible. That is why both sections appear to scroll together.

    Once the right-side content becomes longer than the gallery section, the left images container will stay sticky as expected.

    Best Regards

    May 19, 2026 at 4:12 pm #718819

    Lz
    Participant

    My product menu displays with initial capital letters on the desktop version, but switches to all-caps on mobile. How can I configure the settings so that it retains the initial capitalization on mobile devices as well?

    Attachments:
    You must be logged in to view attached files.
    May 20, 2026 at 7:58 am #718853

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Navigate to Theme Settings > Typography > Advanced > create a new rule with the Mobile menu dropdown first-level item and change text transform.
    https://postimg.cc/T5qDjHrk

    Here is the documentation providing more detailed instructions:
    https://xtemos.com/docs/woodmart/advanced-typography-settings/

    Best Regards

    May 22, 2026 at 7:39 am #719055

    Lz
    Participant

    How do I change this subheading from all caps to title case (first letter capitalized, rest lowercase)?

    Attachments:
    You must be logged in to view attached files.
    May 22, 2026 at 1:35 pm #719084

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Navigate to Theme Settings > Typography > Advanced. In this area, you can assign elements to custom selector and change the text transform:

    .page-title .wd-nav-product-cat li a

    See Screenshot for better understanding: https://postimg.cc/RNX8twLt

    Please refer to our documentation https://xtemos.com/docs-topic/advanced-typography-settings/

    Best Regards

    May 25, 2026 at 2:12 am #719205

    Lz
    Participant

    How to change the names of secondary categories so that the first letter is capitalized and the rest are lowercase?

    Attachments:
    You must be logged in to view attached files.
    May 25, 2026 at 9:42 am #719217

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Navigate to Theme Settings > Typography > Advanced > Choose the menu dropdown level from the drop-down and change the text transform.
    https://postimg.cc/crhYgtPd

    Here is the documentation providing more detailed instructions: https://xtemos.com/docs/woodmart/advanced-typography-settings/

    Best Regards

    June 23, 2026 at 9:09 am #722227

    Lz
    Participant

    How can I make this scrolling banner display full width? I can’t find the settings.

    Attachments:
    You must be logged in to view attached files.
    June 23, 2026 at 10:52 am #722237

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

    Best Regards

    June 25, 2026 at 11:37 am #722431

    Lz
    Participant

    I have granted you authorization; please check. Thank you.

    June 25, 2026 at 2:05 pm #722457

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Edit the page with Elementor, then edit the container, and in the XTemos Layout settings, enable Stretch Container:
    https://ibb.co/s1DYvJ4

    Best Regards

  • Author
    Posts

Tagged: 

Viewing 14 posts - 1 through 14 (of 14 total)