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>
Related
I'm using Bootstrap 4 and I want my navbar toggle icon (known as the burger menu) to change color on :hover state. This is what I've been trying but it won't work:
.navbar-light .navbar-toggler .menu-icon:hover,
.navbar-light .navbar-toggler .menu-icon:active,
.navbar-light .navbar-toggler .menu-icon:focus {
color: red !important;
}
Here's my code:
.navbar-light .navbar-toggler .menu-icon:hover,
.navbar-light .navbar-toggler .menu-icon:active,
.navbar-light .navbar-toggler .menu-icon:focus {
color: red !important;
}
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<a class="navbar-brand" href="index.html">
<img src="images/logo-paygol.svg" alt="Logo Paygol">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTopMenu" aria-controls="navbarTopMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon menu-icon"></span>
</button></nav>
Hey there as far as I know bootstrap 4 is using image URL to add the icon. This means it is an image and you can not add hover over an image. But there is a roundabout it.
So you must use a custom icon and add the hover for it as the following, am going to use fontawesome in this example.
.navbar button.navbar-toggler:hover {
color: red;
}
/* or
.navbar .navbar-toggler span:hover i {
color: red;
}
/*
/*
or
.navbar .navbar-toggler span i:hover {
color: red;
}
*/
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<!-- <span class="navbar-toggler-icon"></span> -->
<span><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
As you can see I did replace the icon bootstrap uses here
<span class="navbar-toggler-icon"></span>
and I used mine from fontawesome as following
<span><i class="fas fa-bars"></i></span>
and now the hover effects work since it is a font and you can change the color, and size very easily.
I hope that answers your question. If not do please let me know. and I will do my best to edit my answer to fit your question.
What is causing my dropdown to have extra whitespace? (Apologies for the screenshot)
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="caret">Snooze</span>
</button>
<div class="dropdown-menu">
<button class="dropdown-item">1 Hour</li>
</div>
</div>
As far as I know there is nothing strange in my CSS files that would cause this. I am using Bootstrap4.
Check out this code. I removed <span class="caret"></span> because it's not a valid class in bootstrap. I changed btn-default to other button, btn-primary in this case.
The most important error - look at dropdown-menu. You open button tag and close li so I changed that to div and it works nicely.
Check out Bootstrap Docs for more info here https://getbootstrap.com/docs/4.3/components/dropdowns/.
/*DEMO*/
body{padding:3rem}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Snooze</button>
<div class="dropdown-menu">
<div class="dropdown-item">1 Hour</div>
</div>
</div>
Your HTML structure is wrong. Check what you have inside the .dropdown-menu element.
Instead of <button class="dropdown-item">1 Hour</li> use <li class="dropdown-item">1 Hour</li>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Snooze
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li class="dropdown-item">1 Hour</li>
</div>
</div>
I'm struggling to figure out how to centre my logo in the middle of the page, whenever I try to do it with m-auto, it centres the logo between the other items... but not the page. I've tried the right:... method, but had no luck.
This is my code:
.navbar-nav {
flex-direction: row !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" integrity="sha256-7O1DfUu4pybYI7uAATw34eDrgQaWGOfMV/8erfDQz/Q=" crossorigin="anonymous" />
<nav class="navbar navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" onclick="openSideNav()" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav m-auto">
<a class="navbar-brand" href="#">
<img src="http://pngimg.com/uploads/google/google_PNG19642.png" class="img-fluid" style="max-width:300px;" alt="">
</a>
</ul>
<div class="d-none d-md-block">
<ul class="navbar-nav ml-auto">
<li class="nav-item mr-2 pr-4 my-auto">
<i class="icon-phone mr-1"></i>0122323232323
</li>
<li class="nav-item">
<a class="nav-btn btn btn-lg btn-primary" href="#booking" onclick="openNav()">Book Today <i class="ml-2 icon-calendar"></i></a>
</li>
</ul>
</div>
</nav>
To center the logo, firstly to organise it slightly better you need to make it column not row. So the the phone number and the booking button stack vertically.
Then you need to separate the areas into columns and define their widths making the two sides equal and the center whatever is left over. i.e. left 25% middle 50% and right 25%.
Here is the snippet.
.navbar-nav {
flex-direction: column !important;
justify-content: center;
}
.side {
width: 25%;
}
.middle {
width: 50%;
display: flex;
justify-content: center;
}
.flexend {
display: flex;
justify-content: flex-end;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" integrity="sha256-7O1DfUu4pybYI7uAATw34eDrgQaWGOfMV/8erfDQz/Q=" crossorigin="anonymous" />
<nav class="navbar navbar-light bg-light">
<div class="side">
<button class="navbar-toggler" type="button" data-toggle="collapse" onclick="openSideNav()" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="middle">
<div class="logo">
<a class="navbar-brand" href="#">
<img src="http://pngimg.com/uploads/google/google_PNG19642.png" class="img-fluid" style="max-width:300px;" alt="">
</a>
</div>
</div>
<div class="side flexend">
<div class="d-none d-md-block">
<ul class="navbar-nav ml-auto">
<li class="nav-item mr-2 pr-4 my-auto">
<i class="icon-phone mr-1"></i>0122323232323
</li>
<li class="nav-item">
<a class="nav-btn btn btn-lg btn-primary" href="#booking" onclick="openNav()">Book Today <i class="ml-2 icon-calendar"></i></a>
</li>
</ul>
</div>
</div>
</nav>
A similar question has already been asked: Center an element in Bootstrap 4 Navbar
I will answer it again because in this case there is a logo image.
<nav class="navbar navbar-light flex-row">
<div class="d-flex flex-fill">
<button class="navbar-toggler" type="button" data-toggle="collapse" onclick="openSideNav()" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="d-flex flex-fill justify-content-center">
<a class="navbar-brand" href="#">
<img src="http://pngimg.com/uploads/google/google_PNG19642.png" class="img-fluid" style="max-width:300px" alt="">
</a>
</div>
<div class="d-none d-md-flex flex-fill">
<ul class="navbar-nav ml-auto justify-content-end">
<li class="nav-item mr-2 pr-4 my-auto">
<i class="icon-phone mr-1"></i>0122323232323
</li>
<li class="nav-item">
<a class="nav-btn btn btn-lg btn-primary" href="#booking" onclick="openNav()">Book Today <i class="ml-2 icon-calendar"></i></a>
</li>
</ul>
</div>
</nav>
Also, check the docs for the correct Navbar structure because the way you're using the toggler, no expand class or navbar-collapse class isn't standard Navbar structure
https://www.codeply.com/go/8ik1wexpjI
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">
I am trying to get bootstrap dropdown list working on plnkr but it is not dropping down the list, I have created a plunk here:
http://plnkr.co/edit/tw3O5ihT7YB79BcAGlsh
This code was copied from bootstrap:
<body ng-controller="MainCtrl as vm">
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="a in vm.exportAction">
<a ng-if="a.visble == true">
<span ng-click="vm.selectedExport(a)">{{a.action}}</span>
</a>
<div ng-if="a.divider == true">
<div role="separator" class="divider"></div>
</div>
</li>
</ul>
</div>
</body>
Any ideas?
Add Jquery and Bootstrap JavaScript files in head after Bootstrap's CSS - plnkr:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>