Back to Bootstrap 4 Page Builder Support

gokhan61051
gokhan61051

hello, im newbie for october. i want to use static menu with my own style. inside header.htm (builder). Is this possible.

and i add manual language flags. but i can't add "locale picker" inside header.htm (near the menu)

header.htm

<!-- header-start --><header id="izm9"><div class="header-area"><div id="sticky-header" class="main-header-area white-bg"><div class="container"><div class="row align-items-center"><div class="col-xl-2 col-lg-2"><div class="logo-img"><a href="/cimstone" id="i1wa"><img src="/cimstone/storage/app/media/BuilderUploader/600576c5d0060cimstone-logo.png" id="if8tj"/></a></div></div><div class="col-xl-8 col-lg-8"><div class="main-menu d-none d-lg-block"><nav class="navbar navbar-expand-lg"><ul id="navigation" class="navbar-nav nav"><li class="nav-item"><a href="/collection/" class="nav-link">COLLECTION/COLORS</a></li><li class="nav-item"><a href="/product/" id="ip7o3" class="nav-link">PRODUCT</a></li><li class="nav-item"><a href="/gallery/" id="it1uv" class="nav-link">GALLERY</a></li><li class="nav-item"><a href="/pro/" id="ig8sr" class="nav-link">PRO</a></li><li class="nav-item dropdown"><a href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="nav-link dropdown-toggle">ABOUT</a><ul aria-labelledby="navbarDropdown" class="dropdown-menu"><li id="i79tg"><a href="/cimstone/firma" class="dropdown-item">FİRMA</a></li><li id="i7thz"><a href="/cimstone/milestones/" class="dropdown-item">MILESTONES</a></li><li id="ivupu"><a href="/cimstone/sirket-degerleri" class="dropdown-item">ŞİRKET DEĞERLERİ</a></li><li id="itc9b"><a href="/cimstone/kalite-ve-cevre" class="dropdown-item">KALİTE VE ÇEVRE</a></li><li id="id81g"><a href="/cimstone/diger" class="dropdown-item">DİĞER</a></li></ul></li><li class="nav-item"><a href="/contact" id="iqulc">CONTACT US</a></li></ul></nav></div></div><div class="col-xl-2 col-lg-2"><div class="quote-area"><div class="search-bar"><a id="search_1" href="nojavascript...void(0)"><i class="fa fa-search"></i></a></div><div class="get-quote d-none d-lg-block"><ul class="lang"><li id="i8cg3"><a href="/cimstone/en/" id="i68im"><img src="/cimstone/storage/app/media/langicon-eng.png" id="i89kl"/></a></li><li class="nav-item"><a href="/cimstone/tr/" id="i7sbs"><img src="/cimstone/storage/app/media/langicon-tr.png" id="i63tj"/></a></li></ul></div></div></div><div class="col-12"><div class="mobile_menu d-block d-lg-none"></div></div></div><div id="search_input_box" class="search_input"><div class="container"><form action="/search" method="get" class="d-flex justify-content-between search-inner"><input type="text" id="search_input" name="q" placeholder="Search Here" class="form-control"/><button type="submit" class="btn"></button><span id="close_search" title="Close Search" class="fa fa-close"></span></form></div></div></div><div class="ddbg"></div></div></div></header><!-- header-end -->

Last updated

Vladimir
Vladimir

I'm not sure if I understood correctly.
Why not add a locale picker component to the layout

https://gyazo.com/03de949a568542f9b848df6f708e6272

Last updated

gokhan61051
gokhan61051

can i use it in partial?

Vladimir
Vladimir

Add a locale picker component to the layout.
And in partrial, to switch a language, use something like this:

<p>
    Switch language to:
    <a href="#" data-request="onSwitchLocale" data-request-data="locale: 'en'">English</a>,
    <a href="#" data-request="onSwitchLocale" data-request-data="locale: 'ru'">Russian</a>
</p>

https://octobercms.com/plugin/rainlab-translate#documentation

Last updated

Vladimir
gokhan61051
gokhan61051

thank you for language switcher. now static menu :) how can i do this

Vladimir
Vladimir

Example: https://www.youtube.com/watch?v=Wo68q_i35q4

demo | demo http://b4demo.pkurg.ru/backend/cms

Partial nav

<nav class="navbar navbar-expand-lg navbar-light bg-light static-top mb-5 shadow">
    <div class="container">
        <a href="#" class="navbar-brand">Start Bootstrap</a>
        <button type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarResponsive" class="collapse navbar-collapse">

          {% partial 'items' items=staticMenu.menuItems class='nav navbar-nav ml-auto' %}

        </div>
    </div>
</nav>

Partial items

<ul class="{{ class }}">
    {% for item in items %}
        <li 
            class="nav-item {{ item.isActive or item.isChildActive ? 'active' : '' }} 
            {{ item.items ? 'dropdown' : '' }}"
        >
            <a 
                {% if item.items %}class="nav-link dropdown-toggle" data-toggle="dropdown"{% else %} class="nav-link"  {% endif %} 
                href="{{ item.url }}"
            >
                {{ item.title }}

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

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

hello, thanks but not working for me. menu items not showing.

Partial --> https://ibb.co/7SVf0hT

(Main) Template --> https://ibb.co/HxD0cF3

HTML --> https://ibb.co/2jRbRCt

Menus --> https://ibb.co/QCzMzGD

Last updated

Vladimir
Vladimir

You have a static menu component added to the wrong partial

layout

nav partial

items partial

gokhan61051
gokhan61051

thank you so much :) i understand now

1-10 of 10