This is the html code:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<img src="/static/sun1.png" id="sun">
<h2 id="text"><span>Help save our</span><br>Planet</h2>
<img src="/static/water1.png" id="water">
</section>
<!-- Page content -->
<div class="w3-content w3-padding" style="max-width:1564px">
And here is the code to the nav bar:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-top">
<div class="w3-bar w3-white w3-wide w3-padding w3-card">
<b>Taco</b> Project
<!-- Float links to the right. Hide them on small screens -->
<div class="w3-right w3-hide-small">
Home
Upload
Library
Search
Capabilities
Process
About
</div>
</div>
This is the CSS for the parallex section of the website. I believe the problem has something to do with something within the parallex being of higher priority than the navigation bar. A fix I did that stopped the text from going above the nav bar is by changing the z index of the Navbar to 999. I still have the error of not being able to click on the Navbar once I start scrolling as well as it going below the transition between the parallex and the rest of the website :
#header{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 10px 10px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10000;
}
#header .nav{
color: #fff;
font-weight: 700;
font-size: 2em;
text-decoration: none;
}
#header .logo{
color: #094b65;
font-weight: 700;
font-size: 2em;
text-decoration: none;
padding-right: 400px;
}
#header ul{
display: flex;
justify-content: center;
align-items: center;
}
#header ul li{
list-style: none;
margin-left: 20px;
}
#header ul li a{
text-decoration: none;
padding: 6px 15px;
color: #094b65;
border-radius: 20px;
}
#header ul li a:hover,
#header ul li a.active{
background: #094b65;
color: #fff;
}
body {
background: #01191d;
min-height: 1500px;
}
section {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
section:before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #01191d, transparent);
z-index: 10000;
}
section:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
mix-blend-mode: color;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section #text{
position: relative;
color: #094b65;
font-size: 10vw;
text-align: center;
line-height: 0.55em;
font-family: 'Rancho', cursive;
transform: translateY(-50%);
}
section #text span{
color: #094b65;
font-size: 0.20em;
letter-spacing: 2px;
font-weight: 400;
font-family: 'Poppins', sans-serif;
}
#text {
position: relative;
color: #ffffff;
font-size: 10em;
z-index: 1;
}
#road {
z-index: 2;
}
p, h3{
color: white;
}
.sec {
position: relative;
padding: 100px;
}
.sec h2{
font-size: 3.5em;
color: #fff;
margin-bottom: 10px;
}
.sec p{
font-size: 1em;
color: #fff;
}
It seems like the issue is that the navbar is going below the parallex, but that doesn't really make sense since I can view it the whole time.
video demo of the page
Its probably z-index. Since the banner section has stacked layers it should have z-index set. You need to set a higher z-index for .w3-top. May be add .w3-top{z-index:999} to the css and check.
Try to pass the entire nav bar (all elements supposed to be clickable) in tags and add
The function javascript_function() has to contain everything you want to do after the click.
Related
So i have made a website with HTML and CSS. It has different effects like the parallax effect(a very simple version of it), transparent navbar, and now I am trying to make my Navbar responsive. Everything works, but my hamburger menu is very far to the left and when I find a way to move it, it doesnt work after i moved it.
As you can see it is very close to the top of the screne and so far to the left that it is past the logo. I want it to stay to the right even if i made the screen smaller ofr bigger, like it moves with the screen when i move it.
This is my css code:
#font-face {
font-family: 'Poppins';
src: url(Fonts/Poppins-Regular.ttf
}
#font-face {
font-family: 'Comfortaa';
src: url(Fonts/Comfortaa-VariableFont_wght.ttf);
}
#font-face {
font-family: 'DancingScript';
src: url(Fonts/DancingScript-VariableFont_wght.ttf);
}
* {
padding: 0;
margin: 0;
color: #A6808C;
box-sizing: border-box;
}
body {
background-color: #565264;
font-family: Poppins;
}
html {
overflow: scroll;
overflow-y: hidden;
}
::-webkit-scrollbar {
width: 0%;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 10px 90px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.4);
border-bottom: 0px solid #fff;
z-index: 9999
}
nav .logo {
padding: -22px 20px;
height: 50px;
float: left;
}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li a {
line-height: 60px;
color: #fff;
padding: 12px 30px;
text-decoration: none;
font-size: 25px;
}
nav ul li a:hover {
background: rgba(0,0,0,0.1);
border-radius: 5px;
}
.text {
font-size: 2rem;
padding: 2rem;
background-color: #565264;
color: whitesmoke;
}
.title {
font-size: 7rem;
color: whitesmoke;
text-shadow: 0 0 5px black;
}
.background {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
transform: translateZ(-10px) scale(3);
background-repeat: no-repeat;
}
header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
.hamburger {
position: relative;
width: 30px;
height: 4px;
background: #fff;
border-radius: 10px;
cursor: pointer;
z-index: 2;
transition: 0.3s;
}
.hamburger:before, .hamburger:after {
content: "";
position: absolute;
height: 4px;
right: 0;
background: #fff;
border-radius: 10px;
transition: 0.3s;
}
.hamburger:before {
top: -10px;
width: 20px;
}
.hamburger:after {
top: 10px;
width: 20px;
}
.toggle-menu {
position: absolute;
width: 30px;
height: 100%;
z-index: 3;
cursor: pointer;
opacity: 0;
}
.hamburger, .toggle-menu {
display: none;
}
.navigation input:checked ~ .hamburger {
background: transparent;
}
.navigation input:checked ~ .hamburger::before {
top: 0;
transform: rotate(-45deg);
width: 30px;
}
.navigation input:checked ~ .hamburger::after {
top: 0;
transform: rotate(45deg);
width: 30px;
}
.navigation input:checked ~ .menu {
right: 0;
box-shadow: -20px 0 40px rgba(0,0,0,0.3);
}
#media screen and (max-width: 1062px) {
.hamburger, .toggle-menu {
display: block;
}
.header {
padding: 10px 20px;
}
nav ul {
justify-content: start;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
right: -300px;
background-color: #565264;
width: 300px;
height: 100%;
padding-top: 65px;
}
.menu li {
width: 100%;
}
.menu li a, .menu li a:hover {
padding: 30px;
font-size: 24px;
box-shadow: 0 1px 0 rgba(112,102,119,0.5) inset;
}
}
<head>
<meta charset="utf-8">
<meta name="veiwport" content="width=device-width, initalscale=1.0">
<Title>Test</Title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<nav>
<div class="logo">
<a href="index.html">
<img src="Pictures\Logo DesignK whitegreen.png" alt="DesignK" height="50px" width="200px">
</a>
</div>
<div class="navigation">
<input type="checkbox" class="toggle-menu">
<div class="hamburger"></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Feedback</li>
</ul>
</div>
</nav>
<div class="wrapper">
<header>
<img src="Pictures/LakeandMoutains.jpg" class="background">
<h1 class="title">Welcome!</h1>
</header>
<section class="text">
<h3>Essay on Mountains</h3>
</section>
</div>
</body>
Does anyone know how to make the hamburger menu move to the right side of the screen?
Update your .hamburger, .toggle-menu styles like this
.hamburger, .toggle-menu {
display: block;
position: absolute;
right: 30px;
}
Update the value of right according to your need.
You could always use flexbox. The following lines of code will display this on the right hand side:-
nav {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.navigation {
margin-left: auto;
}
Add this to your navigation class:
.navigation{
position:relative;
}
and then this to your hamburger menu to make it stick to the right.
.hamburger{
position:relative;
right:8%;
}
The position absolute will make the hamburger-menu stick relative to the navigation bar and right 8% will stick it to the right.
You must understand the importance of HTML structure and positioning because this is the problem in your HTML.
To fix your problem, you need to put the burger menu and the check box in one container and then position the container.
The problem now is that you are positioning every part individually and their width and height are not properly set.
try to follow the steps I mentioned then let us know if you can do it or not.
Looked up hover effects on navigation bars on YouTube and copied the code but when I try to click the elements on the navigation bar, it won't work. The cursor also doesn't change. It looks and operates just like another text.
This is the video I used: https://www.youtube.com/watch?v=1wfeqDyMUx4
Is there something wrong with my code?
#import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Work+Sans:wght#400;500;700&display=swap');* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Work Sans', sans-serif;
}
body {
min-height: 100vh;
background: linear-gradient(#98c9cd 3%, #e6c3c1 60%, #e4989e 100% )
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: white;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul {
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 20px;
}
header ul li a {
text-decoration: none;
padding: 6px 15px;
color: white;
border-radius: 20px;
}
header ul li a:hover,
header ul li a.active {
background: white;
color: #2b1055;
}
section {
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
}
section::before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top,#e4989e,transparent);
z-index: 1290;
}
#text {
font-family: 'Fjalla One', sans-serif;
mix-blend-mode: screen;
position: absolute;
color: white;
white-space: nowrap;
text-align: center;
font-size: 7.5.vw;
font-size: 4em;
z-index: 9;
}
#btn {
text-decoration: none;
display: inline-block;
padding: 8px 30px;
border-radius: 40px;
background: white;
color: #2b1055;
font-size: 1.5em;
transform: translateY(100px);
}
.sec {
position: relative;
padding: 100px;
background: #e4989e;
}
.sec h2 {
font-size: 2em;
margin-bottom: 10px;
color: white;
font-weight: 700;
}
p #text1 {
color: #fff;
font-weight: 400;
font-size: 1.5em;
}
<!doctype HTML>
<html>
<head>
<title>Comfort Crate</title>
<link rel="stylesheet" type="text/css" href="styles1.css">
</head>
<body>
<header>
<img src="finallogo.png" width="10%" height="18%" style="margin-top: 20px;">
<ul>
<li>Home</li>
<li>About</li>
<li>Creations</li>
<li>Contact</li>
</ul>
</header>
<section>
<h2 id="text">WELCOME TO COMFORT CRATE!</h2>
Click Here
</section>
<div class="sec">
<h2>About us</h2>
<p id="text1" style="color: white;"">Comfort Crate is a start-up company founded in 2022 by seven students from 12-Dubins of Pasig City Science High School. The notion of entrepreneurs and consumers as mutual benefactors inspired the team to come up with potential products that will make self-care worth spending, guilt-free. Driven by the desire to uplift people’s spirits amidst adversities, each set from Comfort Crate was curated for all people in all situations. The group believes that money cannot buy happiness, but it can buy you a crate that can help you stir up your own happiness.
<br><br></p>
</div>
</body>
</html>
It's because section tag fills the whole page and the header stucks under it. So your mouse always hovers on section. You can see that by adding z-index: 9999; to header.
when using position: absolute, your header element will share the space with its other siblings like normally it would. I would suggest that you add margin top to the section element to that it would get out of the way of the header.
#import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Work+Sans:wght#400;500;700&display=swap');* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Work Sans', sans-serif;
}
body {
min-height: 100vh;
background: linear-gradient(#98c9cd 3%, #e6c3c1 60%, #e4989e 100% )
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: white;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul {
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 20px;
}
header ul li a {
text-decoration: none;
padding: 6px 15px;
color: white;
border-radius: 20px;
}
header ul li a:hover,
header ul li a.active {
background: white;
color: #2b1055;
}
section {
margin-top: 100px;
position: relative;
width: 100%;
height: 100vh;
padding: 50px 100px 100px;
display: flex;
justify-content: center;
align-items: center;
}
section::before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top,#e4989e,transparent);
z-index: 1290;
}
#text {
font-family: 'Fjalla One', sans-serif;
mix-blend-mode: screen;
position: absolute;
color: white;
white-space: nowrap;
text-align: center;
font-size: 7.5.vw;
font-size: 4em;
z-index: 9;
}
#btn {
text-decoration: none;
display: inline-block;
padding: 8px 30px;
border-radius: 40px;
background: white;
color: #2b1055;
font-size: 1.5em;
transform: translateY(100px);
}
.sec {
position: relative;
padding: 100px;
background: #e4989e;
}
.sec h2 {
font-size: 2em;
margin-bottom: 10px;
color: white;
font-weight: 700;
}
p #text1 {
color: #fff;
font-weight: 400;
font-size: 1.5em;
}
<!doctype HTML>
<html>
<head>
<title>Comfort Crate</title>
<link rel="stylesheet" type="text/css" href="styles1.css">
</head>
<body>
<header>
<img src="finallogo.png" width="10%" height="18%" style="margin-top: 20px;">
<ul>
<li>Home</li>
<li>About</li>
<li>Creations</li>
<li>Contact</li>
</ul>
</header>
<section>
<h2 id="text">WELCOME TO COMFORT CRATE!</h2>
Click Here
</section>
<div class="sec">
<h2>About us</h2>
<p id="text1" style="color: white;"">Comfort Crate is a start-up company founded in 2022 by seven students from 12-Dubins of Pasig City Science High School. The notion of entrepreneurs and consumers as mutual benefactors inspired the team to come up with potential products that will make self-care worth spending, guilt-free. Driven by the desire to uplift people’s spirits amidst adversities, each set from Comfort Crate was curated for all people in all situations. The group believes that money cannot buy happiness, but it can buy you a crate that can help you stir up your own happiness.
<br><br></p>
</div>
</body>
</html>
I followed a tutorial about sticky navbar with pure css without javascript. The problem is that the sticky navigation bar is not fixed at the top of the page when i scroll down. Under this sticky navbar I have 3 other sections. Every time I scroll down the page that the navbar goes under sections and does not work anymore. In the header I have a full-width image and I have some text and a button on it.
Here is my code of navbar in HTML:
header {
margin: auto;
position: relative;
width: 100%;
height: 100vh;
background: linear-gradient(black, transparent, black), url(images/architecture2.jpg);
background-size: cover;
background-position: center;
display: table;
top: 0;
}
nav {
position: absolute;
width: 100%;
height: 50px;
background: rgba(0, 0, 0, .1);
position: sticky;
top: 0;
}
nav ul {
display: flex;
margin: 0;
padding: 0 100px;
float: right;
}
nav ul li {
list-style: none;
}
nav ul li a {
display: block;
color: #fff;
padding: 0 15px;
text-decoration: none;
text-transform: capitalize;
font-weight: bold;
line-height: 90px;
}
.intro .inner {
margin-top: 200px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
z-index: 10;
color: #fff;
}
.content h1 {
font-weight: 800;
color: #fff;
text-transform: uppercase;
font-size: 3.5rem;
}
.content p {
padding: 0;
margin-top: -35px;
margin-left: -1px;
color: #fff;
font-size: 2.2rem;
padding-bottom: 35px;
}
.btnD1 {
border: 2px solid #fff;
color: #000;
background: #fff;
border-radius: 50px;
padding: 16.5px 50px;
font-size: 1.15rem;
font-weight: 500;
text-decoration: none;
}
<html>
<head>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu">
<ul>
<li>Acasa</li>
<li>Despre Noi</li>
<li>Calatorii</li>
<li>Contact</li>
<li>SignIn</li>
</ul>
</div>
</nav>
<div class="intro">
<div class="inner">
<div class="content">
<h1>Călătoreşte cu noi în jurul lumii</h1>
<p>Destinaţia visată este la un click distanţă!</p>
<a class="btnD1" href="#">Rezervă acum</a>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
Sorry for my bad english.
Thanks!
The reason why it behave is the use of z-index in the .intro .inner class. You will need to set the z-index: 11; on the .nav class for it to appear on top of everything.
header {
margin: auto;
position: relative;
width: 100%;
height: 100vh;
background: linear-gradient(black, transparent, black), url(images/architecture2.jpg);
background-size: cover;
background-position: center;
display: table;
top: 0;
}
nav {
position: absolute;
width: 100%;
height: 50px;
background: rgba(0, 0, 0, .8);
position: sticky;
top: 0;
z-index: 11;
}
nav ul {
display: flex;
margin: 0;
padding: 0 100px;
float: right;
}
nav ul li {
list-style: none;
}
nav ul li a {
display: block;
color: #fff;
padding: 0 15px;
text-decoration: none;
text-transform: capitalize;
font-weight: bold;
line-height: 90px;
}
.intro .inner {
margin-top: 200px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
z-index: 10;
color: #fff;
}
.content h1 {
font-weight: 800;
color: #fff;
text-transform: uppercase;
font-size: 3.5rem;
}
.content p {
padding: 0;
margin-top: -35px;
margin-left: -1px;
color: #fff;
font-size: 2.2rem;
padding-bottom: 35px;
}
.btnD1 {
border: 2px solid #fff;
color: #000;
background: #fff;
border-radius: 50px;
padding: 16.5px 50px;
font-size: 1.15rem;
font-weight: 500;
text-decoration: none;
}
<html>
<head>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu">
<ul>
<li>Acasa</li>
<li>Despre Noi</li>
<li>Calatorii</li>
<li>Contact</li>
<li>SignIn</li>
</ul>
</div>
</nav>
<div class="intro">
<div class="inner">
<div class="content">
<h1>Călătoreşte cu noi în jurul lumii</h1>
<p>Destinaţia visată este la un click distanţă!</p>
<a class="btnD1" href="#">Rezervă acum</a>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
If you're not sure what other z-index values you gonna use. Most people set it to 999 for things that supposed to appear on top of everything at all times.
The nav is sticky, but only within it's parent (which is the .header). To fix this, simply make the .header sticky - this way it will be sticky as long as it's parent (which is .wrapper) is being scrolled.
And also give it a higher z-index than it's siblings (.intro inner has z-index: 10), or it will come underneath the intro inner when scrolled pass it :
header {
position: sticky;
top: 0;
z-index: 11;
}
The problem was that sticky propriety. i removed that from the nav and i added a transition and z-index as well.
nav{
position: fixed;
width: 100%;
height: 50px;
background: rgba(0,0,0,.2);
top: 0;
z-index:999;
transition: 0.5s;
}
nav ul{
display: flex;
margin: 0;
padding: 0 100px;
float:right;
}
nav ul li{
list-style: none;
}
nav ul li a{
display: block;
color: #fff;
padding: 0 15px;
text-decoration: none;
text-transform: capitalize;
font-weight: bold;
line-height: 90px;
}
Thank you all!
Make your wrapper's Height auto. this will fix your issue.
I want to left align text in a drop-down menu but I'm having some problems. I have this HTML
<nav>
<a>Vote</a>
<a>Search</a>
<a>About</a>
</nav>
and this CSS for the drop down menu
nav {
display: none;
width: 30rem;
padding: 0rem;
background-color: red;
position: absolute;
right: 0%;
top: 100%;
text-align: left;
}
.nav-open {
display: block;
}
nav a {
display: block;
width: 100%;
text-align: left;
padding: 1.4rem 1.6rem;
text-decoration: none;
cursor: pointer;
font-size: 1.2rem;
color: #000;
}
But as you can see, when you click the menu icon the text isn't even visible. Interestingly, when I change:
text-align: left;
to
text-align: center;
I can see the text again, but it is not aligned where i want it. How do I left align my text and keep it visible?
$('.menu-btn').click(function() {
$('nav').toggleClass('nav-open');
});
style* {
margin: 0 auto;
font-family: sans-serif;
}
body {
margin: 0 auto;
font-family: Benton Sans, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
header {
width: 100%;
background-color: orange;
text-align: center;
position: relative;
}
#pageTitle {
display: flex;
padding: 10px;
}
#pageTitle h2 {
justify-content: center;
/* align horizontal */
align-items: center;
width: 95%;
}
.menu-btn {
position: absolute;
display: inline-block;
cursor: pointer;
}
.menu-btn div {
position: absolute;
left: 100%;
top: 0%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 20px;
height: 2px;
margin: 4px 0;
background: #989da1;
z-index: 99;
}
nav {
display: none;
width: 30rem;
padding: 0rem;
background-color: red;
position: absolute;
right: 0%;
top: 100%;
text-align: left;
}
.nav-open {
display: block;
}
nav a {
display: block;
width: 100%;
text-align: left;
padding: 1.4rem 1.6rem;
text-decoration: none;
cursor: pointer;
font-size: 1.2rem;
color: #000;
}
nav a:hover {
background-color: #111;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="pageTitle">
<h2>Page Title</h2>
<div class="mobile-nav">
<button class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span></span>
</button>
<nav>
<a>Vote</a>
<a>Search</a>
<a>About</a>
</nav>
</div>
</div>
</header>
The problem comes from the rem unit you are using when giving width to your nav. You should use vw viewport width. This is relative from the screen width going from 0 to 100 turning the viewport width into a percentage.
Hope this helps
$('.menu-btn').click(function() {
$('nav').toggleClass('nav-open');
});
style* {
margin: 0 auto;
font-family: sans-serif;
}
body {
margin: 0 auto;
font-family: Benton Sans, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
header {
width: 100%;
background-color: orange;
text-align: center;
position: relative;
}
#pageTitle {
display: flex;
padding: 10px;
}
#pageTitle h2 {
justify-content: center;
/* align horizontal */
align-items: center;
width: 95%;
}
.menu-btn {
position: absolute;
display: inline-block;
cursor: pointer;
}
.menu-btn div {
position: absolute;
left: 100%;
top: 0%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 20px;
height: 2px;
margin: 4px 0;
background: #989da1;
z-index: 99;
}
nav {
display: none;
width: 100vw;
padding: 0rem;
background-color: red;
position: absolute;
right: 0%;
top: 100%;
text-align: left;
}
.nav-open {
display: block;
}
nav a {
display: block;
width: 100%;
text-align: left;
padding: 1.4rem 1.6rem;
text-decoration: none;
cursor: pointer;
font-size: 1.2rem;
color: #000;
}
nav a:hover {
background-color: #111;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="pageTitle">
<h2>Page Title</h2>
<div class="mobile-nav">
<button class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span></span>
</button>
<nav>
<a>Vote</a>
<a>Search</a>
<a>About</a>
</nav>
</div>
</div>
</header>
As others have pointed out already, the text is actually aligned left, but your screen size might prevent it from showing up due to the big width of your menu.
Try changing the width of your nav element to something relative to the page width, like 80%:
nav {
display: none;
width: 80%;
padding: 0rem;
background-color: red;
position: absolute;
right: 0%;
top: 100%;
text-align: left;
}
https://jsfiddle.net/1y8n08aq/1/
I am trying to set up the footer, but I'm unable to remove the lines under the text. I also would like to change the color of the text. I tried using text decoration:none under .footer ul, but that was unsuccessful.
h2 {
text-align: center;
font-family: "Courier New";
color: beige;
font-size: 50px;
font-weight: 200;
text-shadow: -2px -2px black;
margin-bottom: -50px;
position: relative;
}
.head-link {
text-decoration: none;
color: aliceblue;
}
.head-link:hover {
margin: 20px auto 20px;
position: relative;
color: darkgoldenrod;
}
header {
background-image: url(https://i.imgur.com/xD3POCF.jpg);
position: absolute;
background-position: center;
max-width: 2000px;
width: 100%;
height: 100%;
top: 0;
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
bottom: 40px;
}
.header-image {
background-size: cover;
}
.dropbtn {
background-color: transparent;
color: darkblue;
padding: 10px;
cursor: pointer;
font-family: monospace;
top: 0;
font-size: 15px;
width: 120px;
height: 50px;
border-color: black;
border-style: double;
align-content: center;
text-align: center;
margin-top: -10px;
}
.dropdown {
display: inline-block;
position: relative;
margin-left: 15px;
}
.dropdown-content {
padding: 12px;
position: absolute;
font-family: monospace;
background-color: transparent;
z-index: 1;
display: none;
min-width: 10px;
text-align: left;
left: 0;
}
.dropbtn:hover {
color: white;
}
.dropdown-content a {
color: #04116f;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 13px;
}
.dropdown-content a:hover {
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
text-decoration: underline;
}
.sidebar {
display: block;
position: relative;
top: -650px;
bottom: 0px;
left: -30px;
width: 120px;
padding: 10px;
background: transparent;
z-index: 0;
}
.sidebar ul {
cursor: pointer;
list-style: none;
color: white;
line-height: 2;
}
body {
margin: 0px;
top: 0;
width: 100%;
max-height: 10%;
background-image: url(http://i.imgur.com/yiMoYpV.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 20px 50px center;
background-attachment: fixed;
}
.content {
display: block;
margin-right: 0px;
padding: 0px;
margin-bottom: 700px;
position: relative;
max-width: 1500px;
max-height: 500px;
}
p {
display: block;
padding: 40px;
position: relative;
max-width: 500px;
max-height: 500px;
width: 100%;
left: 50%;
height: 200px;
top: 120px;
font-family: monospace;
font-size: 15px;
line-height: 2;
margin-bottom: -70px;
color: goldenrod;
text-align: left;
}
.footer {
margin: 100px 0 0 0;
display: flex;
flex-flow: row;
justify-content: center;
padding-bottom: 2px;
align-content: space-between;
background: transparent;
overflow: hidden;
}
.footer ul {
text-align: center;
list-style: none;
display: inline-flex;
color: white;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<header>
<h2 style="bottom: -130px">
<a href="#" class=h ead-link> A B E L</a>
</h2>
<div class="dropdown" style="float;right">
<button class="dropbtn">Menu</button>
<div class="dropdown-content" style="right;0">
About
Portfolio
Contact
</div>
</div>
<div class="title"></div>
<title>A B E L </title>
</header>
<body>
<div id="hl-content" class="content"></div>
<p>
<span style="color:navajowhite">
<b>Hello, Welcome to my website.</b>
</span>
<BR></BR>
My name is Abel, a senior college student currently residing in the Bay Area. This portfolio will give you a good background about me including my specialties, expertise and even hobbies. As you can probably tell from the background pictures, I like traveling
and taking photos!
</p>
<p>This is my first ever website that I created using HTML and CSS, and it's a pleasure to finally be able to share it with you. I am happy to receive any feedback, recommendations or opportunities from you, so don't hesitate to contact me.</p>
<div class="footer">
<ul>
<li> About</li>
<li>Portfolio</li>
<li> Contact </li>
</ul>
</div>
</body>
</html>
As you can see text decoration and color doesn't work.
How can I fix this?
.footer > ul > li > a {
color: white;
text-decoration: none;
}
Try this.
You need to style the links in your footer explicitly.
.footer ul a {
text-decoration:none;
}
You need to add this css :
.footer ul li a {
text-decoration:none;
}
I've tried my best, this might help as per your requirement(underline and color):
add this in your code,
.footer ul li a {
text-decoration: none;
color: tan;
padding: 5px;
}
.footer ul li a:hover {
text-decoration: underline;
}
appreciate if it is useful enough.