I'm trying to position my Bootstrap badge like the next picture:
But this is what I'm getting:
What am I doing wrong? Or what can I add to my CSS?
This is my code:
<div class="col-md">
<a class="navbar-brand" href="{{ route('user.cart') }}"><i class="fas fa-shopping-cart"></i></a>
<span class="badge badge-pill badge-warning">{{ Session::has('cart') ? Session::get('cart')->totalQty : '' }}</span>
<span class="sr-only">(current)</span></a>
</div>
try this
<div class="col-md">
<a class="navbar-brand" href="{{ route('user.cart') }}">
<i class="fas fa-shopping-cart"></i>
<span class="badge badge-pill badge-warning count-notif">{{ Session::has('cart') ? Session::get('cart')->totalQty : '' }}</span>
<span class="sr-only">(current)</span>
</a>
</div>
add this in css
.count-notif{
vertical-align:middle;
margin-left:-15px;
margin-top: -20px;
font-size:13px;
}
.badge-warning{
padding:3px;
}
Related
I have the following code to represent a floating action button:
.dropup .hide-toggle.dropdown-toggle::after {
display: none !important;
}
<div class="dropup position-absolute bottom-0 end-0 rounded-circle m-5">
<button type="button" class="btn btn-success btn-lg dropdown-toggle hide-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
<i class="fa-solid fa-plus"></i>
<span class="visually-hidden">Add Category</span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">...</a>
</li>
</ul>
</div>
But I'm having an issue hiding the toggle icon in the .dropdown-toggle despite having a CSS rule to have it not display.
What can I do to remove the icon?
Are you sure it's not working? I see no icon here.
.dropup .hide-toggle.dropdown-toggle::after {
display: none !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="dropup position-absolute bottom-0 end-0 rounded-circle m-5">
<button type="button" class="btn btn-success btn-lg dropdown-toggle hide-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
<i class="fa-solid fa-plus"></i>
<span class="visually-hidden">Add Category</span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">...</a>
</li>
</ul>
</div>
I am implementing a website with Meteor + Blaze + Bulma. I've basically created a navigation menu and got the burger button working for small devices. But the problem is, that the position of the burger button is messed up.
I would like to have it on the far right and vertically aligned with the logo. But the burger is right next to the logo and also slightly lower. I've tried "position: absolute; right:0;" but it keeps jumping back.
Is Bulma not suited for use with Blaze and Meteor? I have no other CSS files so far and just added Bulma in the header tags. So what could be the issue?
<template name="navigation">
<nav class="navbar is-transparent" role="navigation" aria-label="main navigation">
<div class="container">
<!-- Logo/Home -->
<div class="navbar-brand">
<a class="" href="{{pathFor route='Home'}}">
<img src="logo.svg" width="200" height="29" />
</a>
<!-- Burger Menu Button -->
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navlist">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<!-- Navigation Conent -->
<div id="navlist" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="{{pathFor route='1'}}">
1
</a>
<a class="navbar-item" href="{{pathFor route='2'}}">
2
</a>
<a class="navbar-item" href="{{pathFor route='3'}}">
3
</a>
<a class="navbar-item" href="{{pathFor route='4'}}">
4
</a>
<a class="navbar-item" href="{{pathFor route='5'}}">
5
</a>
</div>
<!-- Navbar social -->
<div class="navbar-end">
<a class="navbar-item icon is-large" href="https://www.meetup.com/...">
<i class="fab fa-lg fa-meetup"></i>
</a>
<a class="navbar-item icon is-large" href="https://www.facebook.com/...">
<i class="fab fa-lg fa-facebook"></i>
</a>
<a class="navbar-item icon is-large" href="https://www.youtube.com/...">
<i class="fab fa-lg fa-youtube"></i>
</a>
</div>
</div>
</div>
</nav>
You need to add the class navbar-item to the container of your logo like that :
<div class="navbar-brand">
<a class="navbar-item" href="{{pathFor route='Home'}}"> <!-- Adding the class navbar-item -->
<img src="logo.svg" width="200" height="29" />
</a>
<!-- Burger Menu Button -->
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navlist">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
Result on my own project :
Without navbar-item :
With navbar-item :
I generated a sidenav from using angular material but the elevation is missing on the sidenav. I tried adding it using mat-elevation-zx but without success. I also tried boxshadow on css still without success. Is there any work around the elevation cause the one in the toolbar is working but on the fixed sidenav is not.
The html:
<mat-sidenav-container class="sidenav-container">
<mat-sidenav class="mat-elevation-z6" #drawer class="sidenav" fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar class="mat-elevation-z5" color="primary"><span class="logo">Logo</span></mat-toolbar>
<mat-divider></mat-divider>
<mat-nav-list class="nav-list">
<div class="nav-item">
<a class="nav-link" mat-list-item routerLink="" routerLinkActive="active-list-item" [routerLinkActiveOptions]="{ exact: true }">
<mat-icon class="nav-icon">dashboard</mat-icon>
Dashboard
</a>
</div>
<div class="nav-item">
<a class="nav-link" mat-list-item routerLink="/question" routerLinkActive="active-list-item">
<mat-icon class="nav-icon">contact_support</mat-icon>
Questions
</a>
</div>
<div class="nav-item">
<div></div>
<a class="nav-link" mat-list-item routerLink="/category" routerLinkActive="active-list-item">
<mat-icon class="nav-icon">category</mat-icon>
Categories
</a>
</div>
<div class="nav-item">
<a class="nav-link" mat-list-item routerLink="/discipline" routerLinkActive="active-list-item">
<mat-icon class="nav-icon">book</mat-icon>
Discipline
</a>
</div>
<div class="nav-item">
<a class="nav-link" mat-list-item routerLink="/template" routerLinkActive="active-list-item">
<mat-icon class="nav-icon">format_align_justify</mat-icon>
Template
</a>
</div>
<div class="nav-item">
<a class="nav-link" mat-list-item routerLink="/level" routerLinkActive="active-list-item">
<mat-icon class="nav-icon">equalizer</mat-icon>
Level
</a>
</div>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar class="mat-elevation-z5" color="primary">
<button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<div fxFlex></div>
<div>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>account_circle</mat-icon>
<mat-icon>keyboard_arrow_down</mat-icon>
</button>
<mat-menu #menu="matMenu" yPosition="below">
<p class="user-info" mat-menu-item disableRipple><span class="full-name">name surname</span></p>
<p class="user-info" mat-menu-item disableRipple><span class="email">email</span></p>
<mat-divider></mat-divider>
<button class="menu-item" mat-menu-item>Profile</button>
<mat-divider></mat-divider>
<button mat-menu-item>Sign out</button>
</mat-menu>
</div>
</mat-toolbar>
<main>
<router-outlet></router-outlet>
</main>
</mat-sidenav-content>
</mat-sidenav-container>
The css:
.sidenav-container {
height: 100%;
}
.sidenav {
width: 250px;
}
.mat-toolbar.mat-primary {
position: sticky;
top: 0;
z-index: 4;
}
.logo {
margin-left: 4%;
font-size: 30px;
}
.nav-item {
width: 230px;
}
.nav-icon {
margin-right: 10%;
}
.nav-link {
width: 200px;
margin-top: 3%;
margin-left: 3%;
}
.user-info:hover {
background-color: transparent;
cursor: text;
}
.user-info {
line-height: 100%;
height: 90%;
}
.full-name {
font-weight: bold;
}
.email {
font-size: 90%;
}
Your mat-sidenav dom element has two class attributes, refactor your code like so:
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav mat-elevation-z6" fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar class="mat-elevation-z5" color="primary"><span class="logo">Logo</span></mat-toolbar>
<mat-divider></mat-divider>
<mat-nav-list class="nav-list">
<div class="nav-item">
<a class="nav-link" mat-list-item routerLink="" routerLinkActive="active-list-item" [routerLinkActiveOptions]="{ exact: true }">
<mat-icon class="nav-icon">dashboard</mat-icon>
Dashboard
</a>
</div>
<div class="nav-item">
<a class="nav-link" mat-list-item routerLink="/question" routerLinkActive="active-list-item">
<mat-icon class="nav-icon">contact_support</mat-icon>
Questions
</a>
</div>
<div class="nav-item">
<div></div>
<a class="nav-link" mat-list-item routerLink="/category" routerLinkActive="active-list-item">
<mat-icon class="nav-icon">category</mat-icon>
Categories
</a>
</div>
<div class="nav-item">
<a class="nav-link" mat-list-item routerLink="/discipline" routerLinkActive="active-list-item">
<mat-icon class="nav-icon">book</mat-icon>
Discipline
</a>
</div>
<div class="nav-item">
<a class="nav-link" mat-list-item routerLink="/template" routerLinkActive="active-list-item">
<mat-icon class="nav-icon">format_align_justify</mat-icon>
Template
</a>
</div>
<div class="nav-item">
<a class="nav-link" mat-list-item routerLink="/level" routerLinkActive="active-list-item">
<mat-icon class="nav-icon">equalizer</mat-icon>
Level
</a>
</div>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar class="mat-elevation-z5" color="primary">
<button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<div fxFlex></div>
<div>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>account_circle</mat-icon>
<mat-icon>keyboard_arrow_down</mat-icon>
</button>
<mat-menu #menu="matMenu" yPosition="below">
<p class="user-info" mat-menu-item disableRipple><span class="full-name">name surname</span></p>
<p class="user-info" mat-menu-item disableRipple><span class="email">email</span></p>
<mat-divider></mat-divider>
<button class="menu-item" mat-menu-item>Profile</button>
<mat-divider></mat-divider>
<button mat-menu-item>Sign out</button>
</mat-menu>
</div>
</mat-toolbar>
<main>
<router-outlet></router-outlet>
</main>
</mat-sidenav-content>
</mat-sidenav-container>
Then remove the border on the sidenav using the "sidenav" css code like so:
.sidenav {
width: 250px;
border: none;
}
I have a question if and how the following is achievable through CSS:
View 1 (large screens):
View 2 (medium-sized screens):
Secondary question: How to center the navigation elements as soon as they are placed in a the second line?
View 3 (mobile):
My problem is, that the right part of the navigation (govel, bookmark, ..., login) should be in the same line as the logo, if there is not enough space (medium-sized screens, View 2). But if mobile navigation gets activated (View 3), I want to be the "Suche", "Kataloge", "Kategorien"... links first.
Also it would be nice if the navigation elements can be centered in (View 2).
The whole thing is build with Bootstrap 3.
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
nav#header img.favicon-logo {
padding-top: 5px;
height: 46px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" id="header">
<div class="container-fluid">
<!-- Titel und Schalter werden für eine bessere mobile Ansicht zusammengefasst -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
<span class="sr-only">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/">
<img src="https://www.lotsearch.de/images/favicons/favicon_144x144.png" class="favicon-logo">
</a>
</div>
<!-- Alle Navigationslinks, Formulare und anderer Inhalt werden hier zusammengefasst und können dann ein- und ausgeblendet werden -->
<div class="navbar-collapse collapse" id="main-menu" aria-expanded="false" style="height: 1px;">
<div class="navbar-inner">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-search"></i>
Suche <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><i class="fa fa-lightbulb-o fa-fw"></i> Suche (Aktuelle Auktionen)</li>
<li><i class="fa fa-archive fa-fw"></i> Suche (Archiv)</li>
</ul>
</li>
<li>
<a href="/auction-catalogs">
<i class="fa fa-book fa-fw"></i>
Kataloge </a>
</li>
<li>
<i class="fa fa-list-alt fa-fw"></i> Kategorien
</li>
<li>
<i class="fa fa-bell fa-fw"></i> Suchaufträge
</li>
<li>
<i class="fa fa-bar-chart fa-fw"></i> Künstler / Analysen
</li>
<li>
<i class="fa fa-newspaper-o fa-fw"></i> Blog
</li>
<li>
<i class="fa fa-star fa-fw"></i> Top-Seiten
</li>
<li>
<i class="fa fa-pencil-square-o fa-fw"></i> Registrieren
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/bids/management/bidlist" title="Vorgemerkte Gebote auf Ihrer Bietliste">
<div class="icon-wrapper hidden-xs">
<i class="fa fa-gavel fa-fw"></i>
<span class="badge badge-orange" id="bidlist-counter">0</span>
</div>
<div class="visible-xs">
<i class="fa fa-gavel fa-fw"></i> Gebote (Bietliste)
</div>
</a>
</li>
<li>
<a href="/favorites" title="Merkzettel">
<div class="icon-wrapper hidden-xs">
<i class="fa fa-bookmark fa-fw"></i>
<span class="badge badge-orange" id="bookmark-counter">0</span>
</div>
<div class="visible-xs">
<i class="fa fa-bookmark fa-fw"></i> Merkzettel
</div>
</a>
</li>
<li class="dropdown">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="flag-icon flag-icon-de"></span>
<span class=" fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu dropdown-langauge">
<li><span class="flag-icon flag-icon-gb"></span> GB </li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-user fa-fw"></i> Login <span class="caret"></span>
<ul class="dropdown-menu dropdown-lr animated fadeIn" role="menu">
<li>
<div class="col-lg-12">
<h4>Login</h4>
<form method="post" name="loginform" action="/user/login" id="loginform">
<div class="form-group "><label>Email</label><input name="identity" type="text" tabindex="1" class="form-control" value=""></div>
<div class="form-group ">
<label for="credential">Passwort</label> <span class="pull-right">Passwort vergessen?</span>
<input type="password" name="credential" tabindex="2" class="form-control" value="">
</div>
<div class="form-group "><button type="submit" name="submit" class="form-control btn-orange btn btn-default" tabindex="3" value=""><span class="fa fa-sign-in"></span> Einloggen</button></div>
</form>
<div class="text-center pt-5px">
<p class="pb-5px">- ODER -</p>
<a class="btn btn-default" href="/user/registration/select-product">
<i class="fa fa-pencil-square-o"></i> Registrierung </a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
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> Writers
</li>
<li> Enablers
</li>
<li> About
</li>
<li> Privacy/Rules
</li>
<li> Contact
</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">© 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 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:
After removing the 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> Writers
</li>
<li> Enablers
</li>
<li> About
</li>
<li> Privacy/Rules
</li>
<li> Contact
</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>
simply apply box-shadow: none; in navbar
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.
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">