css to make bootstrap navbar transparent

Question

I use bootstrap and I have a navbar in my html file I would like to make this nav bar transparent to show the background image  Can some one teach me how to do this with css  I tried the following css nothing happend   navbar-inner       background-color transparent      lt div class  navbar navbar-inverse navbar-fixed-top  gt               lt div class  navbar-inner  gt                       lt div class  container  gt                           lt button type  button  class  btn btn-navbar  data-toggle  collapse  data-target   nav-collapse  gt                               lt span class  icon-bar  gt  lt  span gt                               lt span class  icon-bar  gt  lt  span gt                               lt span class  icon-bar  gt  lt  span gt                           lt  button gt                           lt a class  brand  href     gt lol lt  a gt                           lt div class  nav-collapse collapse  gt                               lt ul class  nav pull-right  gt                                   lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt                                   lt li gt  lt a href  about  gt About lt  a gt  lt  li gt                               lt  ul gt                           lt  div gt                       lt  div gt               lt  div gt           lt  div gt

User · Answer

For Spring   Thymeleaf  boostrap  project i usually use   Inside css the following code   navbar-inner           background transparent          Inside the HTML the line   lt nav class  navbar-inner  gt

User · Answer

Try this in your code  it worked for me -  give an id to the element  to which you want to make transparent  for eg according to your code -   lt div class  navbar-inner  id  nav1  gt    Then apply this in your css-   nav1         background-color  F00     whichever you want       opacity  0 5              0 5 determines transparency value        filter  opacity 50

User · Answer

x000D   x000D   lt nav class  navbar navbar-expand-lg navbar-light fixed-top bg-transparent  gt                 lt a class  navbar-brand  href     gt Navbar w  text lt  a gt                 lt button class  navbar-toggler  type  button  data-toggle  collapse  data-target   navbarText  aria-controls  navbarText  aria-expanded  false  aria-label  Toggle navigation  gt                   lt span class  navbar-toggler-icon  gt  lt  span gt                 lt  button gt                 lt div class  collapse navbar-collapse  id  navbarText  gt                   lt ul class  navbar-nav mr-auto  gt                     lt li class  nav-item active  gt                       lt a class  nav-link  href     gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a gt                     lt  li gt                     lt li class  nav-item  gt                       lt a class  nav-link  href     gt Features lt  a gt                     lt  li gt                     lt li class  nav-item  gt                       lt a class  nav-link  href     gt Pricing lt  a gt                     lt  li gt                   lt  ul gt                   lt span class  navbar-text  gt                    Navbar text with an inline element                  lt  span gt                 lt  div gt               lt  nav gt  x000D   x000D   x000D

User · Answer

If you are using the latest version of Bootstrap and Ruby on Rails  you can just type it in the html erb file as so     lt nav class  navbar navbar-transparent  gt    And that is all you need

User · Answer

in bootstrap 3 3 7  and 4 0 presumably   this works   instead of    lt nav class  navbar navbar-inverse navbar-fixed-top  gt    use    lt nav class  navbar bg-transparent navbar-fixed-top  gt    no CSS required

User · Answer

Further to Jochem Stoel s answer    I added  navbar-fixed-top  to the DIV tag s class and it worked

User · Answer

One workaround it to give the navbar container a  fixed-top  class and than change the fixed-top styles to  position  absolute     Here is the code        lt header class  nav-wrapper  gt         lt div class  container fixed-top  gt           lt nav class  navbar  gt           lt  nav gt         lt  div gt       lt  header gt      fixed-top       position  absolute      top  0      right  0      left  0      z-index  1030

User · Answer

What you people are doing is unnecessary    For transparent background  simply do    x000D   x000D   lt div class  navbar  gt  x000D     your navbar content x000D   lt  div gt  x000D   x000D   x000D    without class navbar-default or navbar-inverse

User · Answer

I was able to make the navigation bar transparent by adding a new  transparent class to the  navbar and setting the CSS like this     navbar transparent navbar-inverse  navbar-inner       border-width  0px      -webkit-box-shadow  0px 0px      box-shadow  0px 0px      background-color  rgba 0 0 0 0 0       background-image  -webkit-gradient linear  50 00  0 00   50 00  100 00   color-stop  0    rgba 0 0 0 0 00   color-stop  100    rgba 0 0 0 0 00         background-image  -webkit-linear-gradient 270deg rgba 0 0 0 0 00  0  rgba 0 0 0 0 00  100        background-image  linear-gradient 180deg rgba 0 0 0 0 00  0  rgba 0 0 0 0 00  100        My markup is like this   lt div class  navbar transparent navbar-inverse  gt               lt div class  navbar-inner  gt

User · Answer

lt nav class  navbar navbar-fixed-top navbar-light  style  background-color  transparent   gt    lt  --This should work just fine  it will make it transparent  hope i helped -- gt

User · Answer

Add the bg-transparent class to the navbar    lt div class  bg-primary  gt       lt div class  navbar navbar-dark bg-transparent  gt                    lt  div gt   lt  div gt

User · Answer

Simply add this to your css  -    navbar-inner       background transparent

User · Answer

There is no need for all this mess       You can make the navbar transparent by not writing navbar-defaultor   navbar-inverse    lt nav class  navbar  gt     Don t add navbar-default to the class         lt  nav gt

User · Answer

Just leaving the default navbar built in with bootstrap works fine  You just need to add the custom css below  that way everything still works as it should   HTML    lt nav class  navbar navbar-default  gt    CSS    navbar-default       background-color  transparent

User · Answer

If you are using the latest version of Bootstrap i e 4 0 0 you just need to use the  transparent  keyword as    lt nav class  navbar navbar-light transparent  gt   There is simply no need to apply any css for this as bootstrap has this property inbuilt

User · Answer

This works for 4 0   lt nav class  quot navbar navbar-expand-sm fixed-top navbar-light quot  gt  or  lt nav class  quot navbar navbar-expand-lg fixed-top navbar-dark quot  gt   key item is fixed-top  otherwise  white or default page background is displayed even if there is a image top  navbar-light gives dark letters  navbar-dark shows light text

User · Answer

Test with background-image  none  That property will remove the linear-gradient   You can see the result here  http   jsfiddle net eugip9 8D36M

User · Answer

CSS code    header  navbar-default     background  none      HTML code    lt header gt       lt nav class  navbar navbar-default  gt  lt  nav gt   lt  header gt

User · Answer

Update 2019  Bootstrap 4 - The Navbar is transparent by default  Most of the answers here are misleading because they relate to Bootstrap 3  By default  the Bootstrap 4 Navbar is transparent  Just remember to use navbar-light or navbar-dark so the link colors work against the contrast of the background color     https   www codeply com go FTDyj4KZlQ   lt nav class  navbar navbar-expand-sm fixed-top navbar-light  gt       lt div class  container  gt           lt button class  navbar-toggler navbar-toggler-right  type  button  data-toggle  collapse  data-target   navbar1  gt               lt span class  navbar-toggler-icon  gt  lt  span gt           lt  button gt           lt a class  navbar-brand  href     gt Brand lt  a gt           lt div class  collapse navbar-collapse  id  navbar1  gt               lt ul class  navbar-nav  gt                   lt li class  nav-item active  gt                       lt a class  nav-link  href     gt Link lt  a gt                   lt  li gt               lt  ul gt           lt  div gt       lt  div gt   lt  nav gt

[css] css to make bootstrap navbar transparent

Examples related to css

Examples related to twitter-bootstrap