Problem with mobile navbar

This topic has 5 replies, 2 voices, and was last updated 1 year, 5 months ago by kitdorofficial.

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

Author

Posts
November 28, 2023 at 4:39 pm #516431

kitdorofficial
Participant

Hi woodmart team. I am facing issue with the mobile navbar. Website- https://kitdor.com

Problem:
1) I have added a whatsapp button on my website which is fine
2) The problem is that this whatsapp button is overlapping the mobile navbar & sticky add to cart

How can I shift the whatsapp button a bit up so that it does not overlap the mobile navbar? Can you give me the exact CSS code that I can add on my website that will solve this issue? (Please give me the exact CSS code for my website as I am not good with inspect element & HTML)

Also where can I add this CSS code? In the woodmart theme options or the HFCM plugin that I have installed on my website?

I have recorded my screen to show you the error for your better understanding. You can checkout my loom video here-https://www.loom.com/share/967eccdfda364382a82a385a928a7a16?sid=881f6608-f068-4dfe-8fe7-c31a0ed2e97d

I am also attaching some screenshots below

Attachments:
You must be logged in to view attached files.

November 28, 2023 at 5:00 pm #516461
Bogdan Donovan
Keymaster
Hi,

Try to add the following code snippet to the General Custom CSS area in Theme Settings to fix this issue.
```
@media (max-width: 1024px) {
	
	.sticky-toolbar-on .joinchat {
		bottom: 55px;
	}
	
	.sticky-toolbar-on.wd-sticky-btn-on .joinchat {
		bottom: calc(55px + var(--wd-sticky-btn-height))
	}
}
```
Kind Regards
November 28, 2023 at 7:07 pm #516552

kitdorofficial
Participant

Ok this works. I have one more request. On the product page I can see that the code adds a bit more space than normal pages so that the add to cart doesnt get overlapped. But it is visually not looking very good. I will attach the screenshot below.

Can you tell me the code which will keep the space the same as other pages. I am ok with whatsapp overlapping the sticky add to cart button or I can even remove the sticky add to cart. Please tell me the code that will keep the space same for all the pages

Attachments:
You must be logged in to view attached files.

November 28, 2023 at 7:12 pm #516554

kitdorofficial
Participant

Ok I got it. I used the following code:

@media (max-width: 1024px) {

.sticky-toolbar-on .joinchat {
bottom: 55px;
}

Just confirm if this is correct.

Please confirm these 2 doubts:

1) Can I use the same code for all my woodmart websites where I face this issue? Or will the code be different for different websites?

2) I have to add them in Global custom CSS under Custom CSS right?

November 29, 2023 at 10:57 am #516727

Bogdan Donovan
Keymaster

Hi,

You have modified the code correctly.

1. This code will be similar to all WoodMart theme sites with mobile bottom navbar option enabled.
2. Yes, code need to be placed in General Custom CSS area in Theme Settings (https://prnt.sc/IY4CvXA7BX5K).

Kind Regards

November 29, 2023 at 6:28 pm #516932

kitdorofficial
Participant

Ok thanks. You can close this thread
Author

Posts