left sidebar categories are hide after refresh and icons in footer becomes large

There are some problems in my template. One problem is left sidebar where product categories are shown , are hide some times when page is reloaded. After that as i take cursor to the categories then they are shown. I have attached the screenshot.

second problem is icons on footer as you can see the in the attached screenshot becomes too large. right now they are okay but after sometime they become too large. I have to open footer in html blocks in elementor save the page and they the problem is resolved but its happening again and again.

Attachments:

You must be logged in to view attached files.

Hello,

I would like to request temporary admin access so I can look at the settings there better.

Thank you for your time.

Kind Regards

acesss

[Luke Nielsen]

Hello,

1. Please send a video where we can see the issue with the categories menu for a better understanding.

2. As for the big images, enable the “Responsive placeholder” option in the settings of the LightSpeed – https://monosnap.com/file/2sxhGmaaPZqu2RohxMWgLGKk1d8ex1 , then clear the lightspeed cache.

Kind Regards

• This reply was modified 1 month ago by Luke Nielsen.

I have uploaded the video, as you can see in the video, when i reloads the page all the icons on left menu is not loaded. when i take cursor on the menu to open, then icons are shown.

video in above reply was not uploaded due to size, here I’ve uploaded correct size

Attachments:

You must be logged in to view attached files.

Hello,

In this case, disable the lazy loading from the LightSpeed and enable our Lazy loading from Theme settings -> Performance -> Lazy loading -> Lazy loading for images: https://monosnap.com/file/LzRzmnCq9TAM8MRfcV8qbwnlPmJvjZ

Clear the cache and recheck the issue.

Kind Regards

another problem, i have attached the screenshot. as you can see the follow text vertically on categories menu on the left side is hide. under the social links, its hide.

Attachments:

You must be logged in to view attached files.

there is another problem, i have created continuous slider at the top bar of the header. the problem is it’s not in the center.
you can see from left side there is big gap and on right side it’s starting from edge.

I have attached the screenshot as well

Attachments:

You must be logged in to view attached files.

Hello,

1. Our sidebar menu is designed for a limited number of menu items. Since these items can have dropdowns, the sidebar does not include vertical scrolling by default — because such scrolling would cut off the dropdowns.

There are several ways to improve the appearance in this case:

1) Reduce the number of menu items, or disable the “Follow” social icons so everything fits within a screen with limited height

2) Hide the “Follow” social icons at certain screen heights when they no longer fit within the visible area:

@media (max-height: 776px) {
   body .xts-sticky-social-wrapper {
    	display: none;
   }
}

3) Add vertical scrolling to the sidebar menu so that it can be scrolled when its content doesn’t fit the screen. However, this solution makes it impossible to add any dropdown submenus to the sidebar, as they will be cut off by the scrollable area’s boundaries.

.xts-sticky-cats {
	overflow-y: auto;
    overflow-x: hidden;
}

2. Regarding the marquee, you should check whether the top bar is set to 1 row, and make sure to enable Stretch section and content in the Container settings.

https://monosnap.com/file/9onLuY7zGVA9yTdbK1nrXtU6TE4dK7

https://monosnap.com/file/f39Fkjdu9sfYEYlXpViTlbiK8G2Dqs

Kind Regards

1) Follow text issue is resolved, I’ve removed.
2) marquee issue at the top bar is still there. I have already implemented the settings you told, but still the problem persists.
I’m attaching the settings screenshots as well

Attachments:

You must be logged in to view attached files.

Could you please update the temporary access so we can investigate it more deeply?

Thank you for your time and patience.

Kind Regards

[hammadsaleem438]

new access

• This reply was modified 1 month ago by hammadsaleem438.

The header on the main page is not configured, https://monosnap.com/file/qCZLelM595mz2dkkmBN6IkgMrf8tFk, you need to select – Row columns – 1 and move the HTML block to the first column. https://monosnap.com/file/RGabDLZLZkUTeHJe3P3Xmy0F0mTTPx

To correctly select the current header, in the top bar choose Space dashboard -> Header builder -> Edit current header – https://monosnap.com/file/tOMXxD97a1Vxas6WUkwxjFVM8MgRp8

Kind Regards

great the problem is solved

Again footer icons problem arises. The footer icons becomes too big, then I have to go to elementor, edit with elementor and then again publish it, then problem resolves. I’m attaching both screenshot and video

Attachments:

You must be logged in to view attached files.

Hello,

Please apply the 677123 patch in Space Dashboard -> Patcher.

Then check how it works and let me know.

Kind Regards

I have applied the patcher. I’ll provide you with the screenshot

I hope it will be okay now.

The problem was as you can see in the video above, when icons become too large, i have to go to the footer elementor editor. HTML blocks -> footer -> edit with elementor
There I have to publish the page again, after that icons come to its normal size. Then everything goes smoothly, again after 2 to 3 days suddenly icons on footer becomes large. I have shown you this in whole video in above reply

This was the main problem.

Attachments:

You must be logged in to view attached files.

1) on sidebar as you can see in the image provided, when I hover in side in opens. These images are added in menu section. I want when i hover on specific category, it should change the color or image.
Example: if i hover on first category headphones, its color changes or images changes on hover, right now black icon image is shown, on hover maybe blue color icon image is shown.

2) secondly, I want to change the colors of the social icons in the sidebar. original colors of the social icons.
blue for face, green for whatsapp and so on

Attachments:

You must be logged in to view attached files.

[Luke Nielsen]

Hello,

1. We changed the hover color for the menu items, but it won’t work for the images because we can’t affect the color of images in the tag with CSS.

2. Changed the color of the social icons.

Add the code below to Theme Settings -> Custom CSS -> Global Custom CSS area.

