6

I realize this question has answers that have worked for some but try as I may, I cannot remove this annoying border.

I have tried the following CSS:

.nav-container{
    border-width:0;
    box-shadow:none;
    background-color: aliceblue;
}
.navbar {
    background-color: #99ccff; 
    border: 0;
}

Although the background-color does get set, the border remains.

Here is the 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 -->
    <!-- this is where content will be injected -->
    <div data-ng-view></div>
  </div>
  <footer class="panel panel-default panel-transparent">
    <div id="footer" class="text-right small">&#169; 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>

2
  • 1
    You should provide the relevant code right there.
    – nicael
    Jul 25, 2016 at 16:16
  • Nope. Not all the code. Only relevant. The minimal amount of code required to reproduce the problem.
    – nicael
    Jul 25, 2016 at 16:19

4 Answers 4

19

There is a box shadow added by the bootstrap theme. The following rules will remove it as well as on the .navbar-collapse class when the nav is under 768px.

Note: you have a stray tag after the fa fa-user button and are (possibly) using normalize.css twice since Bootstrap3 uses a version of it all 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 with box-shadow:

enter image description here

After removing the box-shadow:

enter image description here

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">&#169; 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>

2
  • Thank you so much for the detailed answer. Jul 25, 2016 at 19:23
  • fyi - for others using the dark menu (navbar-inverse), be sure to use the correct class: .navbar-inverse { border-color:red; }, .navbar-inverse {border:none !Important;}, etc.
    – puddleglum
    May 3, 2017 at 14:01
2

simply apply box-shadow: none; in navbar

1
  • hell yeah ! I was going crazy for problem. Feb 23, 2021 at 9:25
1

You have several declarations for the CSS box-shadow property on the .navbar-default element. If you remove all of those the border will be gone.

3
  • I tried removing the box-shadow from the .nav-container, but the border remains. Where are the others you referred to?. Jul 25, 2016 at 16:29
  • Line 131 of theme.less CSS there is .-webkit-box-shadow and .box-shadow. If you are still seeing the border in Chrome, then you have to remove the .-webkit-box-shadow declaration. Also, it's on .navbar-default, not .nav-container.
    – Josh
    Jul 25, 2016 at 16:32
  • I have tried selecting navbar-default but neither the background-color nor the border is displayed. I am not seeing a box-shadow but a 1px border. Jul 25, 2016 at 16:48
1

The only solution that is working for me is inline css with !important property:

border: none !important; outline: none !important;

inside navbar-toggler:

 <button class="navbar-toggler" style="border: none !important;  outline: none !important;"
    type="button" data-toggle="collapse" data-target="#collapsingNavbar">

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.