0

Hello I am using bootstrap on my rails app and I need to have a transparent navbar. But when it resizes, the transparency make it ugly... I would need to add a background to my navbar (when resized only) but I don't find out how...

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)

the corresponding 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
  • Have you explored @media queries? https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries – UncaughtTypeError Dec 07 '16 at 13:07
  • I am trying but I don't get it yet :( –  Dec 07 '16 at 13:19
  • 1
    MDN is a good place to start then. Get the basics right first, i.e: `@media(max-width: 768px){}` "do this when screen is smaller than x", `@media(min-width: 1024px)` "do this when screen is larger than X". You literally have hundreds of examples online. – UncaughtTypeError Dec 07 '16 at 13:34

0 Answers0