XF 2.2 How to enable "Current Selection" on nav bar

RG70Hz

Active member
Greetings everyone. I am wondering why my nav bar isn't showing the current selection while under the selected tab.

I wanted to add a "Community" navigation link instead of the default "Forums" title. Doing this affected the current selection drop down arrow on nav bar.

How can I change this? See attached photos.

Also, How can I change the name from "Form List" to something else? Which template do I edit?

Thanks to anyone who may help.
 

Attachments

  • Screenshot 2023-03-12 at 8.13.21 PM.webp
    Screenshot 2023-03-12 at 8.13.21 PM.webp
    27.4 KB · Views: 23
  • Screenshot 2023-03-12 at 8.13.24 PM.webp
    Screenshot 2023-03-12 at 8.13.24 PM.webp
    8.9 KB · Views: 22
  • Screenshot 2023-03-12 at 8.13.21 PM.webp
    Screenshot 2023-03-12 at 8.13.21 PM.webp
    29.1 KB · Views: 19
Last edited:
Solution
But it would have been easier to keep the use of the original tab (Forums) and simply change its name because you are going to wander through the pages of your forum and your personalized tab will not be selected because you would have to add the code that I gave you in the previous message in all the templates concerned...
Edit the public navigation in ACP and add/sort sub-menus as you wish.
/admin.php?navigation/

View attachment 282913
Sorry, maybe my post doesn't do a good job of explaining my goal I am trying to achieve. Basically every other tab has this css inside except for the community tab. I am wondering how to add it to that tab in particular. Also, I do not have that add-on you're using to sort. Here is the code:

Code:
.p-nav-list .p-navEl.is-selected .p-navEl-link:after {
    position: absolute;
    width: 0;
    height: 0;
    bottom: 0;
    left: 50%;
    content: "";
    margin-left: -10px;
    border: 10px solid transparent;
    border-top-width: 0;
    border-bottom-color: #f8f8f8;
}

This adds the little arrow showing the current selected tab.
 

Attachments

  • Screenshot 2023-03-12 at 10.19.54 PM.webp
    Screenshot 2023-03-12 at 10.19.54 PM.webp
    46.4 KB · Views: 11
  • Screenshot 2023-03-12 at 10.20.13 PM.webp
    Screenshot 2023-03-12 at 10.20.13 PM.webp
    52.5 KB · Views: 12
But it would have been easier to keep the use of the original tab (Forums) and simply change its name because you are going to wander through the pages of your forum and your personalized tab will not be selected because you would have to add the code that I gave you in the previous message in all the templates concerned...
 
Solution
But it would have been easier to keep the use of the original tab (Forums) and simply change its name because you are going to wander through the pages of your forum and your personalized tab will not be selected because you would have to add the code that I gave you in the previous message in all the templates concerned...
Yeah I agree. That's what I originally wanted to do but wouldn't let me edit the tab in navigation. I will just edit the phrase. Thank you again
 
But for nodes and categories, if you ant to keep your custom tab, just edit them and select the right navigation section ;)

View attachment 282916
On a side note, do you know how I could get this working with the ipbee style? Im not so much concerned with the toggle list but more so the "new" block

CSS:
// Display New on Post
.structItem.is-unread .structItem-title a:not(.labelLink):after {
    content: "NEW";
    display: inline-block;
    background: @xf-uix_primaryColor;
    padding: 1px 4px;
    font-size: 11px;
    color: #FFF;
    border-radius: 3px;
    margin-left: 5px;
    position: relative;
    top: -2px;
}

/* Node Collapse Toggle */
.block--category
{
    .collapseTrigger
    {
        opacity: 0.5;
        transition: opacity 0.3s;
        margin-right: 10px;
        &.is-active:before
        {
            content: "\f205";
            transform: scale(-1, 1);
            margin-right: -8px;
        }
        &:before
        {
            content: "\f205";
            font-size: 80%;
        }
    }
    .block-container:hover .collapseTrigger
    {
        opacity: 1;
    }
}

.collapsible-nodes
{
        .block-header
        {
            display: flex;
        }
        .block-header--left
        {
            margin-right: auto;
            max-width: 100%;
        }
}

.block-body.block-body--collapsible
{
    transition: all 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    -webkit-transition-property: all, -xf-opacity;
    transition-property: all, -xf-opacity;
    overflow-y: hidden;
    height: 0;
    -webkit-transition-property: all, -xf-height;
    transition-property: all, -xf-height;
}
 
Back
Top Bottom