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
Related
This is the code to my nav bar. The list items all click through fine to their respective pages, but actually clicking on the nav bar titles for each page doesn't allow for clicking through to the entire page (I created a work around when testing by adding the homepages for each section in the list, but obviously don't want that).
<container-fluid>
<!-- Navigation add new page links to the href and replace #-->
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbar-corrie">
<a class="navbar-brand" href="./main.html">
<!--connect to landing page-->
<img src="./images/Logo.png" width="100" height="100" class="d-inline-block align-top" alt="" />
</a>
<button class="navbar-toggler" type="button" href="#" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0 ">
<li class="nav-item dropdown">
<a class="nav-link active dropdown-toggle" href="./main.html" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Home
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./main.html">Home</a>
<a class="dropdown-item" href="#introduction">Introduction</a>
<a class="dropdown-item" href="#introduction">Mission</a>
<a class="dropdown-item" href="#audience">Audience</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link active dropdown-toggle" href="./resources.html" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resources
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./resources.html">Resources</a>
<a class="dropdown-item" href="#needhelp">Need Help Now?</a>
<a class="dropdown-item" href="#mrusupports">MRU Supports & Services</a>
<a class="dropdown-item" href="#accessibility">Accessibility</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link active dropdown-toggle" href="./campusstructure.html" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Campus Structure
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./campusstructure.html">Campus Structure</a>
<!--This is page location ex: ./pagename.html-->
<a class="dropdown-item" href="#supportchannels">Systematic Support Channels</a>
<!-- This is section location call id name ex: #sectionIDName-->
<a class="dropdown-item" href="#healthpolicies">Health Policies</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link active dropdown-toggle" href="./studentsupport.html" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Student Support
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./studentsupport.html">Student Support</a>
<a class="dropdown-item" href="#earlyindicators">Early Indicators</a>
<a class="dropdown-item" href="#crisismanagement">Crisis Management</a>
<a class="dropdown-item" href="#selfhelp">Self-Help</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link active dropdown-toggle" href="./research.html" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Research
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./research.html">Research</a>
<a class="dropdown-item" href="#">Students & Mental Health</a>
</div>
</li>
</ul>
</div>
</nav>
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;
}
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;
}
}
<ul class="nav navbar-nav">
<li class="nav-item-dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
SLIDES
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">Événements Importants</a>
<a class="dropdown-item" href="#">Rappels des bonnes pratiques</a>
<a class="dropdown-item" href="#">Ecran Sonar</a>
</div>
</li>
<li class="nav-item-dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
BANDEAU
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">Rappel CRA</a>
<a class="dropdown-item" href="#">Visite Client</a>
<a class="dropdown-item" href="#">Nouvelle version</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">POP-UP</a>
</li>
</ul>
Here's my code
The problem is that there's no padding, is it normal ? Here's a picture of what it renders :
http://img4.hostingpics.net/pics/248061Screenshotfrom20160804155752.png
Other problem is that it can display you 2 links on the same line :/
I fail to make your dropdown work, but you can add some padding to your a elements like this:
In HTML:
...
<a class="dropdown-item pad15" href="#">Événements Importants</a>
...
In CSS:
.pad15 {
padding: 15px;
}
It is very simple, but I guess it is what you are looking for.
UPDATE: Without CSS file
...
<a class="dropdown-item" style="padding:15px;" href="#">Événements Importants</a>
...