Active Menu with permanently Particle (underline)

Hi Ruenel

Thank you very much for your reply. I have set up the website with Pro version 3.2.3 and the highlighted particles for current pages has already worked well with this version. Since I have updated to Pro version 4.0.11 the highlighted Primary Particle only shows up on mouseover. I didn’t change anything at JS. or CSS.

Thank you very much for your help!

Hi Felix,

To better help you further with your issue, we need to check the settings. To do that, please give us the following information in a Secure Note.

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

Hi Marc

Thank you very much for your help! Here are the login informations:

Hi Marc

I have found the problem, it is very simple: the “Active Links Setup” was set to “off”. Since I have switched it to “on” it works perfectly! Strangely, in Pro version 3.2.3 it was turned off too, but the active menu on current page was shown. However, now it works!

Thanks again for your always great support!

Hi Felix,

We’re glad that you’re able to find a suitable solution to your issue. If you have any other concerns regarding our theme features, feel free to reach us.

Thank you.

Hi Marc

I have some Pages in Pro, which are connected to a parent menu from the main menu. Is it also possible to highlight the active particle from the parent menu, when this child-pages are active on display?

Thank you very much for your help!

Hi Felix,

Regretfully, there is no such option to activate the Primary Particle for the parent menu while the child menu is active.

Thanks

Hi Tristup

Thank you very much for your reply.

In a older topic from Jan. 2019 I had the same problem with your Integrity Submenu:
https://theme.co/forum/t/integrity-submenu/50308/27

In this topic Nabeel told me this CSS which worked fine for child menu:

.x-navbar .x-nav-wrap .x-nav > li.current-menu-parent > a > span, .x-navbar .x-nav-wrap .x-nav > li.current-page-ancestor > a > span {
box-shadow: inset 0 -2px 0 0 #baafa5;
color: #baafa5;
padding-bottom: 8px;
}

I tryed this code but It didn’t work with Pro.

What do I do wrong?

Thank you very much for your help!

Howdy, @fbrugger…thanks for writing in, and sorry for some of the confusion on this thread. You can specify how particles should show up for “current” and “ancestor” links in your Navigation using native options in the Builders. To do this, go to your Navigation ElementMenuActive Links Setup:

This is where you can tell your Navigation Element to place certain graphics or particles in their “active” state for certain menu items. By default, you can see that this is turned on for “Current Link” and “Ancestor Links” at the top, so this means that any of the last three toggles you enable will be applied to both of those situations. So, if you wanted your Primary Particle to be always visible for both of these contexts, simply turn that switch to On and you should get your desired result. If you only wanted to target the “Current Link,” you could turn Off the “Ancestor Links” control, or vice versa if you only wanted to highlight the tree leading to the current link.

Hopefully this helps to clear things up, cheers!

Hi Kory

Thank you very much for your reply and your help. I have set the Active Links Setup as you told me and this works fine, if I set the Child-Page as a Submenu in the Menu-Structure (see screenshot 1 and 2).

But I don’t want to show a fly-out menu from my main menu. To avoid this, I have set the Content-Page as a Child Page to the main menu in Pages-Setup (see screenshot 3).

For this case, Nabeel sent me the CSS above for a other X-website, but unfortunately with this page and Pro, it is not working.

Thank you vey much for your help!



@fbrugger, thanks for sharing all that, unfortunately I’m not quite sure what you’re attempting to accomplish with this setup. Can you help to provide a little more context? I’m not understanding the issue with your menu and having a page as a submenu…if you cold explain a little further what your exact goal is with everything, we can help provide a more clear direction on things. Cheers!

Hi Kory

Thank you very much for your reply. Sorry for my bad explanation but I will try to show you what i mean with the website I have built with X and inserted the CSS which i have got from Nabeel.

The Menu “Impressions” on this page has no submenu:

But this page provides a lot of links to separate pages with videos. All this video pages are not set as a submenu from the main menu “Impressions” but are set as child pages from this parent page. So if you klick on one of the videos, this child-page opens and the main menu “Impressions” still stays active:

Now I would like to achieve the same effect on my Pro website but unfortunately the provided CSS is not working.

I am sure there is a much easier way to achieve that in Pro than with CSS, because i think, this is a common praxis for showing projects etc. without building a massive long fly-out menu.

thank you very much for your help!

Hi Felix,

As explained by my colleague, if you are using Pro, Header & Footer builder and using the Navigation element, that is only possible to highlight the parent menu if the child page is added as an Ancestor Menu Item of that specific Menu.

Thanks

Hi Tristup

Thank you very much for your reply. But with that provided CSS it works perfect with X-Theme. Is it not possible to adapt this CSS for this page in Pro?

Thank you very much for your help!

Hello Felix,

Thanks for the updates. Please be advised that the Pro navigation inline element and the default navigation of the X theme do not have the same structure which is why you cannot use the custom CSS when you are using the custom Pro header.

Hope this helps.

Hi Ruenel

Thank you very much for your reply. But what would be the solution for acheiving this effect with the Pro header? Would it be possible to hide the Ancestor Menu Item in that specific Menu, so that I would not get a huge fly-out submenu with 25 Ancestor Menu Items?

Thank you very much for your help!

Hi Felix,

Regretfully, there is no such option to do so with the Pro header. We also discourage using the custom CSS code, as we don’t support any issue on the custom codes or related issues.

Thanks

Hi Tristup

Thank you very much for your reply. OK, I understand. Maybe this option would be a feature for Pro Header in the future, as like I said, this function is very common on many other websites to avoid massive and confusing fly-out submenus.

Thanks again!

Hi Felix,

Thanks for understanding our point. The default header has the option which you are expecting, and as a solution, you can use the default headers for those pages.

Hope it helps.
Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.