How to use with Bootstrap?

[namaljayathunga]

Thanks VPenkov for your amazing plugins. I added okayNav to my exists project that use bootstrap navigation bar. However, It's not working. How can I solve this problem. Code spinet is include bellow. Thanks.

<nav class="navbar navbar-inverse navbar-fixed-top okayNav" id="nav-main"  role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <div style="padding-top:3px;" class="pull-left">
        <a class="project-title" href="/"><img src="/assets/images/logo2.png" alt="" width="32" height="32" style="margin-left: 15px;"> Project </a>
      </div>
    </div>
    <ul class="nav navbar-nav navbar-right nav-right-icons nav-main-btns">
      <li>
        <a href="/register" class="btn btn-sm nav-reg-btn">Free Register</a>
      </li>
      <li>
        <a href="/login" class="btn btn-sm nav-signin-btn">Login</a>
      </li>
    </ul>
  </div>
</nav>

[VPenkov]

The <ul> needs to be alone in another element. Try this:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">

        <div class="navbar-header">
            <div style="padding-top:3px;" class="pull-left">
                <a class="project-title" href="/"><img src="/assets/images/logo2.png" alt="" width="32" height="32" style="margin-left: 15px;">
                    Project
                </a>
            </div>
        </div>

        <nav class="okayNav" id="nav-main">
            <ul class="nav navbar-nav navbar-right nav-right-icons nav-main-btns">
                <li><a href="/register" class="btn btn-sm nav-reg-btn">Free Register</a></li>
                <li><a href="/login" class="btn btn-sm nav-signin-btn">Login</a></li>
            </ul>
        </nav>

    </div>
</div>

Then just do $('#nav-main').okayNav()

PS: might wanna add display: flex to your .navbar-fixed-top .container-fluid

[namaljayathunga]

Thanks for your response, However, some issues not fix yet. Before your answer, okayNav class completely replaced bootstrap navbar from okayNav default. With your answer, bootstrap navbar visible fine. However, register and login button not visible.

[VPenkov]

Can you show me a demo?

[boynet]

+1 cant get it to work. on small size the navbar just collapse to normal unstyled ul can send you demo to email?

[VPenkov]

I'll provide a Bootstrap demo in the next few days.

[aritztg]

Thanks @VPenkov !

[macsupport]

Any progress on a bootstrap demo?

[throrin19]

Any news ?

[amnkhan]

OkayNav creates a loots conflicting issues while using with bootstrap. Can you give a demo where you used okaynav with bootstrap that also has a dropdown menu???

TIA!

[televators]

I'm having issues with Bootstrap on Wordpress as well. The instructions should be more verbose and include info about using with Bootstrap and/or Wordpress. Otherwise, excellent stuff.

[CloudPower97]

What about the demo with Bootstrap?