search

VPenkov / okayNav

The world's okayest responsive navigation. This is (sort of) a legacy implementation. Please stay tuned to the 3.0 branch (https://github.com/VPenkov/okayNav/tree/v3.0)
4.02k stars 267 forks source link

How to use with Bootstrap? #23

Open namaljayathunga opened 8 years ago

namaljayathunga commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

Can you show me a demo?

boynet commented 8 years ago

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

VPenkov commented 8 years ago

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

aritztg commented 8 years ago

Thanks @VPenkov !

macsupport commented 8 years ago

Any progress on a bootstrap demo?

throrin19 commented 8 years ago

Any news ?

amnkhan commented 8 years ago

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 commented 7 years ago

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 commented 6 years ago

What about the demo with Bootstrap?