I am trying to change the color of the nav-link to white when hovering.
Using this doesn't work:
.nav-link:hover{ color:white; }
<nav class="navbar navbar-toggleable-lg fixed-top navbar-inverse">
<button class="navbar-toggler navbar-toggler-right"
type="button"
data-toggle="collapse"
data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container">
<!-- You need this DIV for alignment -->
<a class="navbar-brand"
href="../index.php">d</a>
<div class="collapse navbar-collapse"
id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto scrollable-navmenu">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active"
href="#"
id="dropdown01"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">MD</a>
<div class="dropdown-menu"
aria-labelledby="dropdown01">
<a class="dropdown-item active"
href="#">
MD2 <span class="sr-only">(current)</span>
</a>
<a class="dropdown-item"
href="../md4">MD4</a>
<a class="dropdown-item"
href="../md5">MD5</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#"
id="dropdown02"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">SHA</a>
<div class="dropdown-menu"
aria-labelledby="dropdown02">
<a class="dropdown-item"
href="../sha1">SHA1</a>
<a class="dropdown-item"
href="../sha256">SHA256</a>
<a class="dropdown-item"
href="../sha384">SHA384</a>
<a class="dropdown-item"
href="../sha512">SHA512</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#"
id="dropdown03"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">RIPEMD</a>
<div class="dropdown-menu"
aria-labelledby="dropdown03">
<a class="dropdown-item"
href="../ripemd128">RIPEMD128</a>
<a class="dropdown-item"
href="../ripemd160">RIPEMD160</a>
<a class="dropdown-item"
href="../ripemd256">RIPEMD256</a>
<a class="dropdown-item"
href="../ripemd320">RIPEMD320</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="../whirlpool">Whirlpool</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#"
id="dropdown04"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">Tiger</a>
<div class="dropdown-menu"
aria-labelledby="dropdown04">
<a class="dropdown-item"
href="../tiger128,3">Tiger128,3</a>
<a class="dropdown-item"
href="../tiger160,3">Tiger160,3</a>
<a class="dropdown-item"
href="../tiger192,3">Tiger192,3</a>
<a class="dropdown-item"
href="../tiger128,4">Tiger128,4</a>
<a class="dropdown-item"
href="../tiger160,4">Tiger160,4</a>
<a class="dropdown-item"
href="../tiger192,4">Tiger192,4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="../snefru">Snefru</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="../gost">GOST</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="../adler32">Adler32</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="../crc32">CRC32</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="../crc32b">CRC32B</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#"
id="dropdown05"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">HAVAL</a>
<div class="dropdown-menu"
aria-labelledby="dropdown05">
<a class="dropdown-item"
href="../haval128,3">HAVAL128,3</a>
<a class="dropdown-item"
href="../haval160,3">HAVAL160,3</a>
<a class="dropdown-item"
href="../haval192,3">HAVAL192,3</a>
<a class="dropdown-item"
href="../haval224,3">HAVAL224,3</a>
<a class="dropdown-item"
href="../haval256,3">HAVAL256,3</a>
<a class="dropdown-item"
href="../haval128,4">HAVAL128,4</a>
<a class="dropdown-item"
href="../haval160,4">HAVAL160,4</a>
<a class="dropdown-item"
href="../haval192,4">HAVAL192,4</a>
<a class="dropdown-item"
href="../haval224,4">HAVAL224,4</a>
<a class="dropdown-item"
href="../haval256,4">HAVAL256,4</a>
<a class="dropdown-item"
href="../haval128,5">HAVAL128,5</a>
<a class="dropdown-item"
href="../haval160,5">HAVAL160,5</a>
<a class="dropdown-item"
href="../haval192,5">HAVAL192,5</a>
<a class="dropdown-item"
href="../haval224,5">HAVAL224,5</a>
<a class="dropdown-item"
href="../haval256,5">HAVAL256,5</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
You need to override the Bootstrap CSS, change it to:
.nav-link:hover {
color: white !important;
}
Related
I'm recreating the mac OS navbar and would like to resize the navbar height, and the text size (to around 12px). It's the very first time I'm using bootstrap so any help would be amazing, please. Also, let me know about where I could find information about how to use bootstrap other than their website.
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa-solid fa-power-off"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">About ziko OS</a>
<a class="dropdown-item" href="#">Settings</a>
<a class="dropdown-item" href="#">Log out</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
File</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Open</a>
<a class="dropdown-item" href="#">Close Window</a>
<a class="dropdown-item" href="#">Get info</a>
<a class="dropdown-item" href="#">Move to trash</a>
<a class="dropdown-item" href="#">Find</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Edit</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Undo</a>
<a class="dropdown-item" href="#">Redo</a>
<a class="dropdown-item" href="#">Cut</a>
<a class="dropdown-item" href="#">Copy</a>
<a class="dropdown-item" href="#">Paste</a>
<a class="dropdown-item" href="#">Select All</a>
<a class="dropdown-item" href="#">Emojis & Symbols</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Help</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">ziko OS help</a>
<a class="dropdown-item" href="#">Search</a>
</div>
</li>
</ul>
</div>
</nav>
</body>
Basically you need to add css height to navbar class.
<style>
.navbar{ height: 48px;}
.navbar a{font-size:12px;}
</style>
Please check this codepane Demo
I have a simple navbar in which is there are multiple items i just need to center and make the last div to end.
My code
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto mt-2 mt-lg-0 justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">WHO WE ARE</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
WHAT WE DO
</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 dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MEDIA
</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" href="#">CONTACT</a>
</li>
</ul>
<div class="form-inline my-2 my-lg-0">
<div class="dropdown drp-user" ngbDropdown placement='auto'>
<a href="javascript:" ngbDropdownToggle data-toggle="dropdown">
<i class="icon feather icon-settings"></i>
</a>
<div class="dropdown-menu dropdown-menu-right profile-notification" ngbDropdownMenu>
<div class="pro-head">
<img src="assets/images/user/avatar-2.jpg" class="img-radius" alt="User-Profile-Image">
<span>{{userTitle}}</span>
<a href="javascript:" class="dud-logout" title="Logout" (click)="logout()">
<i class="feather icon-log-out"></i>
</a>
</div>
<ul class="pro-body">
<li *ngIf="user?.userTypeId == this.userTypeIdEnum.ADMIN"><a href="javascript:" class="dropdown-item"
routerLink="/manageprofile"><i class="feather icon-user"></i> Manage Profile</a></li>
<li><a href="javascript:" class="dropdown-item" routerLink="/auth/change-password"><i
class="feather icon-lock"></i> Change Password</a></li>
</ul>
</div>
</div>
</div>
</div>
In image i have marked red item which i need to do center if i am wrapping it to div then its not showing in a row.
1) Why I can not change the nav-link color on CSS?
I'm trying to change the color of MENUTEST's (nav-link) to white, but it's not working
and
2) Add a line white above every MENUTEST's texts (just like [u] but above) How to do it?
What do i'm doing wrong?
navbar.php
<header>
<nav class="navbar navbar-expand-sm navbar-light bg-faded fixed-top" style="background-color: #083F2C;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Brand -->
<a class="navbar-brand" href="#"> <img src="img/logo.png" alt="" height="60" width="160"></a>
<!-- Links -->
<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">MENUTEST</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<!-- <a class="dropdown-item" href="#">Ana Tereza fala em São Paulo sobre o Direito de Regresso no Fomento Comercial</a> -->
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MENUTEST</a>
</li>
</ul>
</div>
</nav>
</header>
And navbar.css
/* MENUTEST */
.nav-link a {
font-color: white;
}
/* SUBMENUTEST */
.dropdown-menu {
background: #EDEFF1;
height: auto;
width: auto;
padding-left: 5px;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #DDDDDD;
}
.dropdown-menu a {
color: #78828D;
font-size: 15px;
}
...............................................
font-color is not a css property. You'll want to use color.
.nav-link a {
// font-color: white;
color: white;
}
Try and take a little further than just the class and try -> li, a, .nav-link and then whatever css you want.
I can see you are using Bootstrap so it might be inheriting something. A trick I always use it to go to the Chrome browser and right click on the thing I want to change and click on "inspect" this will make it possible to see what css lies behind the item you want to change and you can then try to edit it in the browser and if it works copy that code and insert into your own css file.
Hope it helps :)
`<div class="menuBar">
<ul>
<li class="selected">HOME</li>
<li>PORTFOLIO</li>
....
</ul>
</div>
// specific CSS for your menu
div.menuBar li.selected a { color: #FF0000; }
// more general CSS
li.selected a { color: #FF0000; }`
How about this, have you tried using li.selcted a{color:#FF0000;}.
I have a Django-powered Bootstrap website. I'm using the theme Modern Business by Start Bootstrap.
This is how it looks on the live sample:
This is how it looks on my website (note the resources text below the logo):
Here's my code for the navbar.
{% load static from staticfiles %}
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarExample" aria-controls="navbarExample" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container" style="height: 48px;">
<a class="navbar-brand" href="index.html">
<img src="{% static 'web/img/header-logo-2.png' %}" height="70px" style="height: 50px;
position: absolute;
top: 0;"></a>
<div class="collapse navbar-collapse" id="navbarExample">
<ul class="navbar-nav ml-auto">
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
<a class="dropdown-item" href="">Board of Directors</a>
<a class="dropdown-item" href="about-staff">Executive Administration</a>
</div>
</li>-->
<!--<li class="nav-item">
<a class="nav-link" href="schools">Schools</a>
</li>-->
<!--<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Resources
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
<a class="dropdown-item"
href="https://www.dropbox.com/s/ngzaxhg4gqlibpx/2016-2017%20OCDL%20Charter.pdf?dl=0"
target="_blank">League Charter</a>
<a class="dropdown-item"
href="https://www.dropbox.com/s/0nh1a93og93vqt0/OCDL%20Affidavit%202015-2016.pdf?dl=0"
target="_blank">Student Agreement</a>
<a class="dropdown-item"
href="https://www.dropbox.com/s/en1t2ek23rxzxlj/OCDL%20Judges%20Affidavit.pdf?dl=0"
target="_blank">Judge Agreement</a>
<a class="dropdown-item"
href="https://www.dropbox.com/s/lwxsnbpmc29vylq/OCDL%20Judge%20Guide-11-4-15.pdf?dl=0"
target="_blank">Judge Guide</a>
<a class="dropdown-item"
href="https://www.dropbox.com/s/tkcvaggipfn91fi/Flow%20Chart%2C%20Orange%20County%20Debate%20League.docx?dl=0"
target="_blank">Blank Flowchart</a>
<a class="dropdown-item"
href="https://www.dropbox.com/s/vphswry1d4rgm0d/Speaker%20Performance%20Rubric%2C%20Orange%20County%20Debate%20League.pdf?dl=0"
target="_blank">OCDL Rubric</a>
</div>
</li>
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Blog
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a>
<a class="dropdown-item" href="blog-home-2.html">Blog Home 2</a>
<a class="dropdown-item" href="blog-post.html">Blog Post</a>
</div>
</li>-->
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Other Pages
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="full-width.html">Full Width Page</a>
<a class="dropdown-item" href="sidebar.html">Sidebar Page</a>
<a class="dropdown-item" href="faq.html">FAQ</a>
<a class="dropdown-item" href="404.html">404</a>
<a class="dropdown-item" href="pricing.html">Pricing Table</a>
</div>
</li>-->
</ul>
</div>
</div>
</nav>
You can simply add media query for particular screen width. In your case bootstrap navbar will change at a screen width of 768px, so just add this to your css file:
#media screen and (max-width: 787px) {
.navbar-inverse {
opacity: 0.9;
}
}
I have a navbar with a split dropdown. The particular portion of the HTML I'm interested in is this:
<li class="nav-item">
<div class="btn-group">
Blog
<a class="nav-link dropdown-toggle dropdown-toggle-split" id="dropdownMenuLink_blog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown for Blog Links</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink_blog">
<div class="dropdown-header">Categories | Blog Main</div>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=20" target="_blank"><small><em>Articles for Everyone</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=8" target="_blank"><small><em>Access to Justice Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=5" target="_blank"><small><em>Law Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=6" target="_blank"><small><em>Legal Futurism</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=4" target="_blank"><small><em>Resources for Lawyers</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=36" target="_blank"><small><em>Technology</em></small></a>
</div>
</div>
</li>
And the entire navbar looks like this:
<nav class="navbar navbar-toggleable-sm fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars fa-lg" aria-hidden="true"></i>
</button>
<a class="navbar-brand" href="#home">Brandon D. Hastings<small class="hidden-md-down"> BBA(Dist.), JD</small></a>
<div class="navbar-collapse collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#law">Law</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#technology">Technology</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#media">Media</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink_more" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">More</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink_more">
<a class="dropdown-item" href="#miscinfo">More About Me</a>
<div class="dropdown-divider"></div>
<div class="dropdown-header"><em>New Tab / Window</em></div>
<a class="dropdown-item" href="http://(bitly not allowed)/BHastings_CV" target="_blank">Curriculum Vitae</a>
<a class="dropdown-item" href="http://bhastings.com/blog/category/resources-for-lawyers/" target="_blank">Resources for Lawyers</a>
</div>
</li>
<li class="nav-item">
<div class="btn-group">
Blog
<a class="nav-link dropdown-toggle dropdown-toggle-split" id="dropdownMenuLink_blog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown for Blog Links</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink_blog">
<div class="dropdown-header">Categories | Blog Main</div>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=20" target="_blank"><small><em>Articles for Everyone</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=8" target="_blank"><small><em>Access to Justice Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=5" target="_blank"><small><em>Law Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=6" target="_blank"><small><em>Legal Futurism</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=4" target="_blank"><small><em>Resources for Lawyers</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=36" target="_blank"><small><em>Technology</em></small></a>
</div>
</div>
</li>
<li class="nav-item btn btn-danger btn-sm">
<a class="nav-link text-white url-firm" href="http://www.quaylawcentre.com/Lawyer-Profiles/Brandon-Hastings-B-b-a-dist-j-d.shtml" target="_blank">Get in Touch<span class="sr-only"></span></a>
</li>
</ul>
</div>
</nav>
The result is something like this in small screens:
Having a split link in a navbar is a bit hacky to begin with, but notwithstanding that, I'm wondering if anyone knows a way to get the dropdown to pop back "in line" so that it looks more like the "More" dropdown:
?
Thanks in advance! :)
Just add container class in the btn-group div.
The misalignment is because of the btn-group class is defined as flex item. Try adding container class, it may solve the issue.
<div class="container p-0 btn-group">
Blog
<a class="nav-link dropdown-toggle dropdown-toggle-split" id="dropdownMenuLink_blog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown for Blog Links</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink_blog">
<div class="dropdown-header">Categories | Blog Main</div>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=20" target="_blank"><small><em>Articles for Everyone</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=8" target="_blank"><small><em>Access to Justice Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=5" target="_blank"><small><em>Law Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=6" target="_blank"><small><em>Legal Futurism</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=4" target="_blank"><small><em>Resources for Lawyers</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=36" target="_blank"><small><em>Technology</em></small></a>
</div>
</div>
The HTML below works when you expand a collapsed navbar!
Bootstrap: 5.0.0-beta2
<li class="nav-item col-6 col-md-auto">
<!-- NOTE: d-table on the group and nav-link d-inline for the inner <a> tags is a must for split button to work properly when collapsed/expanded -->
<div class="btn-group d-table nav-link p-2">
<a class="nav-link d-inline">Dropdown link</a>
<a class="nav-link d-inline" role="button" data-bs-toggle="dropdown">
<i class="far fa-caret-square-down"></i>
</a>
<ul class="dropdown-menu ">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</li>
I guess this isn't a very clean answer but I added some margin and it does the job. But can't wait to see a better solution.
#media (max-width: 992px) {
.dropdown-menu {
margin:35px 0 0 -150px;
}
}