creativetimofficial / paper-kit-2

Paper Kit is a Fully Coded Web UI Kit based on Bootstrap.
http://demos.creative-tim.com/paper-kit
MIT License
200 stars 103 forks source link

Dropdown menu in a collapsed navbar bug #2

Open julianorjr opened 7 years ago

julianorjr commented 7 years ago

Dropdown menu don't appear correctly in a collapsed navbar and links with icons (font awesome or material icons) don't stay aligned with the others links.

untitled 4

Code:

<ul class="nav navbar-nav navbar-right">
    <li><a href="#"><i class="material-icons">&#xE0C9;</i> aaaa</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">bbbb <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li class="dropdown-header">cccc</li>
            <li><a href="#">dddd</a></li>
        </ul>
    </li>
</ul>
ghost commented 7 years ago

Same Problem here

dragosct commented 7 years ago

Hi! I just finished to fix the issue with material-icons and what you need to do is to go in assets/sass/ct-paper/navbars.scss and put the following lines of code on line 57. After you do that you must compile you scss with Koala.

  .navbar-nav > li > a i.material-icons{
        margin-top: -8px;
        position: relative;
        top: 8px;
  }
dragosct commented 7 years ago

Hi! I made a few changes to fix the issue with dropdowns. I will update the partial _responsive.scss and you must overwrite this with the old file in assets/sass/ct-paper/_responsive.scss, after you do that please compile your assets/sass/ct-paper.scss with Koala. Make sure the output path is assets/sass/ct-paper.css. Hope that will be ok for you!

Best, Dragos

_responsive.scss.zip