Changing sticky footer and navbar colors

StackOverflow https://stackoverflow.com/questions/23296438

  •  09-07-2023
  •  | 
  •  

Domanda

I am playing around with color schemes using bootstrap and am having trouble with adjusting the colors of the sticky footer and navbar. I am making background-color adjustments in my CSS file but does not seem to be adjusting the sticky footer. Any ideas why my CSS is not working to override the color of my sticky footer? 

<!DOCTYPE html> 
  <html lang="en"> 
  <head> 
    <title>Bootstrap basic website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> 
    <!--Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">    
    <!-- Your CSS -->
    <link href="css/index.css" rel="sytlesheet"> 
  </head> 
   <div class="wrapper">
      <div class="container">
        <header class="hero-unit">
          <h1>Twitter&rsquo;s Bootstrap with Ryan Fait&rsquo;s Sticky Footer</h1>
          <p>It's really <strong>not</strong> that hard, y&rsquo;know. Check out the source code and <abbr title="Cascading Style Sheets">CSS</abbr> of this web page for how to do it yourself.</p>
        </header>

      </div>
      <div class="push"><!--//--></div>
    </div>
    <div id="footer">
      <div class="container">
        <p>Put together in less than five minutes by <a href="http://www.martinbean.co.uk/" rel="author">Martin Bean</a>. Uses <a href="http://twitter.github.com/bootstrap/" rel="external">Twitter Bootstrap</a> and <a href="http://ryanfait.com/sticky-footer/" rel="external">Sticky Footer</a>.</p>
      </div>
    </div>

<!-- jQuery and javascript at end of page (necessary for Bootstrap's JavaScript plugins) --> 
  <script src="http://code.jquery.com/jquery.js"></script>
  <script src="js/bootstrap.min.js"></script>
  </body>
</html>

CSS:

 html, body {
            height: 100%;
        }

@media (max-width: 979px) {
  .navbar-fixed-top.navbar-absolute {
    position: absolute;
    margin: 0;
  }
}

.navbar-absolute + div {
    margin-top: 68px;
}

        footer {
            color: #FF0000;
            background: #FF0000;
            padding: 17px 0 18px 0;
            border-top: 1px solid #FF0000;
        }
        footer a {
            color: #FF0000;
        }
        footer a:hover {
            color: #efefef;
        }
        .wrapper {
            min-height: 100%;
            height: auto !important;
            height: 100%;
            margin: 0 auto -63px;
        }
        .push {
            height: 40px;
        }
        /* not required for sticky footer; just pushes hero down a bit */
        .wrapper > .container {
            padding-top: 60px;
        }
È stato utile?

Soluzione

You probably want to change a few things. In your (custom) CSS, you want to change both background-colors like:

.navbar-default {
    background-color: #000000;
}

for the header and 

#footer {
    background-color: #FF0000;
}

for the footer. Now, you will notice that those colors get overwritten by the .container background-color. So, if you didn't change default IDs and classes, you probably want to override this with something like:

div.navbar-default > div.container {background-color:#000000;}

for the header and

div#footer > div.container {background-color:#FF0000;}

for the footer. As usual with CSS, make sure those styles get loaded in the correct order (that is, after the 'default' bootstrap CSS file has been loaded). Good luck.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top