Menu Adjustments

Hi, How would I go about padding out the menu items as they are currently too close together. I would prefer them a little bit more spaced out, like the picture below.

Also is it possible to remove the arrows next to the words in the menu but still have a drop down menu?

Thank you for your help.

Attachments:

You must be logged in to view attached files.

Hello,

You need to reduce the width of the column which contains the Main menu item. Try to change the row flex layout https://xtemos.com/docs/woodmart/header-builder/header-rows-flex-layouts/

Please add this code to the Theme Settings > Custom CSS > Global:

body .woodmart-navigation .item-level-0.menu-item-has-children>a:after {
	display:none;
}

Best Regards

I’ve sorted the width of the columns for the menu but still the “menu items” are still too close together. I would prefer some padding in between them to space them out more than they are already. I’ve tried to show in the image below.

Attachments:

You must be logged in to view attached files.

Hello,

Please provide the valid site admin access to the private area.

Best Regards

Sure. Thank you Elise

Hello,

Please add this code to the Theme Settings > Custom CSS > Desktop:

body #menu-main-navigation .item-level-0 > a {
	padding-left: 30px;
	padding-right:30px;
}

Best Regards

Brilliant has worked perfectly. I was wondering if you could help me with another query?

Can you only have a sticky header on mobile but not for the desktop version of the site? The main header section.

Attachments:

You must be logged in to view attached files.

Hello,

Unfortunately, there is no option to do that.

Best Regards

Do you not have any possible code to override sticky header from showing on desktop this.

Hello,

Please add this code to the Theme Settings > Custom CSS > Desktop:

body .whb-sticked{
display:none;
}

Best Regards

Hi, I’ve added the code but the desktop version is a little buggy/flickery. Once you scroll down the page it starts to flicker a little not as a smooth scroll down the page. Once I remove the code it becomes very smooth again upon scrolling down the page. Something isn’t quite right with the code.

Hello,

There is no option to hide the sticky header on the desktop by default. The provided code just deletes the sticky header. Another way will require more complicated customization which is not covered by our support.

Best Regards

[Author]

Posts