Navigation animation backwards - html

Why animation on nav bar, that red line, if you set 100% width on nav li a::after works backward and not from left to right side how it should be or how I want to?
HTML
<nav>
<ul>
<li>Domů</li>
<li>Fun Switcher</li>
<li>Radio</li>
<li>Fotky</li>
<li>Games</li>
<li>Chat</li>
</ul>
</nav>
CSS
nav {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
grid-area: nav;
font-weight: bold;
}
nav ul {
list-style: none;
margin: 0;
display: flex;
justify-content:flex-start;
align-items: center;
padding: 1em 0;
}
nav li a {
text-decoration: none;
color: #000000;
padding-left: 3em;
position: relative;
transition: all ease-in-out 250ms;
}
nav li a::after {
content:'';
position: absolute;
display: block;
height: 0.4em;
background-color: red;
bottom: -1em;
/* width: 100%; look for whole line */
transition: all ease-in-out 250ms;
}
nav li a:hover::after {
width: 60%;
}
nav li a:hover{
color: red;
}

You want to change multiple things because some css property is not appropriate for your html class...
nav {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
grid-area: nav;
font-weight: bold;
}
nav ul {
list-style: none;
margin: 0;
display: block;
}
nav li {
padding: 13px 20px;
display: inline-block;
}
nav li a {
text-decoration: none;
color: #000000;
position: relative;
transition: all ease-in-out 250ms;
}
nav li a::after {
content:'';
position: absolute;
display: block;
height: 0.4em;
background-color: red;
bottom: -1em;
/* width: 100%; look for whole line */
transition: all ease-in-out 350ms;
left: 0;
width:0;
}
nav li a:hover::after {
width: 100%;
}
nav li a:hover{
color: red;
}
<nav>
<ul>
<li>Domů</li>
<li>Fun Switcher</li>
<li>Radio</li>
<li>Fotky</li>
<li>Games</li>
<li>Chat</li>
</ul>
</nav>

Is this an accpetable solution for you?
`a{
display: flex;
align-items: center;
justify-content: center;
}`
add this to your css code
heres my codepen:
https://codepen.io/oskedram/pen/abWREpg

Related

How can I format my submenu to act like my main navigation and stay open when hovering over it?

