I'm creating a website for myself and was following a tutorial by codecourse, when I was done I noticed that the buttons were unclickable as when you clicked, the dropdown menu would disappear. Please help? Thanks in advance.
Tutorial: https://www.youtube.com/watch?v=pYN8FUiKfzA
Code [HTML]: `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="img/cLogo.png" />
<link rel="spreadsheets" href="styles/css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/css/global.css">
</head>
<body>
<header>
<nav class="nav-main">
<div class="logo">iTzPvPLyfe</div>
Home
Apply
dropdown
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>Skywars</li>
<li>Blitz SG</li>
</ul>
</div>
</div>
About
</nav>
</header>
<!-- -------------------------------------------------------------- -->
<section class="content">
<p>
Lorem Ipsum
</p>
</section>
<!-- -------------------------------------------------------------- -->
<footer>
</footer>
</body>
</html>
Code[SASS]:
.nav-main {
width: 100%;
background-color: $nav-background-color;
height: 70px;
color: $nav-foreground-color;
.logo {
float: left;
height: 40px;
padding: 15px 30px;
font-size: 1.4em;
line-height: 40px;
}
> ul {
#extend %plainlist;
float: left;
> li {
float: left;
}
}
}
.nav-item {
display: inline-block;
padding: 15px 20px;
height: 40px;
line-height: 40px;
color: $nav-foreground-color;
text-decoration: none;
&:hover {
background: $nav-hover-color;
}
}
.nav-drop {
&:focus {
background-color: $nav-hover-color;
~ .nav-content {
max-height: 400px;
#include transition(max-height, 0.4s, ease-in);
}
}
}
.nav-content {
margin-left: 345px;
position: absolute;
top: 70px;
overflow: hidden;
background-color: $nav-background-color;
max-height: 0;
a {
color: $nav-foreground-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.nav-sub {
padding: 20px;
ul {
#extend %plainlist;
a {
display: inline-block;
}
}
}
works for me. I don't think you included the mixins properly. Since you did not include them in the code snippet above, I went to the tutorial link and included them manually. Try checking to see if you have the mixins included in the sass file at the top like its shown in the tutorial. Make sure your filenames match, and your mixins match.
Your sass should convert to this css. Note, I adjusted the colors, and you should be able to take from here:
.nav-main {
width: 100%;
background-color: grey;
height: 70px;
color: white;
}
.nav-main .logo {
float: left;
height: 40px;
padding: 15px 30px;
font-size: 1.4em;
line-height: 40px;
}
.nav-main > ul {
margin: 0;
padding: 0;
list-style-type: none;
float: left;
}
.nav-main > ul > li {
float: left;
}
.nav-item {
display: inline-block;
padding: 15px 20px;
height: 40px;
line-height: 40px;
color: pink;
text-decoration: none;
}
.nav-item:hover {
background: orange;
}
.nav-drop:focus {
background-color: orange;
}
.nav-drop:focus ~ .nav-content {
max-height: 400px;
transition: max-height, 0.4s, ease-in;
}
.nav-content {
margin-left: 345px;
position: absolute;
top: 70px;
overflow: hidden;
background-color: orange;
max-height: 0;
}
.nav-content a {
color: blue;
text-decoration: none;
}
.nav-content a:hover {
text-decoration: underline;
}
.nav-sub {
padding: 20px;
}
.nav-sub ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.nav-sub ul a {
display: inline-block;
}
Related
I am trying to create a navbar but the animation are not working, As you can see, I have put position: fixed; and right: -100%; to the .nav-links so that it can hide and not create white space at the right and #nav-btn:checked~.nav-links { right: 0; width: 100% !important; }
And when I click at the checkbox it does not show the animation and appear without any animation and that's my problem.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
nav {
background: black;
width: 100% !important;
color: white;
height: 76px;
line-height: 76px;
padding-right: 10px;
font-size: 20pt !important;
}
.nav-links a {
font-size: 20px;
text-decoration: none;
}
#nav-btn,
label {
display: none;
}
#media(min-width: 600px) {
label {}
.nav-links a {
color: white;
}
.nav-links {
float: right;
justify-content: space-between;
}
.nav-links a:hover {
background-color: white;
color: black;
padding-top: 2.5px;
padding-bottom: 2.5px;
border-radius: 5px;
padding-right: 2.5px;
padding-left: 2.5px;
}
.title,
.nav-links {
display: inline;
}
}
#media(max-width: 599px) {
.nav-links {
background-color: black;
}
label {
display: inline;
float: right;
padding-right: 20px;
}
.extra {
display: none;
}
.nav-links {
text-align: center;
display: block;
}
.nav-links a {
display: block;
transition: .9s;
}
nav {
padding-right: 0px;
}
.nav-links a:hover,
.active {
background: #ff000a;
color: white;
}
a {
text-decoration: none;
color: white;
}
.nav-links {
position: fixed;
right: -100%;
}
#nav-btn:checked~.nav-links {
right: 0;
width: 100% !important;
}
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
⠀<span class="title">Nav</span>
<label for="nav-btn"><i class="fas fa-bars"></i></label>
<input type="checkbox" name="" id="nav-btn">
<div class="nav-links">
Home
About
Contact Us
Feedback
</div>
</nav>
</body>
If I understand correctly, you need to put the transition on the nav links container, not the links. That's where the open/close happens.
I've also moved your width rule to the container for all states, not just when it's shown. That fixes the close transition.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
nav {
background: black;
width: 100% !important;
color: white;
height: 76px;
line-height: 76px;
padding-right: 10px;
font-size: 20pt !important;
}
.nav-links a {
font-size: 20px;
text-decoration: none;
}
#nav-btn,
label {
display: none;
}
#media(max-width: 9599px) {
.nav-links {
background-color: black;
transition: .9s;
text-align: center;
display: block;
width: 100%;
}
label {
display: inline;
float: right;
padding-right: 20px;
}
.extra {
display: none;
}
.nav-links a {
display: block;
}
nav {
padding-right: 0px;
}
.nav-links a:hover,
.active {
background: #ff000a;
color: white;
}
a {
text-decoration: none;
color: white;
}
.nav-links {
position: fixed;
right: -100%;
}
#nav-btn:checked~.nav-links {
right: 0;
}
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
⠀<span class="title">Nav</span>
<label for="nav-btn"><i class="fas fa-bars"></i></label>
<input type="checkbox" name="" id="nav-btn">
<div class="nav-links">
Home
About
Contact Us
Feedback
</div>
</nav>
</body>
I am building a personal website, and want to get a dropdown menu working. So far the first part is working, but the second (dropdown in dropdown) isn't.
It is the "Alternate History" line that isn't showing up.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
#links img,
footer img,
li img,
h1 img,
h2 img,
h3 img,
p img,
.dropme img {
height: 1em;
}
footer {
clear: both;
text-align: center;
padding-top: 2em;
}
body {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 1em;
background: #111;
color: #eee;
}
html {
padding-bottom: 500px;
}
dt {
color: orange;
margin-top: 2px;
}
dd {
margin-bottom: 2px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-align: center;
text-shadow: -1px 3px 3px rgba(0, 0, 0, 0.68);
}
h1 {
color: red;
}
h2 {
color: goldenrod;
}
h3 {
color: teal;
}
a {
color: lime;
text-decoration: none;
}
a:hover {
color: red;
}
.menubar li a {
display: block;
}
.menubar {
display: inline-block;
margin: 0;
padding: 0;
zoom: 1;
}
nav {
margin-left: auto;
margin-right: auto;
font-size: large;
text-align: center;
}
.menubar li {
display: block;
float: left;
width: 100px;
min-height: 1.5em;
background: #222;
border: #444 solid 2px;
padding: 3px;
margin: 4px;
}
.menubar li:hover {
background: #000;
}
.menubar a {
text-decoration: none;
}
.menubar li ul {
visibility: hidden;
position: absolute;
padding-top: 10px;
}
.menubar li:hover ul {
visibility: visible;
padding-left: 0;
margin-left: -7px;
}
.menubar li ul li {
float: none;
position: relative;
width: 150px;
text-align: left;
}
code {
color: green;
/* overflow-x: auto; */
}
/* pre { */
/* background: var(--color256); */
/* border: 1px solid var(--color8); */
/* border-radius: 4px; */
/* padding: 5px; */
/* display: block; */
/* align: center; */
/* max-width: 900px; */
/* /1* background: #1d2021; *1/ */
/* } */
<!DOCTYPE html>
<html lang="en">
<head>
<title>Smash Civilization's Homepage</title>
<link rel='stylesheet' type='text/css' href='style.css'>
<meta charset="utf-8" />
</head>
<body>
<nav>
<ul class="menubar">
<h1><big>Smash Civilization</big></h1>
<div id="links">
<div class="cat">
<li>Home</li>
<li>About</li>
<li>Literature
<ul>
<li>Category</li>
<ul>
<li>Alternate History</li>
</ul>
<li>Dewey Decimal</li>
</ul>
<li>Issues</li>
<li>Podcasts</li>
<li>Talks</li>
<li>Vision</li>
</div>
</div>
</ul>
</nav>
</body>
</html>
What do I need to fix to get this working correctly? Any help is most appreciated!
I want to create a sliding sidebar menu but it seems not to be working. I want it to slide when I click on the icon. I used css and checkbox to make enable this code but it seems not to be working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SideBar</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="jquery-3.5.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://kit.fontawesome.com/5e85fec85e.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<nav class="banner">
<div id="header">
<h1>LOGO</h1>
</div>
<div id="menu">
<input type="checkbox" id="check">
<label for="check" class="show-menu-btn">
<i class="fa fa-bars"></i>
</label>
<ul class="dropdown">
<li>Home</li>
<li><>About</li>
<li>Contact</li>
<label for="check" class="hide-menu-btn">
<i class="fas fa-times"></i>
</label>
</ul>
</div>
</nav>
This is the css code. I want to create a sliding sidebar menu but it seems not to be working. I want it to slide when I click on the icon. I used css and checkbox to make enable this code but it seems not to be working.
#import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";
* {
margin: 0;
padding: 0;
}
.banner {
background: #475050;
border-bottom: 2px solid black;
display: flex;
color: white;
line-height: 0.7;
}
#header {
padding: 15px 0 0 10px;
font-family: fantasy;
letter-spacing: 2px;
}
#menu {
margin-left: auto;
padding-right: 10px;
}
#menu ul {
display: flex;
}
#menu ul li {
list-style: none;
padding: 20px 10px;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#menu ul li a {
text-decoration: none;
color: white;
cursor: pointer;
}
#menu ul li a:hover {
color: crimson;
}
#menu i, #check {
display: none;
}
#media (max-width: 486px) {
.banner {
display: block;
}
#header {
padding-bottom: 10px;
border-bottom: 2px solid black;
}
#header h1{
margin: 0;
font-size: 1.5rem;
line-height: normal;
font-weight: 700;
}
#menu {
width: 100%;
background-color: #475050;
}
#menu i {
display: block;
}
#menu ul {
display: block;
text-align: center;
padding: 15px 0;
width: 50%;
position: fixed;
height: 20%;
background: #475050;
right: -50%;
line-height: normal;
transition: 1.7s;
}
#menu ul li {
padding: 0;
padding-top: 5px;
}
#menu ul li a {
color: white;
text-decoration: none;
padding: 0;
width: 100%;
height: 100%;
}
#menu-hide {
display: none;
}
#menu-show {
display: block;
}
.show-menu-btn {
height: 24px;
width: 25px;
background-color: yellow;
text-align: center;
border-radius: 4px;
margin-top: -38px;
margin-left: 90%;
cursor: pointer;
transition: left 0.4s ease;
position: absolute;
color: black;
float: right;
}
.show-menu-btn,
.hide-menu-btn {
display: block;
}
.show-menu-btn,
.hide-menu-btn {
transition: 0.4s;
font-size: 1.2rem;
cursor: pointer;
}
.hide-menu-btn i,
.show-menu-btn i {
padding-top: 2px;
}
.hide-menu-btn {
position: relative;
float: right;
margin-top: -35%;
height: 24px;
width: 25px;
background-color: black;
text-align: center;
border-radius: 4px;
color: white;
}
.show-menu-btn:hover,
.hide-menu-btn:hover {
color: crimson;
}
#menu i,
#check {
display: block;
}
#check {
position: absolute;
visibility: hidden;
z-index: 1111;
}
#check:checked ~ #menu ul{
right: 0%;
}
This is happening because you can't go back to parent elements once you are inside their children elements. So instead of
#check:checked ~ #menu ul{
right: 0%;
}
remove #menu because you are already inside #menu element, instead use this:
#check:checked ~ ul{
right: 0%;
}
Here is the working fiddle: https://jsfiddle.net/q9vsry40/2/
I am recreating the Google homepage for an assignment on TheOdinProject. I am almost finished, but the problem I am having is that I can't seem to get the hyperlink to be visible within the footer container. I tried changing the text color, and I checked the properties within the list item selector and I should be able to see the hyperlink "About Google" but I can't. What am I doing wrong?
body {
font-family: Arial;
}
#logo {
display: block;
width: 350px;
margin : 0 auto;
margin-top: 100px;
position: relative;
text-align: center;
}
input {
margin-top: -50;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
position: relative;
line-height: 2;
display: block;
width: 500px;
}
#logo img {
max-width: 100%;
}
.search_button {
margin-left: 800px;
margin-top: 5px;
display: inline;
float: left;
}
.feeling_lucky_button {
margin-right: 800px;
margin-top: 5px;
float: right;
display: inline;
}
#navbar {
background-color: #2d2d2d;
width: 100%;
height: 30px;
position: fixed;
left: 0;
top: 0;
}
#navbar ul {
margin-top: 5px;
padding-left: 8px;
}
li {
font-size: 13px;
padding: 5px 8px 5px 8px;
display: inline;
list-style-type: none;
}
#navbar ul li a {
font-weight: bold;
color: #BBBBBB;
text-decoration: none;
}
#navbar ul li a:hover {
color: white;
text-decoration: none;
}
#footer {
width: 100%;
height: 30px;
position: fixed;
border-top: 1px solid rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
}
#footer li {
margin-bottom: 5px;
padding-left: 8px;
}
#footer ul li a {
font-weight: bold;
color: red;
text-decoration: none;
}
#footer ul li a:hover {
color: red;
font-weight: bold;
text-decoration: none;
}
#footer ul li a:link {
color: red;
}
#footer ul li a:visited{
color: red;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Google Homepage Project</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="navbar">
<ul>
<li>Home</li>
</div>
<div id="logo">
<img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png">
</div>
<div id="searchbar">
<form action="#" method="POST">
<input type="text" name="searchbar">
</div>
<button class="search_button">Google Search</button>
<button class="feeling_lucky_button">I'm feeling lucky</button>
<div id="footer">
<ul>
<li><a href="http://www.google.com>About Google</a></li>
</ul>
</div>
</body>
</html>
Try this in footer. You missed double quote.
<li>About Google</li>
Fiddle:https://jsfiddle.net/ywu325mw/1/
In your footer:
<a href="http://www.google.com>About Google</a>
should be:
About Google
You forgot to close " the href attr
I'm having trouble with "a:active" not working at all. "a:hover" is working correctly on the other hand.
/* CSS Document */
#charset "utf-8";
/* Main HTML Elements */
body {
font-family: "Open Sans";
font-size: 14px;
background-color: #FFFFFF;
color: #1B242D;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
h1 {
font-size: 26px;
color: #FFFFFF;
}
h2 {
font-size: 20px;
color: #5EB59C;
}
h3 {
font-size: 18px;
color: #28BDEA;
}
h4 {
font-size: 14px;
color: #00ACDF;
}
/* Bart Specific */
#mainContainer {
position: absolute;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#topContainer {
position: fixed;
top: 0px;
width: 100%;
height: 150px;
background-color: #1B242D;
z-index: 1;
}
#topBar {
position: absolute;
top: 0px;
height: 5px;
width: 100%;
background-color: #00ACDF;
overflow: hidden;
}
#headerContainer {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
color: #FFFFFF;
}
#headerArrow {
position: absolute;
top: 150px;
right: 65px;
width: 0px;
height: 0px;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-top: 60px solid #1B242D;
}
#headerText {
position: absolute;
bottom: 0px;
left: 5px;
}
#TopNav {
position: absolute;
top: 5px;
right: 35px;
}
#TopNav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#TopNav ul li {
display: inline-block;
}
#TopNav ul li a {
display: block;
padding-left: 10px;
padding-bottom: 5px;
padding-right: 10px;
text-align: center;
color: #FFFFFF;
font-size: 16px;
text-decoration: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
/* #TopNav a:link {
text-decoration: none;
} */
/* #TopNav a:visited {
text-decoration: none;
color: #FFFFFF;
} */
#TopNav ul li a:hover {
text-decoration: none;
font-weight: !important;
color: #FFFFFF;
background-color: #28BDEA;
}
#TopNav ul li a:active {
text-decoration: none;
color: #FFFFFF;
background-color: #00ACDF;
}
#midContainer {
position: absolute;
top: 160px;
padding: 0px;
margin: 0px;
width: 100%;
}
#mainContent {
position: absolute;
width: auto;
right: 305px;
left: 10px;
padding-bottom: 10px;
}
#contentSeparator {
position: fixed;
width: 1px;
height: 80%;
right: 295px;
background-color: #8D9299;
}
#newsContainer {
position: absolute;
top: 50px;
right: 25px;
max-width: 250px;
min-width: 250px;
text-align: center;
}
#bottomContainer {
position: fixed;
bottom: 0px;
background-color: #8D9299;
width: 100%;
height: 25px;
color: #FFFFFF;
text-align: center;
}
#footerContent {
position: absolute;
top: 3px;
width: 100%;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="screen and (max-width: 801px)" href="/css/p_mobile.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 801px)" href="/css/p_def.css">
<link rel="stylesheet" type="text/css" href="/inc/fontawesome/css/font-awesome.min.css">
<script src="/inc/js/jquery-1.11.2.min.js"></script>
<script src="/inc/js/webfont.js"></script>
<title>Home</title>
</head>
<body>
<div id="mainContainer">
<div id="topContainer">
<div id="topBar"></div>
<div id="headerContainer">
<div id="headerArrow"></div>
<div id="headerText"><h1>Page Title Here</h1><h4>...a very warm welcome to my personal portfolio website.</h4></div>
<div id="TopNav">
<ul>
<li>Home</li>
<li>My Work</li>
<li>About Me</li>
<li>Contact Me</li>
<li>Documents</li>
</ul>
</div>
</div>
</div>
<div id="midContainer">
<div id="mainContent">
<p>Some Text Here</p>
</div>
<div id="contentSeparator"></div>
<div id="newsContainer">
<div id="news_1">
<p>Some news here...</p>
<hr>
<p>Some more news here...</p>
</div>
</div>
</div>
<div id="bottomContainer">
<div id="footerContent">
Copyright Notice Here
</div>
</div>
</div>
</body>
</html>
I have tried many times to fix this but it just won't work.
I have used this before and I set it up identically and it worked fine over there, but for some reason not here. Any clues?
Thanks!
MODIFICATION: I have now added full page CSS and HTML if this may help in solving of the problem. Thanks for your help!
The problem is this :
#TopNav a:hover {
text-decoration: none;
color: #FFFFFF;
background-color: #00ACDF;
}
#TopNav a:active {
text-decoration: none;
color: #FFFFFF;
background-color: #00ACDF;
}
If you observe there is no difference between the two states. They are the same. The active class actually works in this case but since it is the same as the hover state in terms of CSS, you observe no difference visually.
So, let's change the active state's CSS a bit. Lets add an orange background with black text on active state. So the class would be modified as follows :
#TopNav a:active {
text-decoration: none;
color: Black;
background-color: orange;
}
Now, you can observe that it works. Just observe that when you click the link, you can see the anchor links having an orange background while the text turns black as specified by our active class's CSS.
See this working below :
#TopNav {
position: absolute;
top: 5px;
right: 35px;
background-color: #1B242D;
}
#TopNav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#TopNav ul li {
display: inline-block;
}
#TopNav a {
display: block;
padding-left: 10px;
padding-bottom: 5px;
padding-right: 10px;
text-align: center;
color: #FFFFFF;
font-size: 16px;
text-decoration: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#TopNav a:link {
text-decoration: none;
}
#TopNav a:visited {
text-decoration: none;
color: #FFFFFF;
}
#TopNav a:hover {
text-decoration: none;
color: #FFFFFF;
background-color: #00ACDF;
}
#TopNav a:active {
text-decoration: none;
color: Black;
background-color: orange;
}
<div id="TopNav">
<ul>
<li>Home</li>
<li>My Work</li>
<li>About Me</li>
<li>Contact Me</li>
<li>Documents</li>
</ul>
</div>