Active Menu with permanently Particle (underline)

fbrugger · January 18, 2021, 1:46pm

Hi there

I would like to show the particles in a active menu, so that the user can see the activated menu with a underline on the current page. For example, when i am on the page “our company”, in the top menu “our company” should be permanetly highlighted with the same underline as on mouseover.

Thank you very much for your help!

tristup · January 19, 2021, 1:05pm

Hi Felix,

Thanks for reaching out.
It can be easily achieved if you are using the Header & Footer builder and the Navigation Inline. But that is exclusively available with the Pro, not the X.
Please find the screenshot describing the settings for Primary Particle.

In case you are using the X, you need to write the custom CSS code to achieve it, the following link might be helpful on this.

If you are using the X, I would suggest you upgrade into the Pro theme to get the customizable header options, please go through the process here: https://theme.co/docs/converting-from-x-to-pro

Thanks

fbrugger · January 19, 2021, 6:35pm

Hi Tristup

Thank you very much for your reply! Yes, I use Pro and I have set up the Primary Particle as shown in your screenshot. The underline shows up on mouseover, when I hover over a main menu wich is great. Bur what do I have to do that the active menu stays permanently underlined?

Thank you very much for your help!

ruenel · January 20, 2021, 10:13pm

Hey Felix,

To get your underline when you are on the current page, kindly check out the response of @Rad in this older thread:

Need help with current page highlight

Kindly let us know how it goes.

fbrugger · January 21, 2021, 6:28pm

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!

marc_a · January 22, 2021, 5:13pm

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.

fbrugger · January 22, 2021, 5:53pm

Hi Marc

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

fbrugger · January 23, 2021, 10:39am

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!

marc_a · January 25, 2021, 6:40am

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.

fbrugger · January 25, 2021, 10:21am

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!

tristup · January 26, 2021, 2:02pm

Hi Felix,

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

Thanks

fbrugger · January 26, 2021, 5:33pm

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!

kory · January 27, 2021, 5:21pm

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 Element → Menu → Active 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!

fbrugger · January 27, 2021, 7:14pm

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!

kory · January 28, 2021, 2:43pm

@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!

fbrugger · January 28, 2021, 5:24pm

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!

tristup · January 29, 2021, 10:15am

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

fbrugger · January 29, 2021, 4:05pm

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!

ruenel · January 30, 2021, 5:11am

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.

fbrugger · January 31, 2021, 12:27pm

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!