I'm using a bootstrap template and trying to create a submenu for the third menu item that will display four sub-items. For one, I can't get them to display properly, and I can't get them to stay open to hover over them. I'm a designer, not a developer, but I'm trying to learn a little. Can anyone tell me what I'm doing wrong?
I've looked through numerous Q&A's on here, but none seem to work for me. Ideally, I would like the submenu items to be dots that expand when you hover over the parent. I tried that at first, and almost got it, but they would close before I could hover over them, and they wouldn't open when you hovered over the parent. I feel like I'm close, but I've been working at this for the entire day.
<html>
<body>
<header id="header" class="d-flex flex-column justify-content-center">
<nav id="navbar" class="navbar nav-menu">
<ul class="main-nav">
<li>H<span>Home</span></li>
<li>A<span>About</span></li>
<li>P<span>Portfolio</span>
<ul class="nav-sub">
<li><span>Sub 1</span></li>
<li><span>Sub 2</span></li>
<li><span>Sub 3</span></li>
<li><span>Sub 4</span></li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>
body {
font-family: "Open Sans", sans-serif;
color: #272829;
}
a {
color: #0563bb;
text-decoration: none;
}
a:hover {
color: #067ded;
text-decoration: none;
}
#header {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 9997;
transition: all 0.5s;
padding: 15px;
overflow-y: auto;
}
.nav-menu {
padding: 0;
display: block;
position: relative;
}
.nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu ul {
position: relative;
white-space: nowrap;
}
.nav-menu a,
.nav-menu a:focus {
display: flex;
align-items: center;
color: rgba(26, 26, 26, 1);
padding: 10px 18px;
margin-bottom: 8px;
transition: 0.3s;
font-size: 15px;
border-radius: 50px;
background: #f2f3f5;
height: 56px;
width: 100%;
overflow: hidden;
}
.nav-menu a {
border: 4px #1a1a1a solid;
padding-left: 15px !important;
}
.nav-menu a span,
.nav-menu a:focus span {
padding: 0 5px 0 5px;
color: #1a1a1a;
display: none;
}
.nav-sub li,
.nav-sub li:focus {
display: none;
}
.nav-menu a:hover,
.nav-menu .active,
.nav-menu .active:focus,
.nav-menu:hover > a {
color: #fff;
background: #1a1a1a;
border: 4px white solid;
padding: 0 20px;
}
.nav-menu a:hover span,
.nav-menu .active span,
.nav-menu .active:focus span,
.nav-menu:hover > a span {
color: #fff;
}
.nav-menu a:hover,
.nav-menu:hover > a {
width: 100%;
color: #fff;
}
.nav-menu a:hover span,
.nav-menu:hover > a span {
display: block;
}
.main-nav > li:hover .nav-sub {
position: absolute;
width: 100%;
opacity: 1;
margin-bottom: 8px;
display: block;
}
.main-nav > li:hover .nav-sub li span {
width: 100%;
}
.nav-sub {
margin-bottom: 8px;
padding: 0;
position: absolute;
display: none;
width: 100%;
height: auto;
text-align: center;
opacity: 0;
transition: all 0.5s;
}
.nav-sub li {
display: flex;
margin: 0;
width: 100%;
}
The main reason was a margin-bottom: 8px on the last a tag, so there is a gap between the menu item and sub-menu. I made a quick fix for this issue. But there is still a lot of work to do.
body {
font-family: "Open Sans", sans-serif;
color: #272829;
}
a {
color: #0563bb;
text-decoration: none;
}
a:hover {
color: #067ded;
text-decoration: none;
}
#header {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 9997;
transition: all 0.5s;
padding: 15px;
overflow-y: auto;
}
.nav-menu {
padding: 0;
display: block;
position: relative;
}
.nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu ul {
position: relative;
white-space: nowrap;
}
.nav-menu a,
.nav-menu a:focus {
display: flex;
align-items: center;
color: rgba(26, 26, 26, 1);
padding: 10px 18px;
margin-bottom: 8px;
transition: 0.3s;
font-size: 15px;
border-radius: 50px;
background: #f2f3f5;
height: 56px;
width: 100%;
overflow: hidden;
}
.nav-menu .has-nav-sub a,
.nav-menu .has-nav-sub a:focus {
margin-bottom: 0px;
}
.nav-menu a {
border: 4px #1a1a1a solid;
padding-left: 15px !important;
}
.nav-menu a span,
.nav-menu a:focus span {
padding: 0 5px 0 5px;
color: #1a1a1a;
display: none;
}
.nav-sub li,
.nav-sub li:focus {
display: none;
}
.nav-menu a:hover,
.nav-menu .active,
.nav-menu .active:focus,
.nav-menu:hover>a {
color: #fff;
background: #1a1a1a;
border: 4px white solid;
padding: 0 20px;
}
.nav-menu a:hover span,
.nav-menu .active span,
.nav-menu .active:focus span,
.nav-menu:hover>a span {
color: #fff;
}
.nav-menu a:hover,
.nav-menu:hover>a {
width: 100%;
color: #fff;
}
.nav-menu a:hover span,
.nav-menu:hover>a span {
display: block;
}
.main-nav>li:hover .nav-sub {
position: absolute;
width: 100%;
opacity: 1;
display: block;
}
.main-nav>li:hover .nav-sub li span {
width: 100%;
}
.nav-sub {
padding: 0;
position: absolute;
display: none;
width: 100%;
height: auto;
text-align: center;
opacity: 0;
transition: all 0.5s;
}
.nav-sub li {
display: flex;
margin: 0;
width: 100%;
}
<html>
<body>
<header id="header" class="d-flex flex-column justify-content-center">
<nav id="navbar" class="navbar nav-menu">
<ul class="main-nav">
<li>H<span>Home</span></li>
<li>A<span>About</span></li>
<li class="has-nav-sub">P<span>Portfolio</span>
<ul class="nav-sub">
<li><span>Sub 1</span></li>
<li><span>Sub 2</span></li>
<li><span>Sub 3</span></li>
<li><span>Sub 4</span></li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>

Submit input button styling

