XF 2.2 Remove site navigation from a NODE -> PAGE

Chernabog

Chernabog

Well-known member
Hi, I've searched the forums, but cannot find an exact answer for this. Is it possible to use some form of XF syntax within the HTML of a created PAGE to remove/hide the navigation (and even visitor tab would be helpful but at least the nav) ?? A setup I am trying to create is conflicting with the navigation when used, so we really need to have that not display on this particular page. We don't want to use an outside HTML page, because we still want the other community features and look/feel to remain.

Any help would be truly appreciated! Thank you!
 
Solution
Paul B
You don't add it to the page node, you add it to the extra.less template.

This will hide the main nav on wide screens:

Less: 
[data-container-key="node-3"]
{
    .p-nav-scroller
    {
        display: none;
    }
}

You may want to add extra classes for the sub nav, the nav on narrow screens, etc. if that is also an issue.

Change the x to the page node ID - use the browser inspector to check that and the classes.

1690841542115.png
Sort by date Sort by votes
Do you just want to hide the elements using CSS, or remove them from being rendered on the page?

The former is possible using:

Less: 
[data-container-key="node-x"]
{
    .class
    {
        display: none / visibility: hidden;
    }
}

The latter requires template edits.
 
Upvote 1 Downvote
CSS is fine..it's just this ONE page I have that I want to remove the navi from because the telnet embed is causing navigation to get chosen some how...

How do I implement that code? It looks like it belongs in "Extra.less" but how would I implement it in the actual node page -- if you don't mind me asking?

Appreciate you @Brogan
 
Upvote 1 Downvote
You don't add it to the page node, you add it to the extra.less template.

This will hide the main nav on wide screens:

Less: 
[data-container-key="node-3"]
{
    .p-nav-scroller
    {
        display: none;
    }
}

You may want to add extra classes for the sub nav, the nav on narrow screens, etc. if that is also an issue.

Change the x to the page node ID - use the browser inspector to check that and the classes.

1690841542115.png
 
Upvote 1 Downvote
Solution
@Brogan awesome mate! It looks like its working perfectly... just that one page's navi is gone. Thank you!

Just gonna make a side note here.. is there ANY reason, or is this just an issue on my end, that whenever I hit the "M" key on my keyboard it opens up the visitor tab and then if pressed again goes into my /account/ ?? THIS it seems is one of the real challenges.... I am hoping it's just me... but does this make any sense? lol
 
Last edited:
Upvote 1 Downvote
Okay...so sorry to be a pain but I did the above... I emptied out the shortcuts phrases and it worked. Today I noticed that i f I type a "1" now the FIRST navigation open is opening up..2 and so on. I cannot find ANY phrases that relate to that or any other shortcut phrases... nothing relating to navigation at all...

