CSS: How can I change bootstrap navigation bar background color

0
votes

I'm using R and shiny to create a webpage which obviously uses bootstrap CSS. I have no experience at all with bootstrap but from some years ago with css.

I have now a structure like:

<div class="navbar navbar-static-top">
  <div class="navbar-inner">
    <div class="container">
      <span class="brand pull-left"></span>
      ....
    </div>
  </div>
</div>

And I want the complete navbar with a different color. How can I access this div container "navbar navbar-static-top"?! I have no clue how to reference a CSS code with a space in between...

2
htmlcssrtwitter-bootstrapshiny

2 Answers

1
votes

The space you are referring to is used to assign multiple classes to an element. You would select it by using either of the classes, or both. 

.navbar {
}

.navbar-static-top {
}

.navbar,
navbar-static-top {
}

are all acceptable ways of selecting the navbar depending on the required specificity. Please remember your CSS will have to appear after the bootstrap CSS in order to override the bootstrap styles.

It's a better practice to use Sass or Less and extend the bootstrap classes to your own classes, but this might be a bit above your knowledge at the moment.

0
votes

Just add a custom class, say navbar-custom and apply the changes to the custom classes rather than modifying the defualt classes. Something like this:

HTML:

<div class="navbar navbar-custom navbar-static-top">
  <div class="navbar-inner">
    <div class="container">
      <span class="brand pull-left"></span>
      ....
    </div>
  </div>
</div>

CSS:

.navbar-custom    {
    background-color: red;
    --other custom properties--
    --other custom properties--
}