Is there any way to make css style for input type="submit" button same like this style for nav bar buttons???
nav {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
grid-area: nav;
font-weight: bold;
}
nav ul {
list-style: none;
margin: 0;
display: block;
}
nav li {
padding: 13px 20px;
display: inline-block;
}
nav li a {
text-decoration: none;
color: #000000;
position: relative;
transition: all ease-in-out 250ms;
}
nav li a::after {
content: '';
position: absolute;
display: block;
height: 0.3em;
background-color: #000000;
bottom: -0.9em;
transition: all ease-in-out 350ms;
left: 0;
width: 0;
}
nav li a:hover::after {
width: 100%;
}
nav li a:hover {
color: rgb(0, 0, 0);
}
<nav>
<ul>
<li>Domů</li>
<li>Fun Switcher</li>
<li>Radio</li>
<li>Fotky</li>
<li>Games</li>
<li>Chat</li>
</ul>
</nav>

I can't get my navbar sub menu to align vertically

Please can someone help, I've been at this for 2 days and just can't get it right! I'm trying to create a dropdown menu to adhere to my existing navbar. Here's my code below. I have it set that the navbar style changes for smaller windows/mobile and still need to figure that part out wrt the sub menu.. HELP :(
nav {
position: fixed;
width: 100%;
z-index: 10;
}
nav ul {
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #000;
padding: 0;
text-align: center;
margin: 0;
transition: 1s;
}
nav ul li {
display: inline-block;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 20px;
padding: 5px 5px;
}
nav ul li ul {
display: none;
}
nav ul li:hover ul {
display: block;
position: absolute;
}
nav.black ul {
background: rgba(255, 255, 255, 1);
color: #666;
}
nav.black ul li a {
text-decoration: none;
font-size: 20px;
transition: 1s;
filter: invert(50%);
}
.menu-icon {
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #00b4ff;
display: none;
}
#media(max-width: 900px) {
.nav-logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 45em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px 0;
text-align: center;
}
.menu-icon {
display: block;
}
}
<div class="nav-wrapper">
<nav>
<div class="menu-icon">
<i class=" fa fa-bars fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Courses
<ul>
<li>PADI Experiences</li>
<li>PADI Basic Courses</li>
<li>PADI Speciality Courses</li>
<li>PADI Pro</li>
</ul>
</li>
<li class="small-nav-logo"><a id="nav-africa" href ="index.html"><img src="img/logo-icon.gif" alt="Home" width="80" height="68"></a></li>
<li>Dives
<ul>
<li>Guided Packages</li>
</ul>
</li>
<li>Nature</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
Add this to your css.
nav ul li ul li{
display: block;
text-align: left;
margin: 20px 0px;
}
All you needed to do was target the li inside the li.

I can't dropdown the submenu under its parent menus

