Help with custom NavBar

Styling (CSS)
1

Hi, I love Pinegrow.
I’d like to make a custom NavBar like the attached file with Bootstrap in Pinegrow.
I try navbar-right for the nav items but… don’t work, anyone can help me, thanks in advance.

Hi Chris

Menu.001
Menu.0011527×230 38.4 KB

2

welcome

i’m not a bootstrap user, but if i understand your question you are unable to get the links on the right to appear in the same nav bar as the links on the left?

have you tried using 2 nav bars, one with links left and one with links right and then just put them opposite each other separated by the logo?

this would be rather trivial in a flexbox, but you mentioned bootstrap, i assume you want to use those libraries.

3

@c_sassano
Here is at least partially what you are trying to achieve.

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Left</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">Logo</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-2 dual-collapse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
           <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

You’ll have to fool around with Logo positioning before and after the collapse.
Cheers,
Bob