I'm trying to replicate this dropdown list that is on this website (1st image). I've tried using a regular dropdown menu but it comes out very small and it is not centered on the page. How can I create multiple dropdowns in the center of the right side of my split screen? Any help will be greatly appreciated!
body {
margin:0;
padding: 0;
font-family: "Open+Sans", sans-serif;
}
.navbar {
border-bottom: 2px solid #0C133C;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav > li {
display:Inline-block;
padding: 20px 50px 10px 9px;
}
.nav > li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
border-bottom: 3px solid transparent;
}
.clearer {
clear:both;
}
}
.subnav class{
margin: 0;
position:relative;
}
.subnav > div a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
padding: 20px 30px 10px 9px;
}
.logo {
margin-top: 1rem;
}
.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem;
}
.split {
height: 70%;
width: 50%;
position: fixed;
z-index: 1;
top: -50;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #282C41;
color: white;
margin-top: .5rem;
font-size: 15px;
}
.right {
right: 0;
background-color: #CDCDCD;
margin-top: .5rem;
font-size: 18px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css"
</head>
<body>
<div class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Sign In</a>
</li>
</ul>
<div class="clearer"></div>
</div>
<subnav class="subnav subnav-light bg-light">
<img src="universallogo.jpg" class="logo"/>
<div class="container-fluid">
<a class="subnav=brand" href="#">
<a class="nav-link active" aria-current="page" href="#">Bonds</a>
</a>
<a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
<a class="nav-link active" aria-current="page" href="#">About Us</a>
<a class="nav-link active" aria-current="page" href="#">Search</a>
</div>
</subnav>
</ul>
<div class="split left">
<div class="centered">
<h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
<p>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes.
</p>
</div>
</div>
<div class="split right">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Select Your State
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">California</a></li>
<li><a class="dropdown-item" href="#">Illinois</a></li>
<li><a class="dropdown-item" href="#">Michigan</a></li>
<li><a class="dropdown-item" href="#">Ohio</a></li>
</ul>
</ul>
</div>
</div>
</body>
HTML has an <option> tag that is standardized selection inputs.
body {
margin:0;
padding: 0;
font-family: "Open+Sans", sans-serif;
}
.navbar {
border-bottom: 2px solid #0C133C;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav > li {
display:Inline-block;
padding: 20px 50px 10px 9px;
}
.nav > li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
border-bottom: 3px solid transparent;
}
.clearer {
clear:both;
}
}
.subnav class{
margin: 0;
position:relative;
}
.subnav > div a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
padding: 20px 30px 10px 9px;
}
.logo {
margin-top: 1rem;
}
.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem;
}
.split {
height: 70%;
width: 50%;
position: fixed;
z-index: 1;
top: -50;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #282C41;
color: white;
margin-top: .5rem;
font-size: 15px;
}
.right {
right: 0;
background-color: #CDCDCD;
margin-top: .5rem;
font-size: 18px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
select {
width: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Sign In</a>
</li>
</ul>
<div class="clearer"></div>
</div>
<subnav class="subnav subnav-light bg-light">
<img src="universallogo.jpg" class="logo"/>
<div class="container-fluid">
<a class="subnav=brand" href="#">
<a class="nav-link active" aria-current="page" href="#">Bonds</a>
</a>
<a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
<a class="nav-link active" aria-current="page" href="#">About Us</a>
<a class="nav-link active" aria-current="page" href="#">Search</a>
</div>
</subnav>
<div class="split left">
<div class="centered">
<h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
<p>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes.
</p>
</div>
</div>
<div class="split right">
<select id="state">
<option disabled selected>Select Your State</option>
<option value="california">California</option>
<option value="illinois">Illinois</option>
<option value="michigan">Michigan</option>
<option value="ohio">Ohio</option>
</select>
</div>
</body>
And to get the selected value, check the value property of the <select> element, e.g.: document.getElementById("state").value;
Stylize your <select> element to specify width, margin, padding, etc, e.g.: select { width: 100%; }
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
Related
I'm looking to make a subnav under my navbar. I'm trying to get my text in my subnav to the right and my logo to the left of it. I can't seem to get my text to move to the right, however. I was also wondering how I get my logo to move down a little so I can get some space between the line and the logo; so it's not directly under the line. Thank you!
body {
margin:0;
padding: 0;
font-family: "Open+Sans", sans-serif;
}
.navbar {
border-bottom: 2px solid #0C133C;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav > li {
display:Inline-block;
padding: 20px 50px 10px 9px;
}
.nav > li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
border-bottom: 3px solid transparent;
}
.clearer {
clear:both;
}
}
.subnav class{
margin: 0;
position:relative;
}
.subnav > div a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
padding: 20px 30px 10px 9px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css"
</head>
<body>
<div class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Get a Quote</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Sign In</a>
</li>
</ul>
<div class="clearer"></div>
</div>
<subnav class="subnav subnav-light bg-light">
<div class="container-fluid">
<a class="subnav=brand" href="#">
<img src="universallogo.jpg"
<a class="nav-link active" aria-current="page" href="#">Bonds</a>
</a>
<a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
<a class="nav-link active" aria-current="page" href="#">About Us</a>
</div>
</subnav>
</ul>
</body>
</html>
You can give these styles a try. Essentially just flex the parent and use justify-content: space-between; to get elements to be on right and left sides. For your logo, you can just give it a class and add some margin to separate it from the bottom border on nav. I replaced your logo with a dummy image to demonstrate.
body {
margin:0;
padding: 0;
font-family: "Open+Sans", sans-serif;
}
.navbar {
border-bottom: 2px solid #0C133C;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav > li {
display:Inline-block;
padding: 20px 50px 10px 9px;
}
.nav > li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
border-bottom: 3px solid transparent;
}
.clearer {
clear:both;
}
}
.subnav class{
margin: 0;
position:relative;
}
.subnav > div a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
padding: 20px 30px 10px 9px;
}
.logo {
margin-top: .5rem;
}
.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css"
</head>
<body>
<div class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Get a Quote</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Sign In</a>
</li>
</ul>
<div class="clearer"></div>
</div>
<subnav class="subnav subnav-light bg-light">
<img src="https://dummyimage.com/200x100/000/fff" class="logo"/>
<div class="container-fluid">
<a class="subnav=brand" href="#"></a>
<a class="nav-link active" aria-current="page" href="#">Bonds</a>
<a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
<a class="nav-link active" aria-current="page" href="#">About Us</a>
</div>
</subnav>
</body>
</html>
I have a HTML and CSS menu and I wanna show the special icon for each item when users hover on each item. I will show you my menu and codes...
.nav{
background-color: #4f9b30;
}
.nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
.nav a:hover {
background-color: #ff5c00;
color: black;
}
.home:hover{
background-image: url(https://ittest.ir/wp-content/uploads/2021/09/home-1.png);
background-repeat: no-repeat;
}
<body>
<div class="nav">
<a class="home" href="#">Home</a>
<a class="ran" href="#">why iran</a>
<a class="blog" href="#">blog</a>
<a class="services" href="#">About</a>
<a class="news"href="#">News</a>
<a class="event" href="#">event</a>
<a class="invest" href="#">invest</a>
<a class="contact" href="#">Contact</a>
</div>
</body>
this is my html and css codes
Because you are using a background image, you can adjust it's position using background-position. https://developer.mozilla.org/en-US/docs/Web/CSS/background-position.
You can adjust padding-left on .nav a to add space from the left edge and the nav text.
.nav{
background-color: #4f9b30;
}
.nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 25px 14px 30px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
.nav a:hover {
background-color: #ff5c00;
color: black;
}
.home:hover{
background-image: url(https://ittest.ir/wp-content/uploads/2021/09/home-1.png);
background-repeat: no-repeat;
background-position: 4% 44%;
}
<div class="nav">
<a class="home" href="#">Home</a>
<a class="ran" href="#">why iran</a>
<a class="blog" href="#">blog</a>
<a class="services" href="#">About</a>
<a class="news"href="#">News</a>
<a class="event" href="#">event</a>
<a class="invest" href="#">invest</a>
<a class="contact" href="#">Contact</a>
</div>
I'm trying to make my menu look like the one on this page.
But somehow it's not working. This is my website so far. My main pet peeves with this is the menu items are not centered and the social media icons are nowhere to be seen.
Not only that, but even though I have the same thing written in every page (I copy-pasted everything), the home page is the only one that's listening to the CSS.
This is my code so far:
body {
background-color: #202020 !important;
font-family: "Open Sans", sans-serif;
}
#header {
background-color: #202020;
text-align: center;
margin: 5px auto;
padding: 2px 0px;
}
.navbar {
display: flex;
justify-content: flex-end;
color: #f8f8f8;
background-color: #202020;
height: fit-content;
}
.nav-link {
flex: 1 1 auto;
padding: 5px 0;
color: #f8f8f8;
background-color: #202020;
text-align: center;
display: inline-block;
text-decoration: none;
width: -moz-fit-content;
transition: 0.2s;
}
.nav-link:hover {
background-color: #f8f8f8;
color: #202020;
}
.navbar {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.navbar li {
position: relative;
padding: 10px 0 10px 28px;
text-decoration: none;
list-style-type: none;
display: flex;
justify-content: end;
}
.navbar a {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 15px;
white-space: nowrap;
transition: 0.3s;
position: relative;
text-align: center;
flex-wrap: wrap;
align-items: center;
}
a {
text-decoration: none;
color: #f8f8f8;
}
.navbar-brand {
text-decoration: none;
color: #f8f8f8;
font-size: 20px;
padding: 5px;
}
.navbar-brand:hover {
text-decoration: none;
color: #202020;
background-color: #f8f8f8;
padding: 5px;
}
.header-social-links a {
line-height: 0px;
font-size: 16px;
}
.navbar-dark .navbar-toggler {
color: #f8f8f8;
border-color: #f8f8f8;
background-color: #202020;
}
#name {
font-size: 20px;
}
<body cz-shortcut-listen="true">
<header id="header" class="fixed-top">
<nav class="navbar navbar-expand-lg fixed-top navbar order-last order-lg-0">
<div class="container-fluid d-flex justify-content-between align-items-center">
<a class="navbar-brand" href="index.html" id="name">Maria F. Loscher</a>
<button class="navbar-dark navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/about.html">about me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/portfolio.html">portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/cv.html">curriculum vitae</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/commissions-hiring.html">commissions' pricing and hiring info</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/about.html#contact">contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="header-social-links">
<i class="bi bi-twitter"></i>
<i class="bi bi-facebook"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-linkedin"></i>
</div>
</header>
</body>
This worked for me:
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Maria F. Loscher</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<style>
.body {
background-color: #202020 !important;
font-family: "Open Sans", sans-serif;
}
#header {
background-color: #202020;
text-align: center;
margin: 5px auto;
}
.navbar {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.nav-link {
flex: 1 1 auto;
padding: 5px 0;
color: #f8f8f8;
background-color: #202020;
text-align: center;
display: inline-block;
text-decoration: none;
width: -moz-fit-content;
transition: 0.2s;
}
.nav-link:hover {
background-color: #f8f8f8;
color: #202020;
}
.navbar li {
position: relative;
padding: 10px 0 10px 28px;
text-decoration: none;
list-style-type: none;
display: flex;
justify-content: end;
}
.navbar a {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 15px;
white-space: nowrap;
transition: 0.3s;
position: relative;
text-align: center;
flex-wrap: wrap;
align-items: center;
}
a {
text-decoration: none;
color: #f8f8f8;
}
.navbar-brand {
text-decoration: none;
color: #f8f8f8;
font-size: 20px;
}
.navbar-brand:hover {
text-decoration: none;
color: #202020;
background-color: #f8f8f8;
}
.header-social-links a {
line-height: 0px;
font-size: 16px;
}
.navbar-dark .navbar-toggler {
color: #f8f8f8;
border-color:#f8f8f8;
background-color: #202020;
}
#name {
font-size: 20px;
}
</style>
<body cz-shortcut-listen="true">
<header id="header" class="fixed-top">
<nav class="navbar navbar-expand-lg fixed-top navbar order-last order-lg-0">
<div class="container-fluid d-flex justify-content-between align-items-center">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<a class="navbar-brand" href="index.html" id="name">Maria F. Loscher</a>
<button class="navbar-dark navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/about.html">about me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/portfolio.html">portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/cv.html">curriculum vitae</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/commissions-hiring.html">commissions' pricing and hiring info</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/about.html#contact">contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="header-social-links">
<i class="bi bi-twitter"></i>
<i class="bi bi-facebook"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-linkedin"></i>
</div>
</header>
</body>
I throw your navbar in the same div as the navitems
I added some css code for the navbar from here:https://www.w3schools.com/howto/howto_js_topnav.asp
I have a header composed of navigation links to other websites, some of these links are shown through drop-down menus. With the event hover I have added an animation and style to see what you are on at every moment and that, in case of a drop-down, shows you all the options. The thing is that once the dropdown has been shown I have added the same style and animation to the internal links as to the main ones, but in the case of the animation I always have the underline in the same place instead of just below each link. Thanks in advance for your time and help. I leave you a link with an example as I have it now working with the described behavior
https://codepen.io/carlosurra/pen/YzqXjdP
my template
<div id="row">
<div class="col-xs-12">
<header>
<nav class="navbar navbar-expand-lg navbar-light header">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav menu">
<li class="nav-item">
<a class="nav-link">PERSONAL INFO</a>
</li>
<li class="nav-item" #mouseover="animalList = true" #mouseleave="animalList = false" >
<a class="nav-link menu-link-toggle" >PERSONAL FORM</a>
<ul class='dropdown-menu' v-if="animalList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>DATA</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>FORM DATA</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >AUTOCOMPLETE</a>
</li>
</ul>
</li>
<li class="nav-item" #mouseover="serviceList = true" #mouseleave="serviceList = false">
<a class='nav-link menu-link menu-link-toggle' >SERVICES</a>
<ul class='dropdown-menu' v-if="serviceList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >LA CRÉMATION PRIVÉE</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >PERSONAL S</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>COMPANY S</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >FULL S INFO</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link ">SHOP</a>
</li>
<li class="nav-item active">
<router-link class="nav-link" to="/devis">PRICES</router-link>
</li>
<li class="nav-item" #mouseover="contactList = true" #mouseleave="contactList = false">
<a class='menu-link nav-link menu-link-toggle' >CONTACT</a>
<ul class='dropdown-menu' v-if="contactList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>MAIL</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >PHONE</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
</div>
</div>
my css
html, body {
background: #009050;
}
.header {
display: flex;
justify-content: center;
align-items: baseline;
}
.menu {
list-style: none;
display: flex;
align-items: center;
}
.nav-item {
padding: 25px;
position: relative;
}
.nav-link:hover {
color: white;
}
.menu-link-toggle {
cursor: pointer;
}
.dropdown-menu {
margin-top: 10px;
list-style: none;
position: absolute;
padding: 1em 1.25em 0.5em 0.75em;
background-color: white;
width: max-content;
box-shadow: 0px 14px 24px 0px rgba(0,0,0,0.21);
}
.dropdown-menu-item {
margin: 20px 0 20px 0;
}
.dropdown-menu-link {
font-size: 14px;
font-weight: bold;
color: red;
text-decoration: none;
}
.head {
font-size: 14px;
color: red;
font-weight: bold;
text-decoration: none;
}
.nav-item:before {
content: '';
position: absolute;
width: 30%;
height: 3px;
bottom: 30%;
left: 35%;
background: white;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: .25s linear;
}
.nav-item:hover:before,
.nav-item:focus:before {
visibility: visible;
transform: scaleX(1);
}
.dropdown-menu-link:before {
content: '';
position: absolute;
width: 30%;
height: 3px;
bottom: 30%;
left: 0%;
background: #D53865;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: .25s linear;
}
.dropdown-menu-link:hover:before,
.dropdown-menu-link:focus:before {
visibility: visible;
transform: scaleX(1);
}
.added {
display: none;
}
Please add this to your code
.dropdown-menu-link {
padding-bottom:3px;
position:relative;
}
.dropdown-menu-item {
position:relative;
}
Change the code bottom:30%; to bottom: 0px;
.dropdown-menu-link:before {
bottom: 0px;
}
Please check this codepen :
https://codepen.io/Rayeesac/pen/LYNpyEx
Add position: relative to .dropdown-menu-item and set a correct position to bottom of .dropdown-menu-item:before, let's say to 0px;
Or if you want to be relative to the link set position: relative to .dropdown-menu-link.
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?
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>
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%);
}
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%);
}