It's the HTML of my code. I created navigation menubar with submenu in dropdown option but my submenu is not dropping down under the parent menu "dropdown" is parent menu.
.nav-wrap{
background:white;
width:100%;
height:50px;
position: relative;
top:-13px;
overflow:visible;
}
#example-one {
margin: 0 auto;
list-style: none;
position: relative;
width: 100%;
}
#example-one li {
display: inline-block;
font-family: 'Montserrat', sans-serif;
}
#example-one a {
color: #000;
font-weight:bold;
font-size: 14px;
float: left;
padding: 15px 15px;
text-decoration: none;
left:350px;
position:relative;
color:#000;
}
#example-one a:after {
color: #333;
content: '';
position: absolute;
width: 0; height: 3px;
display: block;
margin-top: 2px;
right: 0;
background: #000;
-webkit-transition-property: left, right;
transition-property: left, right;
transition: width 1s ease;
-webkit-transition: width 1s ease;
}
#example-one a:hover:after{
width: 100%;
left: 0;
background: #000;
}
.dropbtn {
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content
{
display: block;
}
<div class="nav-wrap">
<ul class="group" id="example-one">
<li>Home</li>
<li>
<div class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div></li>
<li>Offers</li>
<li>Group Sales</li>
<li>Reviews</li>
</ul></div>
Here is the CSS:
.nav-wrap{
background:white;
width:100%;
height:50px;
position: relative;
top:-13px;
overflow:visible;
}
#example-one {
margin: 0 auto;
list-style: none;
position: relative;
width: 100%;
}
#example-one li {
display: inline-block;
font-family: 'Montserrat', sans-serif;
}
#example-one a {
color: #000;
font-weight:bold;
font-size: 14px;
float: left;
padding: 15px 15px;
text-decoration: none;
left:350px;
position:relative;
color:#000;
}
#example-one a:after {
color: #333;
content: '';
position: absolute;
width: 0; height: 3px;
display: block;
margin-top: 2px;
right: 0;
background: #000;
-webkit-transition-property: left, right;
transition-property: left, right;
transition: width 1s ease;
-webkit-transition: width 1s ease;
}
#example-one a:hover:after{
width: 100%;
left: 0;
background: #000;
}
.dropbtn {
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content
{
display: block;
}
.nav-wrap {
background: white;
width: 100%;
}
#example-one {
text-align: right;
}
#example-one li {
text-align: left;
position: relative;
display: inline-block;
font-family: 'Montserrat', sans-serif;
}
#example-one a {
color: #000;
font-weight: bold;
font-size: 14px;
padding: 15px 15px;
text-decoration: none;
position: relative;
color: #000;
}
#example-one a:after {
color: #333;
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 2px;
right: 0;
background: #000;
-webkit-transition-property: left, right;
transition-property: left, right;
transition: width 1s ease;
-webkit-transition: width 1s ease;
}
#example-one a:hover:after {
width: 100%;
left: 0;
background: #000;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 160px;
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
#example-one li li {
display: block;
}
#example-one li:hover>ul {
display: block;
}
<div class="nav-wrap">
<ul class="group" id="example-one">
<li>Home</li>
<li><a class="dropbtn">Dropdown</a>
<ul class="dropdown-content">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Offers</li>
<li>Group Sales</li>
<li>Reviews</li>
</ul>
</div>
I've updated your CSS code and HTML as well. Your structure is over complicated and css with id does not reuseable for other dropdown menu.
.nav {
display: inline-block;
text-align: left;
}
.nav,
.dropdown {
padding: 0;
margin: 0;
list-style-type: none;
}
.nav > li {
float: left;
position: relative;
}
.nav li > a {
display: block;
position: relative;
padding: 10px 25px;
color: #000;
font: bold 14px sans-serif;
text-decoration: none;
}
.nav .dropdown {
display: none;
position: absolute;
top: 100%;
background-color: #fff;
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .2);
min-width: 160px;
}
.nav .dropdown .dropdown {
top: 0;
left: 100%;
}
.nav .dropdown > li {
position: relative;
}
.nav li:hover > .dropdown {
display: block;
}
.nav .dropdown a:hover {
background-color: #f1f1f1;
}
.nav a::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 3px;
background: #000;
transition-property: left, right;
transition: width 1s ease;
}
.nav a:hover::after {
width: 100%;
left: 0;
background: #000;
}
<div style="text-align: center">
<ul class="nav">
<li>Home</li>
<li>
Dropdown
<ul class="dropdown">
<li>Link 1</li>
<li>
Link 2
<ul class="dropdown">
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.3</li>
</ul>
</li>
<li>Link 3</li>
</ul>
</li>
<li>Offers</li>
<li>Group Sales</li>
<li>Reviews</li>
</ul>
</div>

My `<li>` sizes are different on different pages

