XF 2.2 How can I display a tab on mobile?

[Ivancas]

Unfortunately on mobile all the tabs are hidden in the hamburger menu:




So I'd like to add a navbar just at the right of the hamburger menu:


Any ideas?

 

[stellaethra]

It will be difficult to put navigation there, because you are obviously dealing with a very small space.

However, if you want to put the navigation elements as icons, it looks like you can fit at least about 4 elements.

If this is fine for you, I can help you with the code.

 

[Ivancas]

It will be difficult to put navigation there, because you are obviously dealing with a very small space

The space is enought to set a text like 'Advertise'. That's all I need

 

[stellaethra]

The space is enought to set a text like 'Advertise'. That's all I need

I have prepared something simple for you, hope it fulfills your wishes.

---

Instructions

In the PAGE_CONTAINER template, find this code block:

<div class="p-nav-smallLogo">
    <a href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
        <img src="{{ base_url(property('publicLogoUrl')) }}" srcset="{$srcset}" alt="{$xf.options.boardTitle}"
            width="{{ property('publicLogoWidth') ?: '' }}" height="{{ property('publicLogoHeight') ?: '' }}" />
    </a>
</div>

Just below it, add the following code:

<div class="p-mobile-nav">
  <xf:foreach
    loop="$navTree"
    key="$navSection"
    value="$navEntry"
    i="$i"
    if="{{ $navSection != $xf.app.defaultNavigationId }}"
  >
    <xf:if is="$navSection === 'mobile_ad'">
      <div class="p-navgroup-link">
        <xf:macro
          name="nav_entry"
          arg-navId="{$navSection}"
          arg-nav="{$navEntry}"
          arg-selected="{{ $navSection == $pageSection }}"
          arg-shortcut="{$i}"
        />
      </div>
    </xf:if>
  </xf:foreach>
</div>

Then in your extra.less template, add the following code:

.p-nav-list [data-nav-id='mobile_ad'] {
  display: none;
}

.p-nav-smallLogo {
  /* Only if you want to hide the logo. */
  display: none !important;
}

.p-mobile-nav {
  display: none;
  align-self: center;
}

.p-mobile-nav a {
  text-decoration: none !important;
}

@media (max-width: 650px) {
  .p-mobile-nav {
    display: block;
  }
}

Finally, add your navigation from admin.php?navigation/ as normal. You only need to set its ID as mobile_ad.

That's it. Of course, there is more than one way to achieve this, but this should be enough for you.

Let me know if there are any problems.

 

[Ivancas]

I have prepared something simple for you, hope it fulfills your wishes.

---

Instructions

In the PAGE_CONTAINER template, find this code block:

<div class="p-nav-smallLogo">
    <a href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
        <img src="{{ base_url(property('publicLogoUrl')) }}" srcset="{$srcset}" alt="{$xf.options.boardTitle}"
            width="{{ property('publicLogoWidth') ?: '' }}" height="{{ property('publicLogoHeight') ?: '' }}" />
    </a>
</div>

Just below it, add the following code:

<div class="p-mobile-nav">
  <xf:foreach
    loop="$navTree"
    key="$navSection"
    value="$navEntry"
    i="$i"
    if="{{ $navSection != $xf.app.defaultNavigationId }}"
  >
    <xf:if is="$navSection === 'mobile_ad'">
      <div class="p-navgroup-link">
        <xf:macro
          name="nav_entry"
          arg-navId="{$navSection}"
          arg-nav="{$navEntry}"
          arg-selected="{{ $navSection == $pageSection }}"
          arg-shortcut="{$i}"
        />
      </div>
    </xf:if>
  </xf:foreach>
</div>

Then in your extra.less template, add the following code:

.p-nav-list [data-nav-id='mobile_ad'] {
  display: none;
}

.p-nav-smallLogo {
  /* Only if you want to hide the logo. */
  display: none !important;
}

.p-mobile-nav {
  display: none;
  align-self: center;
}

.p-mobile-nav a {
  text-decoration: none !important;
}

@media (max-width: 650px) {
  .p-mobile-nav {
    display: block;
  }
}

Finally, add your navigation from admin.php?navigation/ as normal. You only need to set its ID as mobile_ad.

That's it. Of course, there is more than one way to achieve this, but this should be enough for you.

Let me know if there are any problems.

Thanks! It worked.

Can you explain me every option of the foreach block? I'm trying to understand what they do

 

[stellaethra]

Thanks! It worked.

Can you explain me every option of the foreach block? I'm trying to understand what they do

