I'm trying to follow this tutorial on codepen to make an animated underline when a user hovers over a link in the navbar. Currently, I have the line appearing but only shows one underline underneath the whole nav list. I am trying to achieve the line appearing underneath the hovered link.
.navbar-fixed-left .navList a.link {
text-decoration: none;
}
/*Removing bullet points */
.navbar-fixed-left .navList li {
list-style-type: none;
}
.link::before {
transition: 300ms;
height: 2px;
content: "";
position: absolute;
background-color: #031D44;
}
.link-ltr::before {
width: 0%;
bottom: 10px;
}
/* Length of the line */
.link-ltr:hover::before {
width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-fixed-left mt-4">
<ul class="navList">
<li><a class="link link-ltr" href="about.html">About</a></li>
<li><a class="link link-ltr" href="resume.html">Resume</a></li>
<li><a class="link link-ltr" href="projects.html">Projects</a></li>
<li><a class="link link-ltr" href="databasediagram.html">Database Diagrams</a></li>
<li><a class="link link-ltr" href="apiunittests.html">API Unit Tests</a></li>
<li><a class="link link-ltr" href="bucketlist.html#">Bucket List</a></li>
</ul>
</div>
Any help would be appreciated thank you!
you need to add a relative position to .link so that the underline will be relative to the link's position. and then just set the top or bottom position of the underline to make it appear on the bottom of the link.
.link { position: relative }
You must just add this element in CSS:
.link {
padding: 20px 0px;
display: inline-block;
position: relative;
}
Related
This question already has an answer here:
Why does clip-path (and other properties) affect the stacking order (z-index) of elements later in DOM?
(1 answer)
Closed 2 years ago.
I made my navigation bar and positioned it (fixed), and it works fine. I was able to scroll down and all. As soon has I added filter (brightness) to it the image on my page, the navigation bar disappeared. I have tried using pseudo-elements and setting the position (absolute/relative), I set the filter property to the container of the child element of the image, it still didn't work. Can someone help me on how to have my navigation bar display on fixed position and still have the image filtered. Thanks in Advance.
nav {
position: fixed;
background-color: #fff;
}
nav ul {
margin: 0;
padding: 0;
}
.navbar-brand {
padding-right: 20px;
}
nav li {
display: inline-block;
padding: 10px;
}
nav a {
color: #000;
text-decoration: none;
}
nav a:hover {
color: #ff6600;
text-decoration: none;
}
.title-image img {
width: 100%;
height: 300px;
filter: brightness(60%);
}
<nav>
<ul>
<li>
<a class="navbar-brand" href="#">Navbar Brand</a>
</li>
<li>
Home
</li>
<li>
About
</li>
<li>
services
</li>
</ul>
</nav>
<div class="title-image">
<img src="https://images.unsplash.com/photo-1599546824091-f49550ce8cbc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
JSfiddle Demo
Just add z-index to your nav element as follow
nav{
position: fixed;
background-color: #fff;
z-index:999;
}
nav ul{
margin: 0;
padding: 0;
}
.navbar-brand{
padding-right: 20px;
}
nav li{
display: inline-block;
padding: 10px;
}
nav a{
color: #000;
text-decoration: none;
}
nav a:hover{
color: #ff6600;
text-decoration: none;
}
.title-image img{
width: 100%;
height: 300px;
filter: brightness(60%);
}
<nav>
<ul>
<li>
<a class="navbar-brand" href="#">Navbar Brand</a>
</li>
<li>
Home
</li>
<li>
About
</li>
<li>
services
</li>
</ul>
</nav>
<div class="title-image">
<img src="https://images.unsplash.com/photo-1599546824091-f49550ce8cbc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
The navbar didn't disappear, it is just beneath the image. To have it in front, you should use z-index: 10; (or any value greater than 0).
See more at : https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
In addition, keep in mind that your image - or any element after your navbar - will be positioned on top of your page. May be you'll want to let the equivalent of the navbar height as space before any content.
I'm trying to make a basic navigation bar where a child dropdown appears when hovering over a list item. I want to position this dropdown starting at the right most edge of the list item I am hovering over, but I want it this dropdown be able to scale bigger than the list item you're hovering over.
The trouble is that when I position the parent relative, the dropdown's width is constricted to the width of the list item you're hovering over, when I remove postion relative I lose the ability to position it the way I want it.
When the parent List item doesn't have position relative it looks like this:
But I want the right edge of that dropdown to align with the right side of the list item I'm hovering on. When I add position relative to the list items, the width of the dropdown is contsrained like this:
The markup looks like follows:
<nav>
<ul class="outer-list">
<li>
<a>
Work
</a>
<ul class="inner-list">
<li>Sub1</li>
<li>Sub2</li>
<li>Sub3</li>
</ul>
</li>
</ul>
<ul class="outer-list">
<li>
<a>
Contact
</a>
</li>
</ul>
<ul class="outer-list">
<li>
<a>
Helpdesk
</a>
<ul class="inner-list">
<li>Sub1</li>
<li>Sub2</li>
<li>Sub3</li>
</ul>
</li>
</ul>
<ul class="outer-list">
<li>
<a>
Subscriptions
</a>
<ul class="inner-list">
<li>Sub1</li>
<li>Sub2</li>
<li>Sub3</li>
</ul>
</li>
</ul>
I am not in charge of the markup, but if it needs to change to allow for a solution that is fine.
My CSS is as follows:
.outer-list{
.dropdown{
padding-right: 20px;
a{
color: black;
text-decoration: none;
position: relative;
.icon-dropdown{
position: absolute;
display: inline-block;
width: 6px;
height: 4px;
background-image: url('./Assets/BlueArrowIcon.svg');
background-size: cover;
background-position: center;
top: 50%;
right: -11px;
transform: translateY(-50%)
}
}
.inner-list{
padding: 25px 20px;
display: none;
position: absolute;
background-color: $color-white;
box-shadow: 5px 0px 50px rgba(0,0,0,0.16);
z-index: 1;
max-width: 310px;
li{
margin-bottom: 20px;
&:hover{
a{
color: $color-dark-red;
}
}
}
}
&:hover{
a{
color: $color-blue;
}
.inner-list{
display: block;
a{
color: black;
}
}
}
}
&:last-of-type{
.dropdown{
padding-right: 0px;
}
}
}
If anyone could help me that would be much appreciated.
i created a navbar header with the new bootstrap 4 alpha frame work.
<nav class="navbar navbar-light navbar-fixed-top pulse-header">
<ul class="nav navbar-nav navbar-nav-left">
<li class="nav-item"><i class="ion-grid pulse-icons"></i></li>
</ul>
<ul class="nav navbar-nav float-xs-right">
<li class="nav-item"><i class="ion-ios-search-strong pulse-icons"></i></li>
<li class="nav-item">
<a href="#" class="open-notification-sidebar">
<i class="ion-earth pulse-icons"></i>
<span class="pulse-circle"></span>
</a>
</li>
<li class="nav-item"><i class="ion-chatboxes pulse-icons"></i></li>
</ul>
</nav>
css
.pulse-header {
height: 60px;
min-height: 60px;
max-height: 60px;
background-color: #1f2532;
padding: 13px 15px;
}
.pulse-header .navbar-nav-left {
margin-left: 20px;
}
.pulse-header .nav > .nav-item {
margin-right: 20px;
}
.pulse-header .nav > .nav-item > a {
position: relative;
}
i would like to have a logo centered in the navbar but do not know how to get it done, cause when i put on into, my icons on the right side are moving down.
bootply
You just need one block of css
Here is a working example of how I achieved what you're are looking for.
I added an img tag as a child of the nav bar and then set it to bellow code.
Try this:
.navbar img {
display:block;
margin: 0px auto;
}
In the event that when you begin to populate the navbar you find that the logo no longer centers then attempt this code for your logo
Or try this:
#logo {
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
This method will not be as automatic however will work if your content beigns to offset the logo.
Working Example: http://www.bootply.com/XVlsafgbzD
I am making a navigation bar and I would like it to have pure CSS dropdown menus, the problem with this is that in order for them to not overlap the rest of the page you have to set them to position: absolute, however this causes all the links to occupy the same space. Giving them individual margins will space them out but as they occupy the same virtual space only the last link is actually clickable.
HTML:
<div id="navbar">
<ul>
Home
About Me
<div id="programs">
Programs
<li><a class="navbutton" style="margin-top:0px;">Test</a></li>
<li><a class="navbutton" style="margin-top:62px;">Test 2</a></li>
<li><a class="navbutton" style="margin-top:124px;">Test 3</a></li>
<li><a class="navbutton" style="margin-top:186px;">Test 4</a></li>
</div>
</ul>
</div>
CSS:
#navbar
{
border-bottom: 1px solid #00A2E8;
}
.navbutton
{
color: #BBBBBB;
text-align: center;
font-size: 18px;
display: inline-block;
width: 120px;
height: 45px;
padding-top: 17px;
transition: all 0.3s;
position: relative;
}
#programs
{
display: inline-block;
}
#programs > li
{
display: none;
list-style-type: none;
}
#programs:hover > li
{
display: block;
position: absolute;
}
Is there any way to make them overlap everything but each other, so that the links are clickable but not moving the whole page down? Preferably a solution without JQuery/Javascript please. Thanks!
ok i think i may have figured this problem out. all i did was add a z-index of 1 to the .navbutton element and it worked. all the other css i did not modify at all.
.navbutton
{
color:#BBBBBB;
text-align:center;
font-size:18px;
display:inline-block;
width:120px;
height:45px;
padding-top:17px;
transition:all 0.3s;
position:relative;
z-index: 1; /* this is the rule too add */
}
I hope that helps :-)
You are looking for z-index.
<div style="z-index: 1;">Top</div>
<div style="z-index: 0;">Middle</div>
<div style="z-index: -1;">Bottom</div>
I am currently making a horizontal drop-down menu, I have it working so that when you hover over an image, subsequent images appear below it, then when you move away from the main link; they disappear.
But the problem is, is I want it so that when you hover over one of the subsequent links, the links remain until you move away from them, at the moment they are disappearing when you move over the link.
HTML:
<nav id="navigation">
<ul style="list-style:none">
<li class="fixtures"><img id="sweets-button" src="images/Sweets_Button.png"></li>
<ul style="list-style:none" class="hidden">
<li ><img src="images/Sweets_Button-Dropdown.png"></li>
<li><img src="images/Sweets_Button-Dropdown.png"></li>
</ul>
</nav>
CSS:
#navigation ul.fixtures:hover{ /* Makes anything with the class 'hidden' appear when hover over anything with 'fixtures class' */
color: #000;
margin-top:1px;
-webkit-transition-duration: 0.4s;
cursor: pointer;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
box-shadow: 0px 0px 20px rgba(0,235,255,0.8);
-webkit-box-shadow: 0px 0px 20px rgba(255,102,51,0.8);
background: rgba(255,102,51,0.8);
opacity: 50%;
}
ul.hidden{
display: none;
position:absolute;
margin-top:-90px;
margin-left:110px;
}
li.fixtures:hover + ul.hidden{ /* Makes anything with the class 'hidden' appear when hover over anything with 'fixtures class' */
display: block;
position:absolute;
margin-top:-20px;
margin-left:72px;
}
Thanks for any help!
Here is some jsfiddle, which may help you visualize it:
http://jsfiddle.net/QkY83/
Básically, You have to add the whole submenu (the ul element) inside of the parent menu item (li.fixtures). Here is a minimal example (updated in the jsfiddle you provided http://jsfiddle.net/QkY83/3/):
The HTML:
<nav id="navigation">
<ul style="list-style:none">
<li class="fixtures"><a> This is main link </a>
<ul style="list-style:none" class="hidden">
<li><a> This is first sub-link </a></li>
<li><a> This is Second sub-link </a></li>
</ul>
</li>
</ul>
</nav>
The CSS:
ul.hidden {
display: none;
position:absolute;
}
li.fixtures:hover ul.hidden {
/* Applied to the child ul */
display: block;
margin-top:-20px;
margin-left:72px;
}