Hello, Here is my header.htm file with navigation (using static pages):

<div class="header" id="header">
    <div class="container">
        <div class="header__inner">
            <div class="header__logo">
                <img src="{{ 'assets/img/logo.svg'|theme }}" alt="logo" class="logo">
            </div>
            <nav class="nav" id="nav">
                {% partial 'menu-items' items=staticMenu.menuItems class='nav__list' %}
            </nav>
        </div>
    </div>
</div>

Question is how to modify basic menu-items.htm partial if I'am using one page layout and I want exact section be active (not separate page). At the moment I have menu with such items:

/, /#about, /#projects, /#contacts.

menu-items.htm partial is below:

[viewBag]
<ul class="{{ class }}"> {% for item in items %} <li class="nav__item {{ item.isActive or item.isChildActive ? 'active' : '' }} {{ item.items ? 'dropdown' : '' }}"

<a class="nav__link" {% if item.items %}class="dropdown-toggle" data-toggle="dropdown"{% endif %} href="{{ item.url }}"

{{ item.title }}

            {% if item.items %}<span class="caret"></span>{% endif %}
        </a>

        {% if item.items %}
            {% partial 'menu-items' items=item.items class='dropdown-menu' %}
        {% endif %}
    </li>
{% endfor %}
</ul>

Last updated 3 years ago

Really, no one could help on this simple question?

Thanks!

I don't understand exactly what you need to do, sorry.

Dear @mjauvin,

It is ok, sorry, I will try to explain one more time. At the moment code in menu-items.htm partial if statement add "active" class on click because of this line:

<li class="nav__item {{ item.isActive or item.isChildActive ? 'active' : '' }} {{ item.items ? 'dropdown' : '' }}"

...it is because item "isActive" property is "true" when exact menu item is clicked. But my question is, how to do the same (add "active" class) with section link in meniu navigation, because my project have only one page "home" and several sections in it. so I want menu navigation link be active on fixed navigation when someone click for eaxmple "About" link and scroll to /#about section.

Hope it is clear now ;)

The problem here is that the anchors (#about, #projects, #contacts) are not sent server-side, this is all handled by the browser client-side... so the only way to make this known to the server would be to trigger an ajax request (using the ajax Javascript API) when those menu items are clicked to inform the server-side backend code and make the menuItem active.

ref. https://octobercms.com/docs/ajax/javascript-api

Many thanks, I will read about it!