This is just the original XF navigation loop. You can understand what they do by analyzing the HTML output of the navigation macro.

Here is the full code of the macro, which can be found at the bottom of the PAGE_CONTAINER template:

<xf:macro name="nav_entry" arg-navId="!" arg-nav="!" arg-selected="{{ false }}" arg-shortcut="">
    <div class="p-navEl {{ $selected ? 'is-selected' : '' }}" {{ $nav.children ? 'data-has-children="true"' : '' }}>
        <xf:if is="$nav.href">

            <xf:macro name="nav_link"
                arg-navId="{$navId}"
                arg-nav="{$nav}"
                arg-class="p-navEl-link {{ $nav.children ? 'p-navEl-link--splitMenu' : '' }}"
                arg-shortcut="{{ $nav.children ? false : $shortcut }}" />

            <xf:if is="$nav.children"><a data-xf-key="{$shortcut}"
                data-xf-click="menu"
                data-menu-pos-ref="< .p-navEl"
                class="p-navEl-splitTrigger"
                role="button"
                tabindex="0"
                aria-label="{{ phrase('toggle_expanded')|for_attr }}"
                aria-expanded="false"
                aria-haspopup="true"></a></xf:if>

        <xf:elseif is="$nav.children" />

            <xf:if is="$selected">
                <xf:macro name="nav_link"
                    arg-navId="{$navId}"
                    arg-nav="{$nav}"
                    arg-class="p-navEl-link" />
            <xf:else />
                <a data-xf-key="{$shortcut}"
                    data-xf-click="menu"
                    data-menu-pos-ref="< .p-navEl"
                    class="p-navEl-linkHolder"
                    role="button"
                    tabindex="0"
                    aria-expanded="false"
                    aria-haspopup="true">
                    <xf:macro name="nav_link"
                        arg-navId="{$navId}"
                        arg-nav="{$nav}"
                        arg-class="p-navEl-link p-navEl-link--menuTrigger" />
                </a>
            </xf:if>

        <xf:else />

            <xf:macro name="nav_link"
                arg-navId="{$navId}"
                arg-nav="{$nav}"
                arg-class="p-navEl-link"
                arg-shortcut="{$shortcut}" />

        </xf:if>
        <xf:if is="$nav.children">
            <div class="menu menu--structural" data-menu="menu" aria-hidden="true">
                <div class="menu-content">
                    <xf:foreach loop="$nav.children" key="$childNavId" value="$child">
                        <xf:macro name="nav_menu_entry"
                            arg-navId="{$childNavId}"
                            arg-nav="{$child}" />
                    </xf:foreach>
                </div>
            </div>
        </xf:if>
    </div>
</xf:macro>

<xf:macro name="nav_link" arg-navId="!" arg-nav="!" arg-class="" arg-titleHtml="" arg-shortcut="{{ false }}">
    <xf:set var="$tag" value="{{ $nav.href ? 'a' : 'span' }}" />
    <{$tag} {{ $nav.href ? 'href="' . $nav.href . '"' : '' }}
        class="{{ trim($class) }} {$nav.attributes.class}"
        {{ attributes($nav.attributes, ['class']) }}
        {{ $shortcut !== false ? 'data-xf-key="' . $shortcut . '"' : '' }}
        data-nav-id="{$navId}"><xf:if is="$nav.icon"><xf:fa icon="{$nav.icon}" /> </xf:if>{{ $titleHtml ? $titleHtml|raw : $nav.title }}<xf:if is="$nav.counter"> <span class="badge badge--highlighted">{$nav.counter|number}</span></xf:if></{$tag}>
</xf:macro>

<xf:macro name="nav_menu_entry" arg-navId="!" arg-nav="!" arg-depth="0">
    <xf:macro name="nav_link"
        arg-navId="{$navId}"
        arg-nav="{$nav}"
        arg-class="menu-linkRow u-indentDepth{$depth} js-offCanvasCopy" />
    <xf:if is="$nav.children">
        <xf:foreach loop="$nav.children" key="$childNavId" value="$child">
            <xf:macro name="nav_menu_entry"
                arg-navId="{$childNavId}"
                arg-nav="{$child}"
                arg-depth="{{ $depth + 1 }}" />
        </xf:foreach>
        <xf:if is="$depth == 0">
            <hr class="menu-separator" />
        </xf:if>
    </xf:if>
</xf:macro>

Also for more on loops:

Template syntax | Developer Documentation | XenForo

Developer documentation for XenForo

xenforo.com