css - How to remove the border-bottom from bootstrap navbar -
i realize question has answers have worked try may, cannot remove annoying border.
i have tried following css:
.nav-container{ border-width:0; box-shadow:none; background-color: aliceblue; } .navbar { background-color: #99ccff; border: 0; } although background-color set, border remains.
here site.
index.html:
html, body { background-color: aliceblue; } .nav-container { border-width: 0; box-shadow: none; background-color: aliceblue; } .navbar { background-color: #99ccff; border: 0; }<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <header> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid nav-container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#writers-tryst"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div style="display: inline-block"> <a class="navbar-brand" href="#"> <img id="logo" src="img/writers-tryst-logo-min.png" alt="logo" /> </a> <br/> <br/> <div id="shares" class="row"> <!-- twitter --> <a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<text>&via=<via>" target="_blank" title="twitter" class="share-btn twitter"> <i class="fa fa-twitter"></i> </a> <!-- facebook --> <a href="http://www.facebook.com/sharer/sharer.php?u=http://writers.tryst.com" target="_blank" title="facebook" class="share-btn facebook"> <i class="fa fa-facebook"></i> </a> <!-- stumbleupon (url, title) <a href="http://www.stumbleupon.com/submit?url=http://writers.tryst.com&title=<title>" target="_blank" class="share-btn stumbleupon" title="stumble-upon"> <i class="fa fa-stumbleupon-circle"></i> </a> --> <!-- reddit (url, title) <a href="http://reddit.com/submit?url=http://writers.tryst.com&title=<title>" target="_blank" class="share-btn reddit" title="reddit"> <i class="fa fa-reddit-square"></i> </a> --> <!-- linkedin --> <a href="http://www.linkedin.com/sharearticle?url=http://writers.tryst.com&title=<title>&summary=<summary>&source=<source_url>" target="_blank" title="linked-in" class="share-btn linkedin"> <i class="fa fa-linkedin"></i> </a> <!-- google plus --> <a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus"> <i class="fa fa-google-plus"></i> </a> </div> </div> </div> <!--navbar-header--> <div class="collapse navbar-collapse" id="writers-tryst"> <ul class="nav navbar-nav"> <li class="active"><a id="homepage" href="#/"><i class="acctive glyphicon glyphicon-home fa fa-home"></i> home</a> </li> <li><a href="#writers" id="writers-link" class="fa fa-book"> writers</a> </li> <li><a href="#enablers" id="enablers-link" class="fa fa-thumbs-o-up"> enablers</a> </li> <li><a href="#about" class="fa fa-info-circle"> about</a> </li> <li><a href="#privacy" class="fa fa-user-secret"> privacy/rules</a> </li> <li><a href="#contact" class="fa fa-envelope-o"> contact</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a id="login" href="#log-in"><i class="fa fa-sign-in"></i> log-in</a> </li> <li><a id="accounts-link" href="#accounts"><i class="fa fa-user hidden"></i> create account</a> </li> <li class="dropdown" data-toggle="popover" data-trigger="hover" data-placement="bottom"> <button class="btn btn-custom-primary dropdown-toggle fa fa-user" style="margin-top: 8px; color: white;" data-html="true" type="button" id="user-dropdown-link" data-toggle="dropdown"><span class="caret"></span> </button> </a> <ul class="dropdown-menu" role="menu" data-aria-labelledby="create-account-link"> <li><a id="update-profile" href="#update-profile" class="fa fa-database"> update profile</a> </li> <li><a id="manage-uploads" href="#manage-uploads" class="fa fa-book"> manage uploads</a> </li> <li><a id="review-submissions" href="#review-submissions" class="fa fa-book"> review submissions</a> </li> <li><a id="update-submissions" href="#update-submissions" class="fa fa-book"> update reviews</a> </li> </ul> </li> <li> <a id="reset-pwd-link" href="#reset-pwd"></a> </li> </ul> </div> <!--navbar-collapse--> </div> <!--container fluid--> </nav> </header> <div> <div id="message" class="alert m-t-10 m-b-10"></div> <div id="main" class="content container"> <!-- angular templating --> <!-- content injected --> <div data-ng-view></div> </div> <footer class="panel panel-default panel-transparent"> <div id="footer" class="text-right small">© 2016 ronald tornambe, inc.</div> </footer> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
there box shadow added bootstrap theme. following rules remove on .navbar-collapse class when nav under 768px.
note: have stray tag after fa fa-user button , (possibly) using normalize.css twice since bootstrap3 uses version of ready. see normalize.less.
.navbar.navbar-default { background-color: #99ccff; border: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar.navbar-default .navbar-collapse { border: 0; -webkit-box-shadow: none; box-shadow: none; } before box-shadow:
after removing box-shadow:
working example:
/*for demo only*/ html, body { background: aliceblue; } /*for demo only*/ .nav-container { border-width: 0; box-shadow: none; background-color: aliceblue; } .navbar.navbar-default { background-color: #99ccff; border: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar.navbar-default .navbar-collapse { border: 0; -webkit-box-shadow: none; box-shadow: none; }<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <header> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid nav-container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#writers-tryst"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div style="display: inline-block"> <a class="navbar-brand" href="#"> <img id="logo" src="https://writers-tryst.com//img/writers-tryst-logo-min.png" alt="logo" /> </a> <br/> <br/> <div id="shares" class="row"> <a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<text>&via=<via>" target="_blank" title="twitter" class="share-btn twitter"> <i class="fa fa-twitter"></i> </a> <a href="http://www.facebook.com/sharer/sharer.php?u=http://writers.tryst.com" target="_blank" title="facebook" class="share-btn facebook"> <i class="fa fa-facebook"></i> </a> <a href="http://www.linkedin.com/sharearticle?url=http://writers.tryst.com&title=<title>&summary=<summary>&source=<source_url>" target="_blank" title="linked-in" class="share-btn linkedin"> <i class="fa fa-linkedin"></i> </a> <a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus"> <i class="fa fa-google-plus"></i> </a> </div> </div> </div> <div class="collapse navbar-collapse" id="writers-tryst"> <ul class="nav navbar-nav"> <li class="active"><a id="homepage" href="#/"><i class="acctive glyphicon glyphicon-home fa fa-home"></i> home</a> </li> <li><a href="#writers" id="writers-link" class="fa fa-book"> writers</a> </li> <li><a href="#enablers" id="enablers-link" class="fa fa-thumbs-o-up"> enablers</a> </li> <li><a href="#about" class="fa fa-info-circle"> about</a> </li> <li><a href="#privacy" class="fa fa-user-secret"> privacy/rules</a> </li> <li><a href="#contact" class="fa fa-envelope-o"> contact</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a id="login" href="#log-in"><i class="fa fa-sign-in"></i> log-in</a> </li> <li><a id="accounts-link" href="#accounts"><i class="fa fa-user hidden"></i> create account</a> </li> <li class="dropdown" data-toggle="popover" data-trigger="hover" data-placement="bottom"> <button class="btn btn-custom-primary dropdown-toggle fa fa-user" style="margin-top: 8px; color: white;" data-html="true" type="button" id="user-dropdown-link" data-toggle="dropdown"><span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" data-aria-labelledby="create-account-link"> <li><a id="update-profile" href="#update-profile" class="fa fa-database"> update profile</a> </li> <li><a id="manage-uploads" href="#manage-uploads" class="fa fa-book"> manage uploads</a> </li> <li><a id="review-submissions" href="#review-submissions" class="fa fa-book"> review submissions</a> </li> <li><a id="update-submissions" href="#update-submissions" class="fa fa-book"> update reviews</a> </li> </ul> </li> <li> <a id="reset-pwd-link" href="#reset-pwd"></a> </li> </ul> </div> </div> </nav> </header> <div> <div id="message" class="alert m-t-10 m-b-10"></div> <div id="main" class="content container"> <div data-ng-view></div> </div> <footer class="panel panel-default panel-transparent"> <div id="footer" class="text-right small">© 2016 ronald tornambe, inc.</div> </footer> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Comments
Post a Comment