Navigation Tab Styling for Linked Tab

[gregbtm]

Hey

I have a navigation tab called badges that literally just has a link to my badges badge on the help section. I've managed to add an extra top border for selected menu items when on that page, but can't seem to do the same for this particular tab.

Any tips? Many thanks!

I've attached a screenshot of the page. Notice the white border line on the forum nav.

 

[Russ]

You should be able to add it via extra.less Find the unique class: https://pixelexit.com/pages/navigation-icons/

then the css should be something like this:

li.navsupport .p-navEl {
    border-top: 1px solid #000;
}

Side note, I can't access your site saying forbidden, I may be IP banned .

 

[gregbtm]

You should be able to add it via extra.less Find the unique class: https://pixelexit.com/pages/navigation-icons/

then the css should be something like this:

li.navsupport .p-navEl {
    border-top: 1px solid #000;
}

Side note, I can't access your site saying forbidden, I may be IP banned .

I completely destroyed my server by trying to upgrade to the next version, and I changed the usergroup/owner of all the files on the server except for the ones I wanted to. :/

Have to back up and rebuild. I'm so upset lol.

 

[gregbtm]

Hey bud.

I couldn't ever get this to work. I tried again recently, but no avail.

I want it so when I click on the 'badges' nav tab at the top, when that page is displayed - the top white border to that nav tab is applied, indicating that the visitor is on that page. If that makes sense. I think I confused myself with the initial post.

Best wishes

PS - Server is alive and kicking, thank god!

 

[Russ]

So apparently that help page doesn't include any custom classes to easily target it, sorry.

You'll need to edit the template help_page.

Add this:

<xf:if is="$page.page_id == 'trophies'">
    <xf:css>
        .navbadges .p-navEl
        {
        border-top: 3px solid #FFF;
        }
    </xf:css>
</xf:if>

Right above (line 9):

<xf:wrap template="help_wrapper" />

It essentially uses a XenForo conditional to check a specific value, if the value is the trophies page it'll include the CSS.

 

[gregbtm]

So apparently that help page doesn't include any custom classes to easily target it, sorry.

You'll need to edit the template help_page.

Add this:

<xf:if is="$page.page_id == 'trophies'">
    <xf:css>
        .navbadges .p-navEl
        {
        border-top: 3px solid #FFF;
        }
    </xf:css>
</xf:if>

Right above (line 9):

<xf:wrap template="help_wrapper" />

It essentially uses a XenForo conditional to check a specific value, if the value is the trophies page it'll include the CSS.

Thank you! I got around to applying this and it worked first time. You're always so helpful.

 

[Russ]

Thank you! I got around to applying this and it worked first time. You're always so helpful.

Great to hear and thank you!