调整大小时更改导航栏颜色

时间:2016-12-07 13:04:18

标签: css ruby-on-rails twitter-bootstrap

您好我在我的rails应用程序上使用bootstrap,我需要一个透明的导航栏。但是当它调整大小时,透明度会让它变得难看...... 我需要在导航栏中添加背景(仅在调整大小时),但我不知道如何...

screenshot

_nav.html.slim

.nav.navbar.navbar-fixed-top
  .container-fluid
    .navbar-header
      button.navbar-toggle.collapsed[type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"]
        span.sr-only
          | Toggle navigation
        span.icon-bar
        span.icon-bar
        span.icon-bar
      .navbar-brand.leschner-brand
        = link_to "LESCHNER", root_path

    #bs-example-navbar-collapse-1.collapse.navbar-collapse
      ul.nav.navbar-nav.navbar-right
        li
          = link_to "About", page_path("about")
        li
          =link_to "Work In Progress", progresses_path
        li
          =link_to "Finished Guitars", guitars_path
        li
          =link_to "Media", page_path('media')

        li.dropdown
          a.dropdown-toggle[href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"]
            | Contacts
            span.caret
          ul.dropdown-menu
            li
              = link_to "Contact Luthier", new_contact_path(@contact)
            li
              = link_to "Report a bug", new_support_path(@support)

相应的sass .nav

  //background-color: #75521a
  background-color       : rgba(0, 0, 0, 0)
  a
    color                : #ffffff

  a:hover
    background-color     : rgba(0, 0, 0, 0) !important
    border-bottom        : 4px solid  #AB813E !important
    padding-bottom       : 0

.navbar-nav > li > .dropdown-menu
  background-color        : #75521a
  a:hover
    background-color      : #AB813E !important


.nav .open > a, .nav .open > a:hover, .nav .open > a:focus
  background-color        : #AB813E !important

.icon-bar
  background-color        : #ffffff

.leschner-brand
  color                    : #FFFFFF !important
  font-family              : 'leschnerfont'
  a:hover
    background-color       : #75521a !important
    color                  : #ffffff
    text-decoration        : none
  a:visited
    color                  : #ffffff

0 个答案:

没有答案