Dropwdown arrow over text in navbar - html

Question

I'm trying to have a dropdown on a navbar item. It works, but the arrow is over the text of the menu item.
Codepen:
https://codepen.io/ogonzales/pen/QWjmorP
Code
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark" style="height: 70px;">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<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">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</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">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/support/">Support and Consulting</a>
<a class="dropdown-item" href="/test-driven-development/">What is Test-Driven Development?</a>
<a class="dropdown-item" href="/testimonials/">Testimonials</a>
</div>
</li>
</ul>
<form class="form-inline ml-auto">
Log in
Sign up
</form>
</div>
</nav>
Bonus
I'd like also to put every navbar item more to the right. I know I can do this with CSS, but is there a Boostrap class am I missing?

Answer 1

You ul tag was not closed, I fixed that and answered your bonus question as well.
The reason it was on the over the text because, both the dropdown and the link were within same block, so you have to specify the width for those to fit-in inline, I have just provided 100px under .nav-link{...} and you are free to change that as per you requirement.
To move contents towards right you can have width property for the yellow block(check in my snipppet/fiddle) OR you can provide flex option for the block and use 'justify-content:space-between;`.
View in full screen due to media-query you have used.
.nav-link{
border:1px solid yellow;
margin:5px;
width:100px;
}
fiddle to playground.
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar').toggleClass('active');
});
});
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
body {
margin-bottom: 60px;
/* Margin bottom by footer height */
font-family: 'Poppins', sans-serif;
background: #fafafa;
padding-top: 70px;
}
.container {
max-width: 960px;
}
.pricing-header {
max-width: 700px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
/* Set the fixed height of the footer here */
line-height: 60px;
/* Vertically center the text there */
background-color: #f5f5f5;
}
/* NAVBAR TOP */
#top-navbar ul li.active>a a[aria-expanded="true"] {
color: #1f1f1f;
background: #12b556;
}
#top-navbar a:visited {
color: #fff;
}
#top-navbar a:link {
color: #fff;
}
#top-navbar a.subitem:link {
color: #1f1f1f;
}
/* ==== */
/* SIDEBAR */
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #1f1f1f;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active .dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 20px;
background: #1f1f1f;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #12b556;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active>a.sidebar-link a[aria-expanded="true"] {
color: #fff;
background: #12b556;
}
a[data-toggle="collapse"] {
position: relative;
}
#navbarCollapse {
border: 1px solid red;
}
.nav-link {
border: 1px solid yellow;
margin: 5px;
width: 100px;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #12b556;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #12b556;
}
a.article,
a.article:hover {
background: #12b556 !important;
color: #fff !important;
}
a.sidebar-link:visited {
color: #fff;
}
a.sidebar-link:link {
color: #fff;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important;
}
.dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3,
#sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar ul li a {
padding: 20px 10px;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul ul a {
padding: 10px !important;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>{% block title %}DjangoX{% endblock title %}</title>
<meta name="description" content="A framework for launching new Django projects quickly.">
<meta name="author" content="">
<link rel="shortcut icon" type="image/x-icon" href="{% static 'images/favicon.ico' %}">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/base.css' %}">
<link rel="stylesheet" href="{% static 'css/price.css' %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar').toggleClass('active');
});
});
</script>
</head>
<body>
<!--MENU SUPERIOR-->
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark" style="height: 70px;">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<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">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</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">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/support/">Support and Consulting</a>
<a class="dropdown-item" href="/test-driven-development/">What is Test-Driven Development?</a>
<a class="dropdown-item" href="/testimonials/">Testimonials</a>
</div>
</li>
</ul>
<form class="form-inline ml-auto">
Log in
Sign up
</form>
</div>
</nav>
<!-- FIN MENU SUPERIOR-->
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<img src="static\images\elim-logo.png" alt="Ministerios Elim" width="50%" height="50%">
<strong>ELIM</strong>
</div>
<ul class="list-unstyled components">
<li class="">
<a class="sidebar-link" href="#capitulo1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-home"></i> Capítulo 1
</a>
<ul class="collapse list-unstyled" id="capitulo1">
<li>
<a class="sidebar-link" href="#">Introducción</a>
</li>
<li>
<a class="sidebar-link" href="#">¿Qué es la salvación?</a>
</li>
<li>
<a class="sidebar-link" href="#">¿Se pierde la salvación?</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
</nav>
<hr><br>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% block content %} {% endblock content %}
</div>
<div class="col-md-4 float-right" id="LocalSide">
<form class="search-form" action="/search/" method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="KTlYgVaxnAYKzLle9WWDNIoE0MDSvAVldfbsnKbfpAStWafCb1MVMgwLdArZUEiP">
<div class="form-group">
<input type="search" class="form-control search-course" placeholder="Buscar curso" name="search_term" required="">
<input type="hidden" value="3" name="course_id">
</div>
</form>
<h2 class="local-side-heading">In this Section:</h2>
<nav class="local-nav">
<ol data-local-nav-list=""></ol>
</nav>
<a class="pcta" href="/payments/tdd-flask/" data-a-buy-course-cta="tdd-flask">
<span class="label label-success">
<span class="pcta-label">Get the</span>
<span class="pcta-hook">full course</span>
<span class="sr-only">for</span>
<span class="pcta-badge" aria-hidden="true">Now Only</span>
</span>
<span class="pcta-price">$30</span>
</a>
↑ Back to top
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<span class="text-muted">Footer...</span>
</div>
</footer>
</div>
</div>

Answer 2

In your code ".dropdown-toggle::after" right value is the problem, change into this code it will work.
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: -7px;
transform: translateY(-50%);
}

Answer 3

Just remove the below manual css u have designed. bcz it is overriding bootstrap's default css which is not appropiate
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}