Return to previous page

Decreasing distance between menu image and menu text

This topic has 16 replies, 3 voices, and was last updated 2 months, 1 weeks ago ago by Andrew Mitchell

creativesite

Participant

October 4, 2024 at 10:39

Hi!

First of all thank you very much for all your quick and instant help!

I now have a question regarding settings in the menu:

How can I decrease distance between menu image and menu text?
Thank you!
Barbara

Files is visible for topic creator and
support staff only.

#417095 Copied

15 Answers

Tony Rodriguez

Support staff

October 4, 2024 at 12:31

Hello, @creativesite,

Thank you for contacting us and for using XStore.

We are pleased to inform you that the issue you reported has been successfully resolved. To ensure the changes are reflected on your end, we kindly ask you to clear your browser’s cache and revisit your site.

For your reference, we have provided a screenshot in the private content area of our support platform.

We hope this resolves your concern. Should you require further assistance, please do not hesitate to contact us.

Best Regards,
The 8Theme Team

Please contact administrator
for this information.

#417141 Copied

creativesite

Participant

October 4, 2024 at 12:40

You are a Superfast hero! Thank you! 🙂

My last question would be regarding menu items:

There are the brands on the Main menu, and how can I put 3 columns instead of the 2?
There is a code already but I didn’t find which one to modify to 3…
Can you please help in it?

Thank you !

#417145 Copied

creativesite

Participant

October 4, 2024 at 12:49

image

Files is visible for topic creator and
support staff only.

#417151 Copied

Tony Rodriguez

Support staff

October 4, 2024 at 12:56

Hello, @creativesite,

Thank you for your prompt response.

We are pleased to inform you that the issue you reported has been successfully resolved. Please revisit your site after clearing your browser’s cache to see the changes.

For your reference, we have uploaded an image in the private content area that illustrates the resolution.

Should you require further assistance, please do not hesitate to contact us.

Best Regards,
The 8Theme Team

Please contact administrator
for this information.

#417156 Copied

creativesite

Participant

October 4, 2024 at 14:13

Thank you very much, Tony!

1) And how can I create border-radius around Márkák (Brands) Menu item, container, 8px?
2) how can I add 4px padding or margin to the left side, please?

Thank you in advance! 🙂

Files is visible for topic creator and
support staff only.

#417177 Copied
Tony Rodriguez

Support staff

October 5, 2024 at 07:54
Hello, @creativesite,

We would like to guide you through the process of adding custom CSS to your theme. Please follow the steps outlined below:

1. Navigate to XStore > Theme Options.
2. Click on ‘Theme Custom CSS’.
3. Select ‘Global CSS’.
4. Insert the following CSS code:
```
.item-design-mega-menu.columns-3 .nav-sublist-dropdown .container>ul>li:hover {
    border-left: 4px solid #f13636 !important;
    border-bottom: 4px solid #f13636 !important;
}
```
Please note that the color code #f13636 can be modified to meet your specific requirements.

We trust this will assist you effectively. Should you have any further questions, please do not hesitate to contact us.

Best Regards,
The 8Theme Team

Please contact administrator
for this information.
#417273 Copied
creativesite

Participant

October 7, 2024 at 18:13

Thank you Tony!

And regarding my other question,
how can I create border-radius around Márkák (Brands) Menu item, container, 8px?
Can you please help in it?
Thank you 🙂

#417646 Copied

creativesite

Participant

October 7, 2024 at 18:21

I put the code in the CSS area, but unfortunately it doesn’t appear on the left..

Is the code for the “Mouse on”?
When I put the mouse on, I would like the green to have 4px white on the left, like on the attached screenshot. On that there is ca. 4px white on the right and in the bottom. But when I bring mouse on the left container area, there is no white.

I used this code:
.item-design-mega-menu.columns-3 .nav-sublist-dropdown .container>ul>li:hover {
border-left: 4px solid #ffffff !important;
border-bottom: 4px solid #ffffff !important;
}

Files is visible for topic creator and
support staff only.

#417647 Copied
Tony Rodriguez

Support staff

October 8, 2024 at 05:49
Hello, @creativesite,

Thank you for your response.

To enhance your website’s design, we kindly request that you insert the following custom CSS code. Please navigate to XStore > Theme Options > Theme Custom CSS > Global CSS and add the code provided below. This particular code will affect hover states only.
```
/* on hover */
.item-design-mega-menu.columns-3 .nav-sublist-dropdown .container>ul>li:hover {
    border-left: 14px solid #ffffff !important;
    border-bottom: 4px solid #ffffff !important;
    border-right: 4px solid #ffffff !important;
}
```
Feel free to adjust the border values according to your specific requirements. For your reference, an image has been included in the private content area of our website.

Should you require any further assistance, please do not hesitate to contact us.

Best Regards,
The 8Theme Team

Please contact administrator
for this information.
#417682 Copied
creativesite

Participant

October 8, 2024 at 11:51

Hi!

Thank you. I put it there but unfortunately it didn’t work. 🙁
I attached screenshots.
Can you please help me debug it?

Thank you!

Files is visible for topic creator and
support staff only.

#417761 Copied

Tony Rodriguez

Support staff

October 8, 2024 at 12:16

Hello, @creativesite,

Thank you for your prompt response.

We are pleased to inform you that the issue you reported has been successfully resolved. To ensure the changes are reflected on your end, please clear your browser’s cache and then revisit your site.

For your reference, the necessary CSS code has been added under the following navigation path: XStore > Theme Options > Additional CSS.

Additionally, we have uploaded images in the private content area for your reference.

Should you require any further assistance, please do not hesitate to contact us.

Best Regards,
The 8Theme Team

Please contact administrator
for this information.

#417771 Copied

creativesite

Participant

October 8, 2024 at 15:16

Okay, thank you!

And if I create the Brands with 3 columns as a Mega Menu, could I customize it more?

#417826 Copied

Tony Rodriguez

Support staff

October 9, 2024 at 05:03

Hello, @creativesite,

Thank you for your response.

We would like to inform you that you can customize your menu by navigating to Appearance > Menus > Main Menu > Edit Menu Option in your dashboard. Here, you can adjust the settings according to your requirements and ensure to save the changes once you are done.

For your reference, we have included a helpful image in the private content area.

We trust this information will be of assistance to you.

Best regards,
The 8Theme Team

Please contact administrator
for this information.

#417871 Copied

creativesite

Participant

October 9, 2024 at 15:49

Okay, Thank you very much!

#418020 Copied

Andrew Mitchell

Support staff

October 9, 2024 at 15:49

Dear creativesite,

We trust our theme is enhancing your experience. Taking a brief moment to rate it with a glowing 5 stars on ThemeForest would be immensely appreciated. Your feedback holds significant value for us.

Click here to rate now: https://themeforest.net/downloads

Thank you sincerely for your ongoing support!

Best Regards,
The 8Theme Team

#418021 Copied
Tagged: improve website navigation, menu image distance, optimize woocommerce menu, woocommerce themes, wordpress customization, wordpress menu text
Viewing 16 results - 1 through 16 (of 16 total)

The issue related to '‘Decreasing distance between menu image and menu text’' has been successfully resolved, and the topic is now closed for further responses

Decreasing distance between menu image and menu text

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection