Dropdown menu inside of floating topbar

[abravorus]

We were able to create dropdown menu only for the fixed topbar. If we do it for floating topbar, the dropdown menu is created but empty, no items from appropriate <ul> .
Is it our misunderstanding or a bug?

[tdm00]

Do you mean "fluid" instead of "floating"? If so, here is a copy of my code that's fluid and the drop-down works. Perhaps you can compare it with yours:
`

My Project

• Dashboard
• Contacts
• Students
• Gradebook
• Reports
• Options

• User Name
  • Account Information
  • Change Password
  • Logout

`

[abravorus]

talltroym, thanks! Yes, I mean the toolbar which is not fixed and always visible on the top of the page.
I'm not able to check your code now, will do it on Monday. But if it works for you, it will work for me too :)
Thank you very much.

[sagol]

talltroym, I think, abravorus don't mean "fluid" =)
Try your code without:

<div class="topbar-wrapper" style="z-index: 5;">

[mdo]

We'll have this fixed for sure in the next release, along with more flexible dropdowns in the tabs.

[abravorus]

markdotto, thanks! (sagol note is correct for me, that code doesn't work without code shown).

[sagol]

1.2.0 - Nothing has changed...

[abravorus]

sagol, it works for me now.

<div class="topbar-wrapper">
 <div class="topbar">
  <div class="topbar-inner">
   <div class="container">
     <ul class="nav">
      <li class="dropdown">
          <a href="#" class="dropdown-toggle">Dropdown</a>
          <ul class="dropdown-menu">
              <li><a href="#">Item1</a></li>
               <li><a href="#">Item2</a></li>
              <li class="divider"></li>
              <li><a href="#">Item3</a></li>
          </ul>
       </li>
     </ul>
   </div> <!-- container -->
  </div> <!-- topbar-inner -->
 </div> <!-- topbar -->
</div> <!-- topbar-wrapper -->`

And do not forget to include jquery.js and application.js in your page.

[lincolnthree]

I'm still having this issue, even on the demo-page hosted here at GitHub.

[tdm00]

can you post your code using a gist?

On Thu, Sep 8, 2011 at 1:26 PM, Lincoln Baxter, III
[email protected]
wrote:

I'm still having this issue, even on the demo-page hosted here at GitHub.

Reply to this email directly or view it on GitHub:
#75 (comment)

Troy Murray

[lincolnthree]

Yep, here you go! https://gist.github.com/1204112

This is using JSF to serve the resources: basically I copied the source from the css/js files referenced in the demo: http://twitter.github.com/bootstrap/

Then I tried using the dropdown, no luck. Hopefully it's just something simple I did wrong. I tried with both the version of JQuery used in the example and also with the latest from jquery.org

[lincolnthree]

Ah, and I'm using Firefox 6x

[tdm00]

I thought I knew how to use a GIST, but I guess not. Here is a working copy you can start with, https://gist.github.com/1204137

I toyed around with your HTML markup a little, but wasn't able to get it to work. I should mention right now that I'm not a javascript, css or bootstrap guru.

Here is a copy of some code that DOES work. I'd started with getting this generated by your application, then start adding your pieces in bit by bit to see what, if anything, starts to break it.

See the previous disclaimer, but it seems like having the HTML 4.01 strict specified would cause problems with the HTML5 rendering of this document. Again, see the previous disclaimer, but this struck me as odd. Hope this helps.

[lincolnthree]

Hmm, that works very well actually, but the problem is that I think the example you've given me is for a "fixed" top-bar, which won't stay with the page as it scolls. It also doesn't seem to fit flush to the top of the page (something I could hack to fix) but do you have any suggestions for getting the floating topbar working this same way?

Thanks for your help!

[tdm00]

No, sorry, the app I'm working on is pretty light and the user doesn't need to scroll down right now.
Not sure about the flush part, looks flush here on my system (Firefox 6, Safari 5.1)

[lincolnthree]

I resolved the flushing by setting the topbar-wrapper margin-top to 0px. Good enough for now, thanks! I can deal with the "sticky" bar later.

[sagol]

abravorus, but it is not a floating topbar... try it without "topbar-wrapper"

[abravorus]

sagol, it's a "sticky" topbar which is always on the top of the page, even when you scroll it down. I will try to show working example tomorrow morning (it's almost midnight here now :)

[sagol]

abravorus, it'll be greate. I was not able to combine a "sticky" topbar and dropdown menu.

[abravorus]

sagol, look please - http://terijoki.spb.ru/tmp/bootstrap/tb_test.html

[lincolnthree]

It looks like there is some kind of issue with the application.js file that causes the javascript event handlers never to be registered for the dropdown. By moving those registrations to the top of the file, you can ensure that they take place:

  // Dropdown example for topbar nav
  // ===============================

  $("body").bind("click", function (e) {
    $('.dropdown-toggle, .menu').parent("li").removeClass("open");
  });
  $(".dropdown-toggle, .menu").click(function (e) {
    var $li = $(this).parent("li").toggleClass('open');
    return false;
  });

Note, you should probably customize that JS file anyway, as it also disables buttons and does some other stuff that your site most likely will not need.

[sagol]

abravorus, thanx.

I found the cause of problems:

<link  href="assets/css/docs.css" type="text/css">

PS: Вообще, не очень понятно почему добавление этого css приводит к неработоспособности меню )

PPS:

div.topbar-wrapper div.topbar {
  position: absolute;
  margin: 0 -20px;
}

So, working code for "sticky" topbar:

<div>
 <div class="topbar">
  <div class="topbar-inner">
   <div class="container">
     <ul class="nav">
      <li class="dropdown">
          <a href="#" class="dropdown-toggle">Dropdown</a>
          <ul class="dropdown-menu">
              <li><a href="#">Item1</a></li>
               <li><a href="#">Item2</a></li>
              <li class="divider"></li>
              <li><a href="#">Item3</a></li>
          </ul>
       </li>
     </ul>
   </div> <!-- container -->
  </div> <!-- topbar-inner -->
 </div> <!-- topbar -->
</div>