On my home page the dropdown ul looks exactly how I want it to:
But on all my other pages the ul looks much bigger like this:
Here is the HTML for the home page:
<header id="header" class="alt">
<h1><strong>South Somerset Motocross Club</strong></h1>
<nav id="nav">
<ul>
<li>Home</li>
<li><a>Info</a>
<ul class="alt">
<li>Club Rules</li>
<li>Pre-Race Bike Check</li>
<li>Job Descriptions</li>
<li>Race Fees</li>
<li>Groups And Ages</li>
</ul>
</li>
<li><a>About Us</a>
<ul class="alt">
<li>Our Heritage</li>
<li>Committee</li>
</ul>
</li>
<li>News</li>
<li>Fixtures</li>
</ul>
</nav>
</header>
Here is the HTML for the other page:
<header id="header">
<h1><strong>South Somerset Motocross Club</strong></h1>
<nav id="nav">
<ul>
<li>Home</li>
<li><a>Info</a>
<ul class="alt">
<li>Club Rules</li>
<li>Pre-Race Bike Check</li>
<li>Job Descriptions</li>
<li>Race Fees</li>
<li>Groups And Ages</li>
</ul>
</li>
<li><a>About Us</a>
<ul class="alt">
<li>Our Heritage</li>
<li>Committee</li>
</ul>
</li>
<li><a>News</a></li>
<li>Fixtures</li>
</ul>
</nav>
</header>
Here is the CSS for both:
#header {
background-color: #fff;
border-bottom: solid 1px rgba(144, 144, 144, 0.25);
box-shadow: 0px 0.0375em 0.125em 0px rgba(0, 0, 0, 0.05);
color: #000;
cursor: default;
font-size: 1.25em;
height: 4.5em;
left: 0;
line-height: 4.4em;
position: fixed;
text-transform: uppercase;
top: 0;
width: 100%;
z-index: 10000;
z-index: 10001;
}
#header a {
color: #000;
}
#header h1 {
color: #000;
font-weight: 400;
height: inherit;
left: 1.25em;
line-height: inherit;
margin: 0;
padding-left: 10px;
padding-right: 10px;
position: absolute;
top: 0;
}
#header nav {
height: inherit;
line-height: inherit;
position: absolute;
right: 1.25em;
top: 0;
vertical-align: middle;
}
#header nav ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#header nav ul li {
color: #fff;
display: inline-block;
padding-top: 0;
padding-bottom: 0;
padding-left: 10px;
padding-right: 10px;
margin-left: 1em;
}
#header nav ul li ul {
display: none;
padding: 0;
margin: 0;
background-color: #eee;
border-radius: 4px;
}
#header nav ul li:hover ul {
display: block;
position: absolute;
}
#header nav ul li ul li {
border-radius: 4px;
margin: 0 0 0 0;
padding-left: 4px;
padding-top: 0;
padding-right: 50px;
display: block;
color: black;
font-size: 12pt;
}
#header nav ul li ul li a {
color: #111;
padding: 0;
margin: 0;
display: block;
}
#header nav ul li ul li a:hover {
color: rgba(255, 255, 0, 1);
}
#header.alt nav ul li ul li a:hover {
color: rgba(255, 255, 0, 1);
}
#header.alt nav ul li ul li:hover {
background-color: #3477ff;
}
#header nav ul li ul li:hover {
background-color: #3477ff;
}
#header.alt nav ul li ul li a {
color: #000;
padding: 0;
display: block;
}
#header nav ul li a {
-moz-transition: color 0.1s ease-in-out;
-webkit-transition: color 0.1s ease-in-out;
-ms-transition: color 0.1s ease-in-out;
transition: color 0.1s ease-in-out;
color: #000;
display: inline-block;
text-decoration: none;
}
#header nav ul li a:hover {
color: #000;
}
#header nav ul li .button {
border-color: rgba(144, 144, 144, 0.25);
box-shadow: none;
height: 3em;
line-height: 2.9em;
margin-bottom: 0;
padding: 0 1.5em;
position: relative;
top: -0.075em;
vertical-align: middle;
}
#header .container {
position: relative;
}
#header .container h1 {
left: 0;
}
#header .container nav {
right: 0;
}
#header.alt {
background-color: transparent;
border: 0;
box-shadow: none;
height: 3.25em;
line-height: 3.25em;
position: absolute;
}
#header.alt h1 {
color: #ffffff;
left: 2.5em;
top: 2em;
}
#header.alt h1 a {
color: #FFF;
}
#header.alt nav {
right: 2em;
top: 2em;
}
#header.alt nav a {
color: #ddd;
}
#header.alt nav a:active, #header.alt nav a:hover {
color: #FFF;
}
#header.alt .button {
border-color: rgba(255, 255, 255, 0.5);
color: #ffffff !important;
}
#media screen and (max-width: 980px) {
#header {
display: none;
}
}
I would like the other page's <ul> elements to be the same size as the home page but I can't seem to find any extra margins or padding on them.
It is because of the alt class. The ul li ul li gets a line-height from the alt class.
So force the same line-height upon the #header nav ul li ul li by adding the same line-height. Which is line-height: 3.25em;.
The issue is down to your line heights - they are set on #header and #header.alt to different values:
#header.alt:
line-height: 3.25em;
#header:
line-height:4.4em;
This is causing the difference you are seeing in your nav links.