Break long menus to new line in X-Pro Footer Menu

[fbrugger]

Hi there

I am using X-Pro Footer builder and I have set up two menu bars, one for desktop and one for mobile, which are hidden or shown in the needed device-view.

The desktop menu is a horizontal bar, which shows the menu in one row. But there are now 8 menu-points in a row, which is too long for the smallest desktop view. Is there a possibility to break the menu in a new line, if there is more room needed? It would be great if the menu in this case could break down centered.

Thank you very much for your help!

[ruenel]

Hello Felix,

Thanks for writing in! I am not sure if I am checking the correct site. I am seeing this:

Regretfully, there isn’t an option in the theme that breaks down the menu items into a new line. It is best that you create another set of the menu in Appearance > Menus by making the menu items into two groups. You can then load the menus in two containers in your bar for smaller screens.

Best Regards.

[fbrugger]

Hi Ruenel

Thank you very much for your great advice! This is exactly what I was looking for!

The menu didn’t concern this particular website but I see, I have to correct this one too.

But now I have found a other problem with this footer-menu. The text should be white in the passive state. On hover, the text should be 50% white and gets a 50% white particle underline. The active menu item should be 100% white again with a 50% white particle underline. The desktop version is displaying like so, which is perfect (see screenshot 1).

However, the tablet and mobile version are displaying a 50% white text at active menu item (see screenshot 2 and 3). Any idea why this could be?

Thank you very much for your help!

[ruenel]

Hello Felix,

To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[fbrugger]

Hi Ruenel

Thank you very much for your support! Yes of course you can access my page and make changes. Here are the login data.

Thank you very much for looking into this and for your help!

[ruenel]

Hello Felix,

The issue is coming from your navigation inline element settings.

I went ahead and already corrected the issue. Please check your footer now.

[fbrugger]

Hi Ruenel

Thank you very much for your reply and support! Yes I have tryed this settings too but now, the hover effect of 50% white is gone with this menu items. Stangely with the desktop version of the footer menu I have the same settings and there it is, as I want it.

Thanks again for your help!

[tristup]

Hi Felix,

Glad to help you with this.

Thanks

[fbrugger]

Hi Tristup

Thank you very much for your reply. But I would like to have the hover effect with 50% white. Only with the active menu item, it should be 100% white again.

The text should be white in the passive state. On hover, the text should be 50% white and gets a 50% white particle underline. The active menu item should be 100% white again with a 50% white particle underline. The desktop version is displaying perfect like this, but the tablet- and mobile version have a 50% white text at the active state of the menu item.

Thank you very much for your help!

[prakash_s]

Hello Felix,

You need to go to Pro—>Header —>Selec the Header and click on the Eidt—>go to the Navigation element —>Enable the Primary Particle —> Now you need to set the width as 50%(as per your design)
Please have a look at the given screenshot below.

Hope it helps
Thanks

[fbrugger]

Hi Prakash

Thank you very much for your reply. Sorry, I think here is a missunderstanding. I would like to have the color of the footer menu text 50% white on hover only. The active and the passive state should have a text color of 100% white. Is this possible?

Thank you very much for your help!

[tristup]

Hi Felix,

Regretfully, there is no such option for that. What you are expecting is required customization, I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where the customization questions are answered.

I would suggest you go through the following article, which may help you with this.

1. https://css-tricks.com/4-ways-to-animate-the-color-of-a-text-link-on-hover/
2. https://www.kirupa.com/html5/sliding_background_effect_on_link_hover.htm

Thanks

[fbrugger]

Hi Tristup

Thank you very much for your reply and the links. I just thought it must be possible, because with me (Chrome and Safari Browser) in the desktop version of this particular footer menu it is exactly like I want it to be. Only in the tablet and mobile version the text of the active menu item has the color of 50% white (see screenhots I have sent earlier).

Thanks again for your statement and for your help!

[tristup]

Hi Felix,

You are most welcome.

[fbrugger]

Hi Tristup

But do you have any idea, why it works on my website with the desktop version and not with the tablet and mobile version?

Thanks again!

[ruenel]

Hey Felix,

Please double-check the base and interaction styling of the navigation element for the tablet/mobile version. Making sure that it has the same setting as the desktop version should resolve your issue.

Best Regards.

[fbrugger]

Hi Ruenel

Thank you very much for coming back to my issue! As far I can see, there are only two possibilities for setting the text colors of the footer menu: “Base” and “Interaction”. The Interaction color is for “hover” and “active” state, while the Base color is for the passive state (see attachment 1).

These settings are all the same for my desktop-, tablet- and mobile-menu.

But there must be a possibility to set a color for the active state separately. When I set the “Interaction” color to red, this red text color appears only on the “hover” state and the “active” state stays white (see attachment 2). This is exactly what I want but this is only happening on my desktop version.

Unfortunately I don’t find a possibility to set this white color for the “active” sate.

Can you help me please! Thank you very much!

[ruenel]

Hello Felix,

Regretfully there isn’t an option in the element settings that you can set the “Active” of the menu item. It may only be possible with custom CSS code which is beyond the scope of our support.

We may be able to guide you in accomplishing the idea. You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

Based on the screenshot above, you can use something like this:

.x-menu li.current-menu-item > .x-anchor .x-anchor-text-primary {
    color: red !important;
}

You can use this sample code and experiment with the outcome by adding the code above in Theme Options > CSS.

Reminder: We are only giving your an example for you to start your modifications. Any results from these modifications might cause any issues sooner or later. Please be advised that heavy modifications of any feature or functions in the theme is beyond the scope of our support. Any results that will complicate things or even messed up the page will be your sole responsibility.

Note: If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance. We are unable to provide support for customizations under our Support Policy.

Best Regards.

[fbrugger]

Hi Ruenel

Yes, that is exactly what I was looking for! Thank you very much for your great help!

Now the three menu states have on all three device-views the color as I want it. Only stange, why it was already like this in the desktop view without the CSS.

However, now it ist perfect!

Thanks again for your exceptional support!

[marc_a]

Hi Felix,

You’re welcome and it’s our pleasure to help you. If you have any other concerns regarding our theme features, feel free to reach us.

Thank you.