Underlining the active site in the navigation menu

[DH27]

Hi!

Two years ago I created a website with the Pro theme where I managed to underline the active site in the navigation menu. It looks like this and works well:

Unfortunately, I am simply unable to recreate this behaviour on the website I am currently working on. I have looked not only into the theme options, the theme-file and the custom code (CSS and JS) but also into the navigation inline element itself. Strangely enough, I have not done this via primary particles in the navigation inline element. I tried using that method, following this tutorial: X Pro - Navigation inline active menu underline, but unfortunately it leads to behaviour such as this:

or this:

Is there anywhere else I could check for how I created the underlining two years ago? Or is there a different way to get it to look like in my first screenshot?

Thanks!

[ruenel]

Hey Daniel,

Thanks for writing in! Are you using the default header or have you created a custom header? For the default headers, you have used a custom CSS or that underline is built-in with the stack you were using. There should be. way to do that in your Theme Options settings. It would be great if you could provide us with the link to your site so we can check and give you a more suitable response to resolve your issue.

Best Regards.

[DH27]

Hi Ruenel,

thanks for your response! On both websites I am using the Renew stack with everything in the theme options being the same. The header itself is built in pro theme, consisting of a bar, two containers and navigation inline. The links to the websites are:
https://www.economica.eu/ (the reference for how it should look)
https://www.piratehorizons.com/ (where I would like to have it look as well)

Please let me know if you need access to the sites via secure note!
Thanks!

[tristup]

Hi Daniel,

For that, you need to enable the Primary Particle option in the Navigation Inline element. You need to adjust the attributes in Primary Particle as shown in the given screenshot.

Hope it helps.
Thanks

[DH27]

Hi Tristup,

thanks for your response. I tried this solution but it leads to the behaviour shown in my first message with the second and third screenshot. Sadly, it either is way off compared to where the text is (second screenshot) or the entire navigation inline moves up and is no longer positioned centered.

[tristup]

Hi Daniel,

As I said in my reply, you need to adjust the attribute values of Primary Particle to acheive what you are expecting here.

Thanks

[DH27]

Hi Tristup,

thanks again for replying. I have followed your advice and tinkered around with the primary particle. However, I have not managed to get the bar under the top link to be as close to it as in my first screenshot (see screenshot below). Could you advise me on how to get it to be close the top link without moving the position of the top links themselves?

[prakash_s]

Hello Daniel,

I would suggest you go to the Navigation inline element —>customize —>Element CSS and add this custom CSS code.

$el span.x-particle.is-primary {
    bottom: 2em;
}

Please feel free to change the bottom value as per your design. The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[DH27]

Hi Prakash,

this is perfect. It solved my problem within seconds. Thank you very much!

Daniel

[tristup]

Hi Daniel,

Glad that we are able to help you.

Thanks