Am I missing something??? :( :( @Jeremy P @Brogan .... I've tried to search everywhere I could... I cannot figure out why it's doing that.

Does there HAVE to be data in the shortcut phrases? I'll try some random unused character to see if that fixes it... but I cannot imagine what else would be making numbers 1-whatever open up each navigation item ... :(

...could I just delete the shortcut phrases as I have no desire for them??
 
Upvote 1 Downvote
So attempting to do my research and work it out on my own. I did not find anything that seemed to account for navigation items being assigned a 1 through 0 numeric macro. So I found the template page_nav and I believe I see it here. I do not fully understand the code, but it looks like this is the template that tells Xenforo if someone presses 1 open up the menu/submenu options for the first item on their navigation bar.

PHP: 
<nav class="pageNavWrapper pageNavWrapper--{{ property('pageNavStyle') }} {$variantClass}">

<xf:set var="$hasSkipStart" value="{{ $startInner > 2 }}" />
<xf:set var="$hasSkipEnd" value="{{ $endInner + 1 < $totalPages }}" />
<div class="pageNav {{ $hasSkipStart ? 'pageNav--skipStart' : '' }} {{ $hasSkipEnd ? 'pageNav--skipEnd' : '' }}">
    <xf:if is="$prev">
        <a href="{$prev}" class="pageNav-jump pageNav-jump--prev">{{ phrase('prev') }}</a>
    </xf:if>

    <ul class="pageNav-main">
        <xf:macro name="page_link"
            arg-page="1"
            arg-current="{$current}"
            arg-link="{$link}"
            arg-data="{$data}"
            arg-params="{$params}"
            arg-hash="{$hash}"
            arg-pageParam="{$pageParam}" />

        <xf:if is="$hasSkipStart">
            <xf:if is="$startInner == 3">
                <xf:macro name="page_link"
                    arg-page="2"
                    arg-current="{$current}"
                    arg-link="{$link}"
                    arg-data="{$data}"
                    arg-params="{$params}"
                    arg-hash="{$hash}"
                    arg-pageParam="{$pageParam}"
                    arg-pageClass="pageNav-page--earlier" />
                <xf:else />
                <li class="pageNav-page pageNav-page--skip pageNav-page--skipStart">
                    <a data-xf-init="tooltip" title="{{ phrase('go_to_page')|for_attr }}"
                        data-xf-click="menu"
                        role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{$xf.language.ellipsis}</a>
                    <xf:macro name="page_jump_menu"
                        arg-page="{{ $startInner - 1 }}"
                        arg-totalPages="{$totalPages}"
                        arg-link="{$link}"
                        arg-data="{$data}"
                        arg-params="{$params}"
                        arg-hash="{$hash}"
                        arg-pageParam="{$pageParam}" />
                </li>
            </xf:if>
        </xf:if>

        <xf:foreach loop="$innerPages" value="$page">
            <xf:macro name="page_link"
                arg-page="{$page}"
                arg-current="{$current}"
                arg-link="{$link}"
                arg-data="{$data}"
                arg-params="{$params}"
                arg-hash="{$hash}"
                arg-pageParam="{$pageParam}"
                arg-pageClass="{{ $page < $current ? 'pageNav-page--earlier' : ($page > $current ? 'pageNav-page--later' : '' ) }}" />
        </xf:foreach>

        <xf:if is="$hasSkipEnd">
            <xf:if is="$endInner + 2 == $totalPages">
                <xf:macro name="page_link"
                    arg-page="{{ $totalPages - 1 }}"
                    arg-current="{$current}"
                    arg-link="{$link}"
                    arg-data="{$data}"
                    arg-params="{$params}"
                    arg-hash="{$hash}"
                    arg-pageParam="{$pageParam}"
                    arg-pageClass="pageNav-page--later" />
            <xf:else />
                <li class="pageNav-page pageNav-page--skip pageNav-page--skipEnd">
                    <a data-xf-init="tooltip" title="{{ phrase('go_to_page')|for_attr }}"
                        data-xf-click="menu"
                        role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{$xf.language.ellipsis}</a>
                    <xf:macro name="page_jump_menu"
                        arg-page="{{ $endInner + 1 }}"
                        arg-totalPages="{$totalPages}"
                        arg-link="{$link}"
                        arg-data="{$data}"
                        arg-params="{$params}"
                        arg-hash="{$hash}"
                        arg-pageParam="{$pageParam}" />
                </li>
            </xf:if>
        </xf:if>

        <xf:macro name="page_link"
            arg-page="{$totalPages}"
            arg-current="{$current}"
            arg-link="{$link}"
            arg-data="{$data}"
            arg-params="{$params}"
            arg-hash="{$hash}"
            arg-pageParam="{$pageParam}" />
    </ul>

    <xf:if is="$next">
        <a href="{$next}" class="pageNav-jump pageNav-jump--next">{{ phrase('next') }}</a>
    </xf:if>
</div>

<div class="pageNavSimple">
    <xf:if is="$current > 1">
        <a href="{{ link($link, $data, $params + {($pageParam): 1}, $hash) }}"
            class="pageNavSimple-el pageNavSimple-el--first"
            data-xf-init="tooltip" title="{{ phrase('first')|for_attr }}">
            <i aria-hidden="true"></i> <span class="u-srOnly">{{ phrase('first') }}</span>
        </a>
        <a href="{{ link($link, $data, $params + {($pageParam): $current - 1}, $hash) }}" class="pageNavSimple-el pageNavSimple-el--prev">
            <i aria-hidden="true"></i> {{ phrase('prev') }}
        </a>
    </xf:if>

    <a class="pageNavSimple-el pageNavSimple-el--current"
        data-xf-init="tooltip" title="{{ phrase('go_to_page')|for_attr }}"
        data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">
        {{ phrase('x_of_y', {'current': $current, 'total': $totalPages}) }}
    </a>
    <xf:macro name="page_jump_menu"
        arg-page="{$current}"
        arg-totalPages="{$totalPages}"
        arg-link="{$link}"
        arg-data="{$data}"
        arg-params="{$params}"
        arg-hash="{$hash}"
        arg-pageParam="{$pageParam}" />

    <xf:if is="$current < $totalPages">
        <a href="{{ link($link, $data, $params + {($pageParam): $current + 1}, $hash) }}" class="pageNavSimple-el pageNavSimple-el--next">
            {{ phrase('next') }} <i aria-hidden="true"></i>
        </a>
        <a href="{{ link($link, $data, $params + {($pageParam): $totalPages}, $hash) }}"
            class="pageNavSimple-el pageNavSimple-el--last"
            data-xf-init="tooltip" title="{{ phrase('last')|for_attr }}">
            <i aria-hidden="true"></i> <span class="u-srOnly">{{ phrase('last') }}</span>
        </a>
    </xf:if>
</div>

</nav>

<xf:macro name="page_link"
    arg-page="!"
    arg-current="!"
    arg-link="!"
    arg-data="!"
    arg-params="!"
    arg-hash=""
    arg-pageParam="!"
    arg-pageClass="">

    <xf:if is="$page == $current">
        <li class="pageNav-page pageNav-page--current {$pageClass}"><a href="{{ link($link, $data, $params + {($pageParam): ($page > 1 ? $page : null)}, $hash) }}">{$page}</a></li>
    <xf:else />
        <li class="pageNav-page {$pageClass}"><a href="{{ link($link, $data, $params + {($pageParam): ($page > 1 ? $page : null)}, $hash) }}">{$page}</a></li>
    </xf:if>
</xf:macro>

<xf:macro name="page_jump_menu"
    arg-page="!"
    arg-totalPages="!"
    arg-link="!"
    arg-data="!"
    arg-params="!"
    arg-hash=""
    arg-pageParam="!">

    <div class="menu menu--pageJump" data-menu="menu" aria-hidden="true">
        <div class="menu-content">
            <h4 class="menu-header">{{ phrase('go_to_page') }}</h4>
            <div class="menu-row" data-xf-init="page-jump" data-page-url="{{ link($link, $data, $params + {($pageParam): '%page%'}, $hash) }}">
                <div class="inputGroup inputGroup--numbers">
                    <xf:numberbox class="input input--numberNarrow js-pageJumpPage" value="{$page}" min="1" max="{$totalPages}" data-menu-autofocus="true" />
                    <span class="inputGroup-text"><xf:button class="js-pageJumpGo">{{ phrase('go') }}</xf:button></span>
                </div>
            </div>
        </div>
    </div>
</xf:macro>

I am little afraid to just haphazardly go in there and change stuff. Would anyone be willing to perhaps let me know how much I can cut out to stop the navigation macros from working? Or where I should chop? I just don't want to do anything that will hurt our build without asking for some assistance. There may be an easier area to cut out than I am thinking that may help.

Appreciate any further help - thank you!
 
Upvote 1 Downvote
The navigation shortcuts correspond to the order they appear in the menu. They are set directly in the PAGE_CONTAINER template (arg-shortcut="{$i}"). Brogan is right that you can remove references to data-xf-key to disable this.
 
Upvote 1 Downvote
Jeremy P said:
The navigation shortcuts correspond to the order they appear in the menu. They are set directly in the PAGE_CONTAINER template (arg-shortcut="{$i}"). Brogan is right that you can remove references to data-xf-key to disable this.
Click to expand...
I'll look again in page_container... I didn't see the "1,""2,""3," etc reference to the macros causing the nav menus to open when pressed.. May have missed them will do another look through! Thank you -- I'll try not to be a bother if I can figure it out.
 
Upvote 1 Downvote
You must log in or register to reply here.

Similar threads

Seeker-Smith
  • Question Question
XF 2.2 Using BB code in a node page
Replies
2
Views
89
Seeker-Smith
Seeker-Smith
Chernabog
  • Question Question
XF 2.2 I turned a node page into my Xenforo's homepage and I cannot remember how I did it to replicate elsewhere
Replies
18
Views
1K
CtrlV
CtrlV
Gsk8
  • Question Question
XF 2.2 Update/remove "reactions" from a node?
Replies
3
Views
737
Paul B
Paul B
D
  • Question Question
XF 2.1 Navigation from XFMG to a page not working
Replies
3
Views
594
Jeremy P
Jeremy P
Wildcat Media
XF 2.1 Node page and template syntax: Can I retrieve a single post?
Replies
7
Views
690
Wildcat Media
Wildcat Media
Top Bottom