html - Custom CSS won't override bootstrap -
let me proceed saying have searched google , stack overflow find answer this. have tried many solutions, none working.
the main issue right fact css won't override bootstrap css in jumbotron. won't change background color, background image or nav bar settings.
i have tried using !important. have tried calling stylesheet after calling bootstrap one. in current version, have @import code call bootstrap css @ beginning of own css file. none have worked. few items, changed bootstrap file, color.
please me figure out why file not override bootstrap. can see site @ http://www.dismantledesign.com/testsite2/
the site incomplete. can't proceed styling until figure out.
sorry if code ends missing. doesn't pastes textwrangler. feel free @ via source code in link.
code below:
@import url("bootstrap.min.css"); body{ font-family: 'raleway', helvetica, arial; font-size: 16px; color: #666666; font-weight: 400; letter-spacing: 1px; } p{ line-height: 20pt; font-weight: 400; } h1, h2, h3, h4, h5, h6{ color: #333333; text-transform: uppercase; font-family: 'raleway', helvetica, arial; font-weight: 700; } a{ color: #00acec; text-decoration: none; font-family: 'raleway', helvetica, arial; font-weight: 600; } a:hover, a:focus{ color: #5a5e61; text-decoration: none; } .btn-default{ border-radius: 2px; border: 1px solid #a7adb0; font-size: 14px; color: #a7adb0; font-weight: 700; text-transform: uppercase; padding: 11px 20px; } .btn-default:hover{ background: #5a5e61; color: #a7adb0; } /*end*/ /*logo*/ .navbar-brand{ width: 174px; height: 50px; padding: 0; margin: 0; text-indent: -9999px; } /*end*/ /*navigation*/ .navbar-default{ background: none; border: none; padding: 0 0 60px 0; } .navbar-default .navbar-nav>li>a{ font-size: 20px; font-weight: 600; text-transform: uppercase; color: #a7adb0; padding: 11px 0; text-align: center; } .navbar-default .navbar-nav>li>a:hover[ color: #fff; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{ background: none; outline: 0; color: #fff; } .navbar-toggle{ border: none; margin-top: 0; margin-right: 0; width:32px; height: 32px; text-align: center; } .navbar-default .navbar-collapse{ border: none; background: rgba(0,0,0,0.1) !important; border-radius: 2px; box-shadow: none; } .jumbotron{ background: #363737 url("img/tempjumbotron.jpg") no-repeat; background-size: cover; max-height: 800px; padding: 60px 0; margin: 0; } /*end*/ html
<!doctype html> <html lang="en"> <head> <!--hey, cc title!--> <title>contra coda media | audio | photo | video</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!--this css comes from. --> <link href="https://fonts.googleapis.com/css?family=raleway" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="jumbotron"> <div class="container"> <nav class="navbar navbar-default" role="navigation"> <!-- brand , toggle grouped better mobile display--> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only"> toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="img/logo5.png"></a> </div> <!-- collect nav content --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> <li><a href="#">services</a></li> <li><a href="#">gallery</a></li> <li><a href="#">contact</a></li> </ul> </div><!--end navbar collapse--> </nav> <div class="row text-center"> <h1>this contra coda</h1> <h3>where music never ends</h3> <a href="#" class="btn btn-primary btn-lg">learn more</a> </div> </div> </div> <!--end jumbotron--> <div class="whatsnew"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- wrapper slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img class="img-responsive" src="img/levelup.jpg" alt=""> </div> <div class="item"> <img class="img-responsive" src="img/heartwhole.jpg" alt=""> </div> </div> </div> </div> <!--end whats new--> <div class="services"> <div class="container"> <div class="row"> <div class="services-audio text-center"> <div class="col-md-4"> <span style="font-size: 30px" class="glyphicon glyphicon-headphones"> </span> <h4>audio</h4> <p>we believe in good, thoroughly crafted recording , mixing great care in order achieve high-quality result.</p> <a href="#" class="more">learn more</a> </div> </div> <div class="services-photo text-center"> <div class="col-md-4"> <span style="font-size: 30px" class="glyphicon glyphicon-camera"> </span> <h4>photo</h4> <p>we believe in good, thoroughly crafted recording great care in order achieve high-quality result.</p> <a href="#" class="more">learn more</a> </div> </div> <div class="services-video text-center"> <div class="col-md-4"> <span style="font-size: 30px" class="glyphicon glyphicon-facetime-video"> </span> <h4>video</h4> <p>we believe in good, thoroughly crafted recording great care in order achieve high-quality result.</p> <a href="#" class="more">learn more</a> </div> </div> </div> </div> </div> <!--end services--> <div class="clients"> <div class="heading"> <div class="container"> <div class="row"> <div class="col-md-6 text-center"> <h1>clients</h1> </div> <div class="col-md-6 text-center"> <a href="#" class="btn btn-default">see more</a> </div> </div> </div> </div> <!--end heading--> <div class="gallery"> <!--gallery start--> <div class="galleryinner"> <img src="img/clients/ivey.jpg" alt="" class="img-responsive" /> <div class="caption"> <div class="captionheading"> <h4>ivey</h4> <small>see more</small> </div> <div class="btn-group btn-trigger"> <a href="#" class="btn btn-default web-link">link</a> <a href="#" class="btn btn-default web-link">more</a> </div> </div> <!--end caption--> </div> <!--end gallery inner--> <div class="galleryinner"> <img src="img/clients/rufus.jpg" alt="" class="img-responsive" /> <div class="caption"> <div class="captionheading"> <h4>rufus dawkins</h4> <small>see more</small> </div> <div class="btn-group btn-trigger"> <a href="#" class="btn btn-default web-link">link</a> <a href="#" class="btn btn-default web-link">more</a> </div> </div> <!--end caption--> </div> <!--end gallery inner--> <div class="galleryinner"> <img src="img/clients/seddymac.jpg" alt="" class="img-responsive" /> <div class="caption"> <div class="captionheading"> <h4>seddy mac</h4> <small>see more</small> </div> <div class="btn-group btn-trigger"> <a href="#" class="btn btn-default web-link">link</a> <a href="#" class="btn btn-default web-link">more</a> </div> </div> <!--end caption--> </div> <!--end gallery inner--> <div class="galleryinner"> <img src="img/clients/lomax.jpg" alt="" class="img-responsive" /> <div class="caption"> <div class="captionheading"> <h4>melissa lomax</h4> <small>see more</small> </div> <div class="btn-group btn-trigger"> <a href="#" class="btn btn-default web-link">link</a> <a href="#" class="btn btn-default web-link">more</a> </div> </div> <!--end caption--> </div> <!--end gallery inner--> <div class="galleryinner"> <img src="img/clients/jeremy.jpg" alt="" class="img-responsive" /> <div class="caption"> <div class="captionheading"> <h4>jeremy williams</h4> <small>see more</small> </div> <div class="btn-group btn-trigger"> <a href="#" class="btn btn-default web-link">link</a> <a href="#" class="btn btn-default web-link">more</a> </div> </div> <!--end caption--> </div> <!--end gallery inner--> <div class="galleryinner"> <img src="img/clients/echoing.jpg" alt="" class="img-responsive" /> <div class="caption"> <div class="captionheading"> <h4>when kept echoing</h4> <small>see more</small> </div> <div class="btn-group btn-trigger"> <a href="#" class="btn btn-default web-link">link</a> <a href="#" class="btn btn-default web-link">more</a> </div> </div> <!--end caption--> </div> <!--end gallery inner--> <div class="galleryinner"> <img src="img/clients/delisle.jpg" alt="" class="img-responsive" /> <div class="caption"> <div class="captionheading"> <h4>raistlin delisle</h4> <small>see more</small> </div> <div class="btn-group btn-trigger"> <a href="#" class="btn btn-default web-link">link</a> <a href="#" class="btn btn-default web-link">more</a> </div> </div> <!--end caption--> </div> <!--end gallery inner--> </div> <!--end gallery--> </div> <!---end clients--> <div class="firstcontact"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="email text-center"> <span style="font-size: 30px" class="glyphicon glyphicon-envelope"> </span> <h5>email</h5> <p>layne@contracoda.com</p> </div> </div> <div class="col-md-8"> <div class="social text-center"> <a href="#"><span class="icon-sprite sprite-ig"> </span></a> <a href="#"><span class="icon-sprite sprite-fb"> </span></a> <a href="#"><span class="icon-sprite sprite-twitter"> </span></a> <a href="#"><span class="icon-sprite sprite-soundcloud"> </span></a> </div> </div> </div> </div> </div> <!---end first contact--> <footer> <div class="container"> <div class="row"> <div class="col-md-6 text-center"> <div class="copyright"> <small>© 2017 contra coda media</small> </div> </div> <div class="col-md-6 text-center"> <div class="design"> <small>web design dismantle design</small> </div> </div> </div> </div> </footer> <!---end clients--> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap.js"></script>
on line 82 using square bracket [ instead of squiggle {, swap , work:
.navbar-default .navbar-nav>li>a:hover {
this makes after error not work, why background wont change :) background image not change unless looks line looks (line 110):
background: #363737 url(../img/tempjumbotron.jpg) no-repeat;
koda
Comments
Post a Comment