.xts-nav-sticky-cat > li:hover > a {
  color: #526a9f;
}

.xts-sticky-social-wrapper .xts-i-facebook {
 	 color: #1877F2;
}

.xts-sticky-social-wrapper .xts-i-instagram {
 	 color: #E1306C;
}

.xts-sticky-social-wrapper .xts-i-twitter {
	color: #1DA1F2;
}

.xts-sticky-social-wrapper .xts-i-pinterest {
	color: #E60023;
}

.xts-sticky-social-wrapper .xts-i-whatsapp {
	color: #25D366;
}

.xts-sticky-social-wrapper .xts-i-tiktok {
    color: #010101;
}

Kind Regards

• This reply was modified 4 weeks, 1 day ago by Luke Nielsen.
• This reply was modified 4 weeks, 1 day ago by Luke Nielsen.
• This reply was modified 4 weeks, 1 day ago by Luke Nielsen.

I need some changes in my layout.

1) I want to change background color of the left sidebar bars bg as I’ve highlights in screenshot.
2) secondly, i want to change products add to cart button as shown in the second screenshot provided. simple icon bg should be blue and icon color is white and on hover it should be whole blue and text is white in color.

-> note: if change primary color to blue in theme settings then it changes the every things to blue like products prices or discounted price, everyhting

3) As you can see in the first screenshot, arrow bg color is green, i want custom color. In slides navigation settings there is no option to set custom color

4) last thing I want marquee on my banner slider. on custom continuous slider as you can see in the third image highlighted

Attachments:

You must be logged in to view attached files.

One image was missing in above comment

Attachments:

You must be logged in to view attached files.

1. Here is a custom CSS for changing the sticky categories heading:

body .xts-sticky-cats-title {
 background-color: #006635; 
}

2. Custom CSS for the add to cart button.

body .xts-prod-design-icons-alt .xts-add-cart-btn>a:before {
 background-color: #2caaf5; 
 color: #ffffff;
}

body .xts-prod-design-icons-alt .xts-product:hover .xts-add-cart-btn>a {
 background-color: #2caaf5; 
}
 

3. Select the necessary options for the background style in the slider settings Slides -> Slider – https://monosnap.com/file/nmiYPjMvTbi73oUs2CNn9GBaQ8AMkl and Custom css:

body .xts-arrows-style-bg.xts-arrows-vpos-sides .flickity-button {
 background-color: green;
}

4. Use our Marquee element in the Elementor editor – https://monosnap.com/file/dM4UnL1Ys73PKjpgBNOaid2Mnu2eRT

Kind Regards

1) In marquee.png , as you can see in the screenshot, there is gap under marquee. i’m trying to remove that but it’s not happening. I need marquee should touch the bottom

2) you can see in 1.png and 2.png there are view more buttons. I want to change view more buttons border to 3px and reduce padding from top and bottom, also need font weight to bold. how to change each button in a single go, right now i have to take every button class separately and there are no options in elementor

Attachments:

You must be logged in to view attached files.

We went to your website specified in the secret section, but we don’t see the changes you wrote about and which you sent in the screenshots. To provide a custom solution, we need to see them physically. Please provide a link to the website shown in the screenshots.

Kind Regards

now you can see the changes

also i have set marquee at the bottom of the slider by placing the position absolute and then set vertical -38.
is there any other proper way ?

Secondly, I have created promo banner on my website, the problem is when i loads the website for the very first time, it will show the promo banner but when i refresh the site or visit the website again, it will not show the promo banner.

I need, every time when a customer visits or refresh the website, it should display promo banner

Attachments:

You must be logged in to view attached files.

1. If you want the marquee to align with the slide edge, you need to enable the “Slide without spacing” option for each slide in Dashboard -> Slider (https://monosnap.com/file/Q75hwZyXmsdrVET2ndEqMIkrsjdTKT) -> Slide -> Content -> Slide without spacing – https://monosnap.com/file/zvuvjqoxefOfLRoSjyadXU5kloLOQD

2. Our buttons are sized relative to height. Since buttons on sliders and banners have different sizes, use custom sizing depending on the button size:

body .xts-button.xts-style-bordered {
 border-width: 3px;
 font-weight: 700;
}

This is custom code to update the button height for L size:

body .xts-button.xts-style-bordered.xts-size-l {
 padding-block: 0;
 min-height: 40px;
}

This is custom code to update the button height for XL size:

body .xts-button.xts-style-bordered.xts-size-xl {
 padding-block: 0;
 min-height: 50px;
}

3. The promo banner is designed to show each user certain important information only once. When updating the popup information, you need to increase the popup version (using the “Version” option) so the updated popup will be shown to users who have already seen the previous version.

Add custom JS code in Theme Settings → Custom JS → Global JS to force the popup to show on every page load of your site. However, in this case, the popup will literally appear every time and will need to be manually closed each time. The promo popup functionality won’t have any other conditional logic for hiding it.

(function($) {
	$(document).ready(function() {
		Cookies.remove('xts_popup_' + xts_settings.promo_popup_version, {
			path  : '/',
			secure : xts_settings.cookie_secure_param
		});
	});
})(jQuery);

Kind Regards

I have provided you the screenshot.
there is slider and banners in the screenshot.
I want to know is there any button animation on hover in theme ? when i hover on a button, background color filled from left to right.

Attachments:

You must be logged in to view attached files.

Hello,

Currently, our buttons have hover animation only in combination with an icon — https://monosnap.com/file/dPCdxw8VaEb4bCRDRw1eGPsITfULqy . The variant you suggested with an animated background is not practical, as it doesn’t take into account the color scheme and is not compatible with uploaded icons.

Kind Regards

[Author]

Posts