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