Menu width, change category font color

Hi team,

We are having multiple categories that we’d like to display in the menu (a total of 12 items). The issue is that they cannot be placed in 1 line and the theme automatically puts 2 of the items on the 2nd line. We found a workaround where if we click the “Display inline” option the menu is in 1 line, however it is moved a bit to the right (attached you’ll find an example screenshot). Could you provide us with a CSS code snippet so that we can increase the width of the menu? Or is there another way to fix this?

Furthermore, we’ve been trying to change the font color of the category name when we are at the shop page. However regardless of what options we used at the “Advanced typography” tab, nothing seemed to change it. What is the class name that we should use? We will attach a screenshot of what we want to change.

Attachments:

You must be logged in to view attached files.

Hello,

I am checking the home page and screen, I see the product title in one line and the category in one line.

Could you kindly clarify?

Best Regards

What we were referring to is the main menu at the top of the website (desktop version). As you can see, it is in 2 lines, because there are too many items (they are the categories of our website). Our idea is to increase the width of the menu, so that everything can be in one line (both for the menu and the sticky menu when we scroll down), hence why we asked for a CSS snippet.

Furthermore, we’d like to change the font color of the categories when the clients are at the shop page (“Example-SS-2.jpg” from the first post shows exactly what we are talking about). How can we target them in the advanced typography section? Is a CSS code required there as well?

Kind regards,
Hristiyan

Hello,

You have a lot of items and there is no space enough for all of them. Even though if we reduce the gap it would not help.

There are two ways: 1. You can make a multilevel or mega menu. 2. You can try the full-screen menu. https://gyazo.com/52b51156fcfed84e7f923b41e71f7a5b

If you have any questions please feel free to contact us.

Best Regards

Isn’t there a way to increase the width of the menu by using CSS? Also if we use the “Display inline” option, all of the items are stored in 1 line, but the menu is misplaced and not centered. You can see what we mean in “Example SS 4”. How can we fix this?

Furthermore we kindly ask you to finally respond to our 2nd question which is how to change the color of the categories font, we will attach the screenshot of exactly what we are talking about and hope that you will address this at last (Example SS 3).

Thanks in advance.

Attachments:

You must be logged in to view attached files.

Also, when trying to visit the wishlist, it doesn’t pull up anything and only shows this: [woodmart_wishlist]. What could be the cause of it?

Attachments:

You must be logged in to view attached files.

Hello,

This padding is important for all the Woocommerce templates, in order to remove it from the home page you need to add this negative margin to the first section if you use Elementor https://prnt.sc/uhivji or set margin-top:-40px.

The menu is aligned in the center: https://gyazo.com/9e336826440ca7dbf8f2f6103a0f97cc

If you have any questions please feel free to contact us.

Best Regards

The menu is not in the center, as you can see it is slightly to the right and it is because we have used the inline option of the header builder. If we remove it, the menu goes on 2 lines, but is exactly in the center, which is what our idea is. For the last time – could we receive a CCS code that increases the width of the menu? As your suggestions cannot fix the overall state of it.

Also, when answering questions, we kindly ask you to go through all of them, as you are missing our question about the categories font color for the 3rd time. How can we change it, we are aware that we should target it in the advanced typography settings, but we do not know what the name of this specific element is.

Furthermore, as previously asked, the wishlist doesn’t appear to work. When we click on its icon, it shows a blank page with [woodmart_wishlist] inside of it. Please log into the website and check further.

We’d appreciate if you provide the support required, so far it has been close to mediocre and has not aided us at all.

Kind regards,
Hristiyan

Hello,

If you have any space elements in the header builder, please remove them. I cannot check the site now as I see “Your access to this site has been limited by the site owner”

If you have any questions please feel free to contact us.

Best Regards

Hello,

We’ve now unblocked your IP and you will be able to log in.

Issue 1: We currently have the menu on 2 lines, so if possible please try to modify it using CSS so that its width is increased and all of the menu items are in one line and are centered.

We are aware that if we use the “Display inline” option the menu goes on 1 line, but as previously mentioned, it then moves the menu slightly to the right and it is not in the center. Although it may appear as centered in the source code (like you’ve shown before), visually it is not.

Issue 2: Please check the wishlist as well, for some reason it only displays the shortcode. We tried using a different page as Wishlist and set it up in the theme settings, but the short code still remains, without displaying the content of the Wishlist module.

Kind regards,
HZ

Attachments:

You must be logged in to view attached files.

Hello,

You will need to re-arrange your main menu into multi-level menu or mega menu: https://xtemos.com/docs-topic/create-mega-menu/

You have a lot of menu items. There are a lot of menu items and there is no space enough for all of them.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts