I have the following Nav bar. I want to shift the Login/Register Component of it on the very left most of the nav bar but can't find a way to do it. What might be the possible solution, I have tried the padding-left:0 thing on the login li element but this does not seem to work. Any help in this would be appreciated
HTML:
body {
margin: 0;
background: #222;
font-weight: 300;
background-image: url('bg.jpeg');
}
header {
background: #d9c2ac;
position: relative;
}
header::after {
content: '';
display: table;
clear: both;
}
nav {
float: left;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 30px;
position: relative;
}
nav ul li a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
}
nav a:hover {}
nav a::before {
content: '';
display: block;
height: 5px;
width: 0%;
background-color: #444;
transition: all ease-in-out 500ms;
}
nav a:hover::before {
width: 100%;
}
form .form {
float: right;
}
.search-bar {
float: right;
}
ul li:last-child {
position: absolute;
right: 0;
bottom: 0;
margin: 15px;
margin-bottom: 0px;
padding: 0;
}
<body>
<header>
<div class="container" id="#home">
<nav>
<ul>
<li id="login"> Login/Register </li>
<li> Home </li>
<li> About </li>
<li> Services </li>
<li> Products </li>
<li> Contact Us </li>
<li>
<form class="form"> <input type="text" name="Search" placeholder="Search"> </form>
</li>
</ul>
</nav>
</div>
</header>
You can use pseudo css to align item.
nav li:first-child {
margin-left: 0;
}
you can check here
Use rm-auto to set the margin right to 0
.navbar-tan
{
background-color:tan;
}
<html>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-sm navbar-tan" >
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Login/Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contact Us</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<input type="text" name="" placeholder="Search" class="form-control">
</li>
</ul>
</nav>
Try to make use of Flexbox here...and use margin utilities to align the first and last item...
...apply margin-right:auto to the first element to align it left most corner
...and apply margin-left:auto to the last element to align it right most corner..
I have also changed your some css and also removed all the float values. Also no need to use position:absolute here for the search-box.
Stack Snippet
body {
margin: 0;
background: #222;
font-weight: 300;
background-image: url('bg.jpeg');
}
header {
background: #d9c2ac;
position: relative;
}
nav ul {
margin: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 20px 0;
}
nav li {
position: relative;
margin: 0 10px;
}
nav ul li a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
font-family: verdana;
}
nav a:hover {}
nav a::before {
content: '';
display: block;
height: 5px;
width: 0%;
background-color: #444;
transition: all ease-in-out 500ms;
}
nav a:hover::before {
width: 100%;
}
nav ul li:first-child {
margin-right: auto;
}
nav ul li:last-child {
margin-left: auto;
}
<header>
<div class="container" id="#home">
<nav>
<ul>
<li id="login"> Login/Register </li>
<li> Home </li>
<li> About </li>
<li>
<form class="form"> <input type="text" name="Search" placeholder="Search"> </form>
</li>
</ul>
</nav>
</div>
</header>
Related
'data2' should be shown only on hover of SubSubmenu1, But it opens while hovering on SubMenu1 itself (along with data1 and subsubmenu1 dropdown). Can anyone guide me how to make it(data2) open only when hovered on SubSubmenu1. Thank you.
<div class="collapse navbar-collapse" id="myNavbarToggler4">
<ul class="navbar-nav">
<!-- menu item-->
<li class="nav-item"><a class="nav-link" href="indexpage">Mainmenuitem1</a></li>
<!-- menu item-->
<li class="has-dropdown">
Mainmenuitem2
<ul>
<li class="dropdown-submenu">
<!-- submenus -->
<a style="background-color: grey; margin-right: 100px" href="#" class="dropdown-toggle"
data-toggle="dropdown">SubMenu1</a>
<div id="SM1" style="margin-right:100px;" aria-labelledby="navbarDropdown">
<ul class="dropdown">
<li class="dropdown-item">
<input type="checkbox" id="data1" data-id=0 checked>
<label for="data1">data1</label>
</li>
<li class="dropdown-subsubmenu">
<!-- with submenu -->
<a style="background-color: grey; margin-right: 100px" href="#" class="dropdown-toggle"
data-toggle="dropdown">SubSubMenu1</a>
<div id="SubSubMenudata" style="margin-right:100px;" aria-labelledby="navbarDropdown">
// this dropdown opens when I hover on SubMenu1.
// Should open only when I hover on SubSubMENU1
<ul style="background-color: grey;" class="dropdown">
<li class="dropdown-item">
<input type="checkbox" id="d2" data-id=0 checked>
<label for="d2">data2</label>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div>
Below is the CSS.
ul ul li:hover ul,
ul li:hover > ul {
opacity: 1;
visibility: visible;
}
.dropdown {
z-index: 1002;
visibility: hidden;
opacity: 0;
position: absolute;
top: 14px;
}
Your code needs some improvement - I've chopped out some lines to make clear which needs you to reorganize it again. The functionally should be working now. Hope that's work!
ul ul li:hover ul,
ul li:hover > ul {
opacity: 1;
visibility: visible;
}
.dropdown {
z-index: 1002;
visibility: hidden;
opacity: 0;
position: absolute;
top: 14px;
}
ul.left_menu{
width:180px;
padding:0px;
margin:0px;
list-style:none;
}
ul.left_menu li{
margin:0px;
list-style:none;
}
ul.left_menu li.odd a{
width:166px;height:25px;display:block; border-bottom:1px #e4e4e4 dashed;
text-decoration:none;color:#504b4b;padding:0;
line-height:25px;
}
.smenu{
display:none
}
ul.left_menu li.odd:hover .smenu
{
display:block;
color: #FFB03B;
}
ul.left_menu li.even:hover .smenu
{
display:block;
color: #FFB03B;
}
<ul class="left_menu">
<div class="collapse navbar-collapse" id="myNavbarToggler4">
<ul class="navbar-nav">
<!-- menu item-->
<li class="nav-item"><a class="nav-link" href="indexpage">Mainmenuitem1</a></li>
<!-- menu item-->
<li class="has-dropdown">
Mainmenuitem2
<ul>
<li >
<!-- submenus -->
<a style="background-color: grey; margin-right: 100px" href="#" class="dropdown-toggle"
>SubMenu1</a>
<ul >
<li class="even">SubSubMenu1
<!-- with submenu -->
<ul class="smenu">
<li >
<a>data2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</ul>
I havent tested this with your code. so it might not work perectly for you.
but below is a link to a thing called "onmouseover Events".
this is using javascript to apply the css on whats called "mouseover".
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover
Documentation: https://www.w3schools.com/jsref/event_onmouseover.asp
see if maybe you can use this :)
Below is an CSS only example aswell if you dont want to use the java script example i posted.
Just click the "Run Snippet" button to test it.
* {
font-family: sans-serif;
}
#horizontalmenu ul {
list-style: none;
padding: 0;
}
#horizontalmenu>ul>li {
float: left;
position: relative;
border: 1px solid #555555;
border-radius: 3px;
background-color: #383838;
}
#horizontalmenu>ul>li>a {
text-decoration: none;
padding: 5px 10px;
display: block;
color: white;
}
#horizontalmenu>ul>li>a:hover {
background-color: rgb(104, 104, 104);
}
#horizontalmenu>ul>li>ul {
background-color: rgb(148, 148, 148);
display: none;
width: 150px;
top: 100%;
left: 0;
position: absolute;
}
#horizontalmenu>ul>li>ul>li {
position: relative;
width: 100%;
display: block;
}
#horizontalmenu>ul>li>ul>li>a {
text-decoration: none;
padding: 5px 10px;
display: block;
color: black;
}
#horizontalmenu>ul>li>ul>li>a:hover {
background-color: rgb(73, 73, 73);
}
#horizontalmenu>ul>li:hover>ul {
display: block;
}
#horizontalmenu>ul>li>ul>li>ul {
display: none;
position: absolute;
left: 100%;
top: 0;
width: 150px;
}
#horizontalmenu>ul>li>ul>li>ul>li>a {
text-decoration: none;
padding: 5px 10px;
display: block;
color: black;
background-color: #797979;
}
#horizontalmenu>ul>li>ul>li:hover ul {
display: block;
}
<div id="horizontalmenu">
<ul>
<!-- list start -->
<li>
Menu 1
<ul>
<li>
text
</li>
<li>
text
</li>
<li>
text >
<ul class="horizontal">
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</li>
<li>
text
</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li> text</li>
<li> text</li>
<li> text</li>
</ul>
</li>
</ul>
</div>
I want my active element to have a vertical line on top of it and I was given a hint to use either :before or :after in CSS to make this line. However, I'm not really familiar with those two tags and I have tried a bit using :after but it doesn't seem to work. Can you give me some advice/suggestions for this? Below is the design example of what it should look like.
.nav-menu{
background: var(--unnamed-color-ffffff);
flex: 1;
justify-content: space-between;
padding-top: 2.3rem;
width: 91.5rem;
}
.nav-menu .icon{
width: 2.0rem;
height: 2.0rem;
margin-right: 1.5rem;
}
.nav-menu .nav-list {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu .nav-list .nav-item{
display: inline-block;
}
.nav-menu .nav-list .nav-item .nav-link {
display: inline-block;
text-decoration: none;
color: black;
}
.nav-menu .nav-list .nav-item .active {
color: red;
}
.nav-menu .nav-list .nav-item .active ::after {
content: '';
border-left: 0.1rem solid red;
height: 1.5rem;
position: absolute;
left: 50%;
top: 0;
}
<nav class="nav-menu d-flex" id="nav-menu">
<ul class="nav-list">
<li class="nav-item">
one
</li>
<li class="nav-item">
two
</li>
<li class="nav-item">
three
</li>
<li class="nav-item">
four
</li>
<li class="nav-item">
five
</li>
<li class="nav-item">
six
</li>
</ul>
</nav>
It looks like you're using Bootstrap? If so, the majority of the CSS may not work. The example below has Bootstrap 5 loaded, and your custom CSS was too complex to follow so I had to remove it (BS styles would inhibit most of it anyway), and the following CSS was added:
.active {
position: relative
}
.active::before {
content: '|';
position: absolute;
left: calc(50% - 0.25ch);
top: -1ch;
color: tomato;
}
This style will appear whenever a link is assigned .active. If the | is too tall, try decreasing font-size directly on the .active::before selector -- use Dev Tools to find the computed font-size of .active::before to get an idea of how much you should decrease it by. Also, I changed some of the BS classes according to BS suggested use.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.active {
position: relative
}
.active::before {
content: '|';
position: absolute;
left: calc(50% - 0.25ch);
top: -1ch;
color: tomato;
}
</style>
</head>
<body>
<main class="container">
<section class="row">
<nav class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
one
</li>
<li class="nav-item">
two
</li>
<li class="nav-item">
three
</li>
<li class="nav-item">
four
</li>
<li class="nav-item">
five
</li>
<li class="nav-item">
six
</li>
</ul>
</nav>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script></script>
</body>
</html>
You can use something like this.
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
background-color: bisque;
display: grid;
place-content: center;
}
.box{
width: 10rem;
height: 5rem;
border: 1px solid black;
}
.box::before{
display: block;
position: relative;
left: 50%;
transform: translate(-50%);
content: '';
height: 1.5rem;
width: 2px;
background-color: brown;
}
<body>
<div class="box"></div>
</body>
Use active:before and use position:relative on the parent where you used position:absolute. here an example with your code:
.nav-menu{
background: var(--unnamed-color-ffffff);
flex: 1;
justify-content: space-between;
padding-top: 2.3rem;
width: 91.5rem;
}
.nav-menu .icon{
width: 2.0rem;
height: 2.0rem;
margin-right: 1.5rem;
}
.nav-menu .nav-list {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu .nav-list .nav-item{
display: inline-block;
}
.nav-menu .nav-list .nav-item .nav-link {
display: inline-block;
text-decoration: none;
color: black;
}
.nav-menu .nav-list .nav-item .active {
color: red;
position: relative;
}
.nav-menu .nav-list .nav-item .active::before {
content: '';
border-left: 0.1rem solid red;
height: 1.5rem;
position: absolute;
left: 50%;
bottom: 100%;
}
<nav class="nav-menu d-flex" id="nav-menu">
<ul class="nav-list">
<li class="nav-item">
one
</li>
<li class="nav-item">
two
</li>
<li class="nav-item">
three
</li>
<li class="nav-item">
four
</li>
<li class="nav-item">
five
</li>
<li class="nav-item">
six
</li>
</ul>
</nav>
so I've tried a few different things out. But ultimately no success. I'm trying to change the colour of the "Home" link to stay a different colour than the rest when we are specifically on the homepage. So for example, say I'm on the homepage, I specifically want that colour to be orange for the home link, and then when I click on About link, about link changes to orange and the home goes to default white
Html:
<!--Header-->
<header class="header-main">
<!--Navigation menu-->
<nav class="navigation">
<!--Bakingwithwill Logo-->
<img class="logo" src="imgs/bww.png" alt="Bakingwithwill" />
<!--Navigation links-->
<div class="nav-links">
<!--Unordered list of navigation items-->
<ul class="nav-menu">
<li id="active-home" class="nav-items">Home</li>
<li class="nav-items">About</li>
<li class="nav-items">Order</li>
<li class="nav-items">Contact</li>
<li class="nav-items">Cart</li>
</ul>
</div>
<div class="footer-nav">
<!--Footer portion of the side navbar-->
<div class="nav-social">
<!--Navigation of Bakingwithwill social media accounts-->
<ul class="nav-social-list">
<li class="social-icons">
<i class="fab fa-facebook"></i>
</li>
<li class="social-icons">
<i class="fab fa-instagram"></i>
</li>
</ul>
</div>
<p class="copyright">Copyright Bakingwithwill</p>
<!--Copyright-->
</div>
</nav>
<img class="header-banner" src="imgs/bww-home-banner.jpg" alt="Bakingwithwill bread banner"/>
<!--Main image-->
<div class="main">
<!--Contents outside the side navbar representing header page-->
<h2 class="baking-heading">Bakingwithwill</h2>
<h1 class="welcome-heading">Welcome!</h1>
<h2 class="intro-heading">Get a slice of the best bread in<br>
Chatham-Kent!</h2>
</div>
</header>
CSS:
/*Base styles*/
body {
font-family: 'Oswald', sans-serif;
}
h1 {
font-family: 'Satisfy', cursive;
}
/*Home styles*/
header {
width: 100%;
height: 585px;
}
/*Side bar navigation menu*/
.navigation {
height: 100%;
width:160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #3D3732;
overflow-x: hidden;
padding-top: 20px;
opacity: 90%;
}
.navigation a {
text-decoration: none;
}
.logo {
border-radius: 50%;
height: 70px;
width: 70px;
margin-top: 10px;
margin-left: 45px;
}
#active-home:link, #active-home:visited {
color:#E88F2A !important;
}
.navigation li, p {
text-decoration: none;
color: #FFFFFF;
display: block;
text-align: center;
}
.navigation .nav-items {
padding-right: 30px;
padding-top: 10px;
text-align: center;
}
.navigation .social-icons {
list-style-type: none;
text-align: center;
display: inline;
font-size: 15px;
padding: 5px;
margin-top: 50px;
color: #FFFFFF;
margin-left: 15px;
text-decoration: none;
}
.navigation li:hover {
color: #E88F2A;
}
.navigation p {
font-size: 10px;
text-align: center;
padding: 6px 8px 6px 16px;
}
.main {
margin-left: 160px;
padding: 0px 10px;
}
.footer-nav {
margin-top: 200px;
}
/*Social media icons*/
.navigation i {
text-decoration: none;
color: #FFFFFF;
}
.navigation i:hover {
color: #E88F2A;
}
/*Text overlaying the image*/
.baking-heading {
color: #E88F2A;
font-family: 'Satisfy', cursive;
position: relative;
margin-top: 40px;
padding-left: 50px;
font-size: 50px;
}
.welcome-heading, .intro-heading {
font-family: 'Oswald', sans-serif;
position: relative;
}
.welcome-heading, .baking-heading {
transform: rotate(-13deg);
}
.welcome-heading {
padding-left: 130px;
font-size: 50px;
color: #FFFFFF;
}
.intro-heading {
padding-top: 200px;
font-size: 50px;
text-align: center;
color: #FFFFFF;
}
.header-banner {
/*Image styles*/
margin-top: -40px;
position: absolute;
width: 100%;
height: 585px;
}
So for example, say I'm on the homepage, I specifically want that
colour to be orange for the home link, and then when I click on About
link, about link changes to orange and the home goes to default white
One CSS-only approach is to:
add a class to the <body> element of each page
add classes to each of your links (or to the list-items containing the links)
Home Page:
<body class="home-page">
<ul class="nav-menu">
<li class="nav-items home">Home</li>
<li class="nav-items about">About</li>
<li class="nav-items order">Order</li>
<li class="nav-items contact">Contact</li>
<li class="nav-items cart">Cart</li>
</ul>
About Page:
<body class="about-page">
<ul class="nav-menu">
<li class="nav-items home">Home</li>
<li class="nav-items about">About</li>
<li class="nav-items order">Order</li>
<li class="nav-items contact">Contact</li>
<li class="nav-items cart">Cart</li>
</ul>
Then you can change the color of the relevant link on each page:
.nav-items a {
color: white;
}
.home-page .nav-items.home a,
.about-page .nav-items.about a {
color: orange;
}
You need to add a class to the active link and #id is not recommended for styling. Also, the pseudo classes that you're using is blocking your desired outcome. Try changing :
#active-home:link,
#active-home:visited {
color: #e88f2a !important;
}
to:
.active {
color: #e88f2a !important;
}
Afterwards, place the .active class into your link code for each page. So for home it would be:
<li class="nav-items active">Home</li>
and for your about page:
<a href="#">
<li class="nav-items">Home</li>
</a>
<a href="about.html">
<li class="nav-items active">About</li>
</a>
and so on...
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've seen some posts but, I can't figure it out on my specific lines of code. Can anyone help me add a | between 'About Us' and 'Login' I'm just trying to separate them using a '|'and I'm not exactly sure how to tweak my code to make that happen?
HTML
color:rgba(152,226,80,0.6); font-family: 'Bahnschrift Regular';" title="This Header is rendered by /app/_layout/site-header/site-header.component.html">
<div id="logo">
<a href="/index.html">
</a>
</div>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/" style="color:White;" >Home</a>
</li>
<li class="nav-item">
<div class="dropdown">
<li class="dropbtn">Services</li>
<div class="dropdown-content">
<a href="/carmaintenance" style="text-align:center">Car Maintenance
______________________
</a>
<a href="/gogreenseminars" style="text-align:center">Go Green Seminars
______________________
</a>
<a href="/microgridresources" style="text-align:center">Microgrid Resources
______________________
</a>
<a href="/gardeningtogether" style="text-align:center">Gardening Together
______________________
</a>
<a href="/volunteering" style="text-align:center">Volunteering and Activism
______________________
</a>
<a href="/recyclingefforts" style="text-align:center">Recycling Efforts
______________________
</a>
<a href="/inhousevegancafe" style="text-align:center;">In-House Vegan Cafe
</a>
</div>
</div>
<li class="nav-item">
<a class="nav-link" routerLink="/dashboard"style="color:White;">Membership Plans</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about" style="color:White;">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login"style="color:White">Login</a>
</li>
</ul>
</div>
</nav>
CSS
/* Position the navbar container inside the image */
/*.container {
position: absolute;
margin: 20px;
width: auto;
top:3%;
left:1%;
}
*/
/* The navbar */
.topnav {
overflow: hidden;
background-color: rgba(152,226,80,0.6);
}
/* Navbar links */
.topnav a {
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
}
.nav-link
{
/*background-color:;*/
font-weight: bolder;
color: white;
font-size: 125%;
align-items:center;
text-align:center;
float: left;
display: block;
margin-left: 65px;
margin-right:5px;
}
.navbar {
float: left;
width:66%;
height:8%;
opacity:1;
border-radius:15px 0px 0px 15px;
padding-left: 0%;
top:3%;
left:1%;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Dropdown Button */
.dropbtn {
background-color: rgba(152,226,80,0.0);
color: white;
padding: 8px;
font-size: 125%;
border: none;
font-weight:bolder;
margin-left:65px;
margin-right:5px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
min-width: 90px;
box-shadow: 0px 0px 0px 0px rgba(152,226,80,0.0);
z-index: 1;
text-align:center;
padding-left:20px;
padding-top:13px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #FFFFFF;
padding: 12px 16px;
text-decoration: none;
display: block;
background-color : rgba(152,226,80,0.6);
font-weight:bolder;
margin-top: -10px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
/* Change color of dropdown links on hover */
//.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
//.dropdown:hover .dropbtn {background-color: #3e8e41;}
#font-face {
font-family: 'Bahnschrift Regular';
font-style: normal;
font-weight:bolder;
src: local('Bahnschrift Regular'), url('BAHNSCHRIFT 1.woff') format('woff');
}
Any help would be nice and thank you in advance!
You can do this with either a border-left on the last li using :last-child a pseudo-element or a placed content using the :before pseduo-element. Note that by adding pseudo-elements - they are added as the first-child of the selected element. That may play a role in other styling issues.
EDIT - following my comment above - the only valid child of a ul is an li so you should amend your HTMLstructure to ensure that any divs / dropdowns etc are children of an li - not of the parent ul.
Thank you to #dale landry for the code skeleton used below :)
.flex-box {
display: flex;
}
li, .nav-item {
text-decoration: none;
list-style-type: none;
padding: 2px 12px;
color:black;
}
.nav-item:last-child {
border-left: solid 1px black;
}
<div>
<ul class="flex-box">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ul>
</div>
or by using a :before pseudo element
.nav-item:last-child {
position: relative
}
.nav-item:last-child:before {
position: absolute;
content: "|";
left: 0;
color: #d4d4d4;
}
.flex-box {
display: flex;
}
li, .nav-item {
text-decoration: none;
list-style-type: none;
padding: 2px 12px;
color:black;
position: relative
}
.nav-item:last-child:before {
position: absolute;
content: "|";
left: 0;
color: black;
}
<div>
<ul class="flex-box">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ul>
</div>
or by simply adding aen element that is the same height as the entire li as a divider:
.nav-item:last-child {
position: relative
}
.nav-item:last-child:before {
position: absolute;
left: 0;
top:0;
bottom:0;
width: 1px
background-color: #d4d4d4;
}
And if you don't want to rely on the :last-child pseudo-selector - you can achieve the same by adding a class to the last item
<li class="nav-item login-link">
<a class="nav-link" routerLink="/login"style="color:White">Login</a>
</li>
//css
.login-link {
border-left: solid 1px #d4d4d4;
}
And if you want the divider between every li - but not to the right of the last one then you can use the direct sibling combinator "+"
.nav-item + .nav-item {
border-left: solid 1px #d4d4d4;
}
or by using a :before pseudo element
.nav-item {
position: relative
}
.nav-item + .nav-item:before {
position: absolute;
content: "|";
left: 0;
color: #d4d4d4;
}
Why dont you add span in your li element of About us like following:
<li class="nav-item">
<a class="nav-link" routerLink="/about" style="color:White;">About Us</a>
<span>|</span>
</li>
Simply wrap a bar in a list item tag in line with your nav at the spot you wish to have one. See my snipit. Now it is semantically valid code
.flex-box {
display: flex;
}
li,
.nav-item {
text-decoration: none;
list-style-type: none;
padding: 2px 4px;
color: black;
}
.bar {
font-weight: bold;
}
<div>
<ul class="flex-box">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<li class="dropbtn">Services</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About Us</a>
</li>
<li class="bar">|</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ul>
</div>