search

creativetimofficial / now-ui-kit

Now UI Kit Bootstrap 4 - Designed by Invision. Coded by Creative Tim
https://www.creative-tim.com/product/now-ui-kit
Other
1.7k stars 381 forks source link

Menu Collapse Required a Kludge #46

Closed bretonio closed 6 years ago

bretonio commented 7 years ago

All is mostly well (with) Now but I had a minor issue to share.

When collapsed the top navbar displayed the hamburger and the X of closure with a black background instead of default grey.

In the end I added bg-default to button.navbar-toggler.toggler-right ... and then a style='border: none;')was needed.

Here is my Pug with a coujple other kludges.

nav.navbar.navbar-toggleable-md.bg-default.fixed-top
    .navbar-translate
        button.navbar-toggler.navbar-toggler-right.bg-default(type='button', data-toggle='collapse', data-target='#navigation', aria-controls='navigation-index', aria-expanded='false', aria-label='Toggle navigation', style='border: none;')
            span.navbar-toggler-bar.bar1
            span.navbar-toggler-bar.bar2
            span.navbar-toggler-bar.bar3
        a.navbar-brand(href='#pablo', style='text-transform: none; font-size: 25px; margin-right: 100px;')
            i.fa.fa-gears.fa-lg.fa-pull-left
            | Engenho Novo LLC
    #navigation.collapse.navbar-collapse
        ul.navbar-nav(style='font-size: 21px;')
            li.nav-item
                a.nav-link(href='#pablo')
                    | In Principio
            li.nav-item.active
                a.nav-link(href='#pablo') In Media Res
            li.nav-item
                a.nav-link(href='#pablo') Penúltimas Coisas
            li.nav-item
                a.nav-link(href='#pablo') O Fim da Picada

.container(style='margin-top: 48px;')
    .jumbotron
        .section.text-center(data-background-color='black', style='padding: 40px;')
            h2  Adeus, Mundo Imundo
            h3 <a href='http://demos.creative-tim.com/now-ui-kit/documentation/tutorial-components.html'>Now UI</a> no Harp com Pug
            h4 Clonado na Samboja
            h6(style='text-transform: none;') Honi Soit Qui Mal y Pense
                button.btn-info.btn-lg(style='font-size: 18px; border-color: black; margin: 0 auto; margin-top: 25px;')
                    i.material-icons.pull-right autorenew
                    | Refresh Me &nbsp; 
            p.center-block
                i.fa.fa-coffee.fa-5x