# Help with custom NavBar

**URL:** <https://forum.pinegrow.com/t/help-with-custom-navbar/4312>\
**Category:** Styling (CSS)\
**Created:** [July 7, 2020, 9:36pm UTC](https://forum.pinegrow.com/t/help-with-custom-navbar/4312 "2020-07-07T21:36:11Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![c\_sassano](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/c_sassano/32/2732_2.png) [@c\_sassano](https://forum.pinegrow.com/u/c_sassano)\
**Post date:** [July 7, 2020, 9:36pm UTC](https://forum.pinegrow.com/t/help-with-custom-navbar/4312/1 "2020-07-07T21:36:11Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/6f36902a6bce2637c7620919ba9952af60decd29.jpeg)

---

<div class="post-metadata">

**Author:** ![droidgoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/droidgoo/32/2209_2.png) [@droidgoo](https://forum.pinegrow.com/u/droidgoo)\
**Post date:** [July 7, 2020, 10:32pm UTC](https://forum.pinegrow.com/t/help-with-custom-navbar/4312/2 "2020-07-07T22:32:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [July 8, 2020, 9:42am UTC](https://forum.pinegrow.com/t/help-with-custom-navbar/4312/3 "2020-07-08T09:42:39Z")

</div>

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

```auto
<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