Twitter Bootstrap Question posted in

Twitter Bootstrap topbar dropdown changes vertical size

I have a problem adding a dropdown to a Twitter Bootstrap framework. After I have added the dropdown it expands height of the whole topbar and this is what I’m trying to fix.

Page URL is http://locabikes.de/

If you hover the mouse on the “DE” symbol in the upper right corner, the dropdown will show up but the topbar will also change it’s vertiacal size covering the navigation bar.

Is there some way to only show other languages to choose without changing the size of a topbar?
This is the code I’m talking about:

<div class="col-sm-12 col-sm-no-pd">
<ul id="lng">
    <li>
        <span>DE</span>
        <ul>
            <li><a href="http://locabikes.com">EN</a></li>
            <li><a href="http://locabikes.pl/">PL</a></li>
        </ul>
    </li>
</ul>
<div id="topSocial">
    <a href="http://www.facebook.com/locabikes" target="_blank" class="icon icon-facebook"></a>
    <a href="https://www.pinterest.com/locabikes/" target="_blank" class="icon icon-pinterest"></a>
    <a href="https://instagram.com/loca_bikes/" target="_blank" class="icon icon-instagram"></a>
</div>

This is how I want it to look like after hoovering on the current language hyperlink.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Turned out I only needed to remove overflow: hidden property from the parent #topbar div and it started working.


  2. 0

    Since you are using bootstrap I should suggest changing the markup of ul#lng to the markup given by bootstrap documentation for dropdowns.

    http://getbootstrap.com/components/#dropdowns

    Dropdown by default works on click but with the following tweak it will also work on hover:

    http://www.joostrap.com/support/tutorials-videos/202-how-to-enable-hover-for-nav-dropdowns

    Hope this helps you 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search