I've read other questions before and the best answer I saw was to wrap it in an anchor tag. like
<i class="fa fa-user" style="font-size:36px"></i>
but that doesn't work. My fa object turns blue so it works as a anchor object but I can't click it.
I can't find out why it isn't working. I thought maybe something with my html?
Here is my code:
<html>
<head>
<title>'.$title.'</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<link href="core/assets/css/main.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header id="header">
<div class="container">
<h1><i class="fa fa-cloud" style="font-size:36px"></i>DataBaas</h1>
</div>
<div class="box" onclick="alert("You clicked me !")">
<i class="fa fa-user" style="font-size:36px"></i>
</div>
</header>
<div class="content">
<div class="article">
'.$content().'
<div>
</div>
</body>
</html>
I want the fa-user to be clickable and link to a other page. I tried onclick as you see in my code to check if that was working but that also won't work.
https://jsfiddle.net/cvvcxbnh/
Add position relative to box div
that's caused by absolute positioning of container, however adding z-index solves the problem but z-index works only on positioned elements (position:absolute, position:relative, or position:fixed)
body {
margin: 0;
padding: 0;
background-color: #f6f9fc;
}
#header {
z-index: 2;
position: fixed;
width: 100%;
height: 100px;
background: #fff;
box-shadow: 0px 1px 10px #888888;
}
p {
font-family: Arial;
}
#header h1 {
font-size: 2.4rem;
color: #3c8be4;
font-family: sans-serif;
}
header .container {
margin: 0 auto;
position: absolute;
text-align: center;
width: 100%;
}
.content {
padding-top: 100px;
}
.article {
margin: 100px 15%;
position: relative;
overflow-wrap: break-word;
animation-duration: 2s;
animation-name: animation1;
animation-timing-function: ease;
}
header .box {
float: right;
position:relative;
margin-top: 33px;
margin-right: 33px;
color: #4e4e4e;
text-decoration: none;
cursor:pointer;
z-index: 2;
}
.article h1{
color: #4e4e4e;
font-family: Sans-serif;
font-size: 4rem;
line-height: 0px;
}
.article p{
font-size: 1.5rem;
color: #535353;
display: inline-block;
}
.login h1{
font-size: 2rem;
}
.login {
float: right;
box-shadow: 0px 1px 10px #888888;
width: 300px;
position: relative;
border-radius: 15px;
padding: 20px;
display: inline-block;
text-align: center;
background-color: #fff;
}
.inlogform {
margin-top: 40px;
}
.login h3,h4 {
font-family: sans-serif;
font-size: 0.8rem;
line-height: 0;
margin-bottom: 5px;
text-decoration: none;
}
.login h4{
margin-top: 30px;
color: red;
}
a {
text-decoration: none;
color: inherit;
}
input[type=text] {
width: 90%;
margin: 5px 0;
padding: 8px;
border: 1px solid gray;
border-radius: 10px;
font-size: 1rem;
margin-top: 0;
}
input[type=password] {
width: 90%;
margin: 5px 0;
padding: 8px;
border: 1px solid gray;
border-radius: 10px;
font-size: 1rem;
}
input[type=submit] {
width: 90%;
margin: 20px;
padding: 8px;
border: 0px solid gray;
border-radius: 10px;
font-size: 1rem;
background-color: 3c8be4;
color: white;
margin-bottom: 5px;
}
#media (min-width: 600px) {
#keyframes animation1 {
0% {margin:0px 15%;opacity: 0;}
100% {margin: 100px 15%; opacity: 1;}
}
}
/*Mobiele Weergave*/
#media (max-width: 599px) {
#header .container {
width: 100%;
}
#header {
height: 80px;
}
#header h1 {
font-size: 30px;
float: left;
margin-left: 5%;
}
.content {
padding-top: 80px;
}
.article{
margin: 60px 5%;
}
.register {
margin-left: 5%;
}
#header .box {
margin-top: 22px;
margin-right: 22px;
}
.login {
float:left;
}
#keyframes animation1 {
0% {margin:0px 5%;opacity: 0;}
100% {margin: 60px 5%; opacity: 1;}
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<header id="header">
<div class="container">
<h1><i class="fa fa-cloud" style="font-size:36px"></i>DataBaas</h1>
</div>
<div class="box" >
<i class="fa fa-user" style="font-size:36px"></i>
</div>
</header>
<div class="content">
<div class="article">
'.$content().'
<div>
</div>
Here you should add "href" value inside "a" tag. And in order to open to other page just use target="_blank" inside "a" tag.Hope it will work.
<div class="container">
<h1><i class="fa fa-cloud" style="font-size:36px"></i>DataBaas</h1>
</div>
<div class="box">
<a href="#" target="_blank"><i class="fa fa-user" style="font-size:36px;
color:black;"></i></a>
</div>
Related
https://sagarj2021.github.io/first-website/
This is my website but it only open fullscreen in destop of my laptop. It does not open in fullscreen in smartphones destop as well as in normal search. (Actully in smartphone right side is 50% of white blank color). I dont know how to fix this issue..
I have given my code also,
so please can you help mi ?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.hero {
height: 100vh;
width: 100%;
background-color: black;
background-size: cover;
background-position: center;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 45px;
padding-left: 8%;
padding-right: 8%;
}
.logo {
color: white;
font-size: 35px;
letter-spacing: 1px;
cursor: pointer;
}
span {
color: red;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 10px 25px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
text-transform: capitalize;
}
nav ul li a:hover {
color: red;
transition: .4s;
}
.btn {
background-color: red;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 10px 25px;
border-radius: 30px;
transition: transform .4s;
}
.btn:hover {
transform: scale(1.2);
}
.content {
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
}
h1 {
color: white;
margin: 20px 0px 20px;
font-size: 75px;
}
h3 {
color: white;
font-size: 25px;
margin-bottom: 50px;
}
h4 {
color: #fcfc;
letter-spacing: 2px;
font-size: 20px;
}
.newslatter form {
width: 380px;
max-width: 100%;
position: relative;
}
.newslatter form input:first-child {
display: inline-block;
width: 100%;
padding: 14px 130px 14px 15px;
border: 2px solid #f9004d;
outline: none;
border-radius: 30px;
}
.newslatter form input:last-child {
position: absolute;
display: inline-block;
outline: none;
border: none;
padding: 10px 30px;
border-radius: 30px;
background-color: #f9004d;
color: white;
box-shadow: 0px 0px 5px #000, 0px 0px 15px #858585;
top: 6px;
right: 6px;
}
.about {
width: 100%;
padding: 100px 0px;
background-color: #191919;
}
.about img {
height: auto;
width: 430px;
}
.about-text {
width: 550px;
}
.main {
width: 1130px;
max-width: 95%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
}
.about-text h2 {
color: white;
font-size: 75px;
text-transform: capitalize;
margin-bottom: 20px;
}
.about-text h5 {
color: white;
letter-spacing: 2px;
font-size: 22px;
margin-bottom: 25px;
text-transform: capitalize;
}
.about-text p {
color: #fcfc;
letter-spacing: 1px;
line-height: 28px;
font-size: 18px;
margin-bottom: 45px;
}
button {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
transition: .4s;
}
button:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
.service {
background: #101010;
width: 100%;
padding: 100px 0px;
}
.title h2 {
color: white;
font-size: 75px;
width: 1130px;
margin: 30px auto;
text-align: center;
}
.box {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
.card {
height: 365px;
width: 335px;
padding: 20px 35px;
background: #191919;
border-radius: 20px;
margin: 15px;
position: relative;
overflow: hidden;
text-align: center;
}
.card i {
font-size: 50px;
display: block;
text-align: center;
margin: 25px 0px;
color: #f9004d;
}
h5 {
color: white;
font-size: 23px;
margin-bottom: 15px;
}
.pra p {
color: #fcfc;
font-size: 16px;
line-height: 27px;
margin-bottom: 25px;
}
.card .button {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 9px 22px;
border-radius: 30px;
transition: .4s;
}
.card .button:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
.contact-me {
width: 100%;
height: 290px;
background: #191919;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.contact-me p {
color: white;
font-size: 30px;
font-weight: bold;
margin-bottom: 25px;
}
.contact-me .button-two {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
transition: .4s;
}
.contact-me .button-two:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
footer {
position: relative;
width: 100%;
height: 400px;
background: #101010;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
footer p:nth-child(1) {
font-size: 30px;
color: white;
margin-bottom: 20px;
font-weight: bold;
}
footer p:nth-child(2) {
color: white;
font-size: 17px;
width: 500px;
text-align: center;
line-height: 26px;
}
.social {
display: flex;
}
.social a {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: #f9004d;
border-radius: 50%;
margin: 22px 10px;
color: white;
text-decoration: none;
font-size: 20px;
}
.social a:hover {
transform: scale(1.3);
transition: .3s;
}
.end {
position: absolute;
color: #f9004d;
bottom: 35px;
font-size: 14px;
}
<!--Sagar personal website-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="personalprofile.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/34d51c031e.js" crossorigin="anonymous"></script>
<title>Personal website</title>
</head>
<body>
<div class="hero">
<nav>
<h2 class="logo">Portfo<span>lio</span></h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
Blog
</nav>
<div class="content">
<h4>hello, my name is</h4>
<h1>Sagar<span>Jadhav</span></h1>
<h3>I'm a Web Developer.</h3>
<div class="newslatter">
<form action="">
<input type="email" name="email" id="mail" placeholder="Enter Your Email">
<input type="submit" name="submit" value="Let start">
</form>
</div>
</div>
</div>
<!---About section start-->
<section class="about">
<div class="main">
<img src="#" alt="">
<div class="about-text">
<h2>About Me</h2>
<h5>Developer & Designer</h5>
<p>
I am a front-end web developer. I can provide clean code and pixel perfect design. I also make the website more & more interactive with web animations. I can provide clean code and pixel perfect design. I also make the website more & more interactive
with web animations. A responsive design makes your website accessible to all users, regardless of their devices.
</p>
<button type="button">Let's Talk</button>
</div>
</div>
</section>
<!--Service section start-->
<div class="service">
<div class="title">
<h2>Our Services</h2>
</div>
<div class="box">
<div class="card">
<i class="fas fa-bars"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<i class="fa-regular fa-user"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<i class="fa-regular fa-bell"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
</div>
</div>
<!--Contact Me-->
<div class="contact-me">
<p>For any help.</p>
<a class="button-two" href="#">Contact Me</a>
</div>
<!--Footer start-->
<footer>
<p>Sagar Jadhav</p>
<p>For coding and syber security related update follow my blog chennal - please click on the link below to follow me:
</p>
<div class="social">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-linkedin"></i>
</div>
<p class="end">CopyRight By Sagar Jadhav</p>
</footer>
</body>
</html>
Replace this code in your code
.title h2 {
color: white;
font-size: 75px;
width: 130px;
margin: 30px auto;
text-align: center;
}
I am trying to build my personal webpage but simply cant manage to make my footer not cover the two buttons.
This problem only occurs on my laptop. As soon as I switch to my external monitor, the two buttons arent covered anymore.
I have tried inserting html{overflow-y: scroll;} to my css but it doesnt seem to work :(
Any help would be awesome! Thank you.
HTML:
#import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
* {
padding: 0;
margin: 0;
}
body {
background-color: ghostwhite;
background-size: cover;
padding: 0;
margin: 0;
}
.navbar {
height: 80px;
width: 100%;
background-color: #808080;
}
.logo {
width: 140px;
height: auto;
padding: 15px 50px;
}
.navbar ul {
float: right;
margin-right: 20px;
}
.navbar ul li {
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 2px 6px;
font-family: 'Roboto', sans-serif;
transition: .2s;
}
.navbar ul li a:hover {
background: lightsteelblue;
border-radius: 2px;
}
.wrapper .center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif;
user-select: none;
}
.center h1 {
color: black;
font-size: 70px;
font-weight: bold;
width: 900px;
text-align: center;
}
.center h2 {
color: black;
font-size: 70px;
font-weight: bold;
width: 885px;
margin-top: 10px;
text-align: center;
}
.center .buttons {
margin: 35px 280px;
}
.buttons button {
height: 50px;
width: 150px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border: 1px solid #4b79b4;
outline: none;
cursor: pointer;
border-radius: 25px;
transition: .5s;
}
.buttons .btn {
margin-left: 25px;
}
.buttons button:hover {
background: #4b79b4;
}
footer {
position: absolute;
background-color: #808080;
height: auto;
width: 100%;
padding-top: 40px;
color: black;
bottom: 0px;
}
.footer-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3 {
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
line-height: 3rem;
}
.footer-content p {
max-width: 500px;
margin: 10px auto;
line-height: 28px;
font-size: 14px;
}
.socials {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.socials li {
margin: 0 10px;
}
.socials a {
text-decoration: none;
color: lightsteelblue;
}
.socials a i {
font-size: 1.1rem;
transition: color .4s ease;
}
.socials a:hover i {
color: #4b79b4;
}
.footer-bottom {
background-color: #737373;
width: 100%;
padding: 20px 0;
text-align: center;
}
.footer-bottom p {
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
.footer-bottom span {
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
<!doctype html>
<html lang="en ">
<head>
<meta charset="utf-8">
<title>Moritz </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<!-- BEGIN NAVBAR -->
<nav class="navbar">
<img class="logo" src="logo.png">
<ul>
<li> <a class="active" href="#">Home</a></li>
<li> About</li>
<li> CV</li>
<li> Favourites</li>
<li> Contact</li>
</ul>
</nav>
<!-- END NAVBAR -->
<!-- BEGIN CONTENT -->
<div class="center">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
</div>
<!-- END CONTENT -->
</div>
<!-- BEGIN FOOTER -->
<footer>
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-phone"></i></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
<!-- END FOOTER -->
</body>
</html>
What you describe kind of feels like a grid to me using three "rows", one for the "navbar", one for the "content" and one for the "footer" such as:
display: grid;
grid-template-rows: auto 1fr auto;
Now given that we can put the containers for the rows in a wrapper .wrapper
Then we tall it which "row" each of the sections belongs in. grid-row: 2/2; for the content for example in row 2 (start and end)
I took a good bit of liberty with your CSS (it is still a "lot" just for this) specifically, I added borders to show where things are - you will want to remove those but I did it to illustrate where is "is" in the flow.
This is by no means "perfect" but just a very quick place to build from.
#import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
* {
padding: 0;
margin: 0;
}
body {
background-color: ghostwhite;
padding: 0;
margin: 0;
border: solid orange 3px;
}
.wrapper {
display: grid;
grid-template-rows: auto 1fr auto;
border: lime 4px dashed;
}
.navbar-container {
border: red 4px solid;
grid-row: 1/1;
display: flex;
align-items: start;
margin: 0rem;
}
.content-container {
font-family: sans-serif;
display: grid;
place-items: center;
grid-row: 2/2;
border: blue 1px solid;
}
.footer-container {
padding-top: 2rem;
display: grid;
grid-template-rows: auto 1fr auto;
border: cyan 1px solid;
}
.footer-content {
display: grid;
grid-template-rows: 1fr auto 1fr;
align-items: center;
justify-items: center;
}
.footer-bottom {
grid-row: 3/3;
align-text: center;
padding: 0.25rem;
border: dashed blue 1px;
}
.navbar {
height: 5rem;
width: 100%;
background-color: #808080;
font-family: 'Roboto', sans-serif;
}
.navbar>.logo {
width: 140px;
height: auto;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 50px;
padding-right: 50px;
border: solid 1px green;
}
.navbar ul li {
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 2px 6px;
transition: 0.2s;
}
.navbar ul li a:hover {
background: lightsteelblue;
border-radius: 2px;
}
.wrapper .center {
user-select: none;
}
.buttons {
display: flex;
flex-direction: row;
margin-top: 1rem;
margin-bottom: 1rem;
}
.buttons button {
margin: 1rem;
}
.buttons button {
flex: auto;
height: 50px;
width: 150px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border: 1px solid #4b79b4;
outline: none;
cursor: pointer;
border-radius: 25px;
transition: .5s;
}
.buttons button:hover {
background: #4b79b4;
}
.socials {
list-style: none;
display: flex;
align-items: middle;
justify-content: center;
}
.socials li {
margin-right: 10px;
}
.footer-bottom {
font-size: 0.75rem;
background-color: #737373;
text-align: center;
width: 100%;
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
<!doctype html>
<html lang="en ">
<head>
<meta charset="utf-8">
<title>Moritz </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<nav class="navbar navbar-container">
<img class="logo" src="logo.png">
<ul class="menu-items">
<li> <a class="active" href="#">Home</a></li>
<li> About</li>
<li> CV</li>
<li> Favourites</li>
<li> Contact</li>
</ul>
</nav>
<div class="center content-container">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
</div>
</div>
<footer class="footer-container">
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-phone"></i></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
</body>
</html>
In the mobile version (width max 411px) when I create a navbar and I use absolute position when the dropdown active, why the background color don't cover all the element inside nav div?
Codepen <<-- Here's the codepen version
I've using overflow hidden and still doesn't work
$(document).ready(function(){
$('.navbar-burger').click(function(){
$('.inactive').toggleClass('active-nav');
$('.navbar-burger').toggleClass('inactive');
$('.navbar-close').toggleClass('close-navi');
$('.header').toggleClass('border-bg');
})
$('.navbar-close').click(function(){
$('.inactive').removeClass('active-nav');
$('.navbar-burger').removeClass('inactive');
$('.navbar-close').removeClass('close-navi');
$('.header').removeClass('border-bg');
})
})
*{
font-family: 'Open Sans Light', sans-serif;
color: black;
}
body{
margin: 25px 60px;
background-color: #fafafa;
font-size: 16px;
}
.header{
float: right;
transition: 0.4s ease-in-out;
}
.navbar{
font-size: 1.2em;
}
.navbar ul{
list-style: none;
margin: 0px;
padding: 0;
}
.navbar ul li{
display: inline-block;
margin: 0px 15px;
}
.navbar ul li a{
text-decoration: none;
}
.navbar ul li a:hover{
color: #70BCFF;
}
.content{
width: 100%;
display: grid;
grid-template-columns: 50% 50%;
padding: 70px 0px;
cursor: default;
}
.welcome-message h1{
font-size: 5.3em;
margin: 0px;
}
.welcome-message h2{
font-size: 2.15em;
font-weight: 100;
margin: 0px;
line-height: 60px;
color: #707070;
}
.welcome-message h4{
font-size: 1.0625em;
color: #8D8D8D;
margin-left: 4px;
}
.welcome-message p{
font-size: 1.0625em;
color: #8D8D8D;
margin-left: 4px;
}
.expand-bio{
background-color: #fff;
border: 0.3px solid rgba(0, 0, 0, .16);
font-size: 1.0625em;
padding: 20px 30px;
box-shadow: rgba(0, 0, 0, .16) 2px 7px 8px;
border-radius: 15px;
margin-left: 4px;
cursor: pointer;
}
.expand-bio:hover{
box-shadow: rgba(0, 0, 0, .16) 2px 7px 14px;
}
.ava{
display: grid;
grid-template-areas: 100%;
}
.ava img{
width: 70%;
overflow: hidden;
align-self: center;
justify-self: center;
margin: 0px;
}
.navbar-burger,.navbar-close{
display: none;
}
.active a{
color: #70BCFF;
}
/* Responsive Design */
#media only screen and (max-width: 1140px){
body{
font-size: 11px;
}
}
/* iPad && iPad Pro && another tablet */
#media only screen and (max-width: 1024px) and (max-height: 1366px){
body{
font-size: 20px;
}
.content{
grid-template-columns: 100%;
grid-template-rows: 50% 50%;
}
.ava{
grid-area: 1/1;
margin-bottom: 80px;
}
.welcome-message h1, .welcome-message h2, .welcome-message h4, .welcome-message p{
text-align: center;
}
.welcome-message h4{
margin-top: 15px;
}
.expand-bio{
display: block;
margin: 0 auto;
margin-top: 26px;
}
}
/* ================= */
#media only screen and (max-width: 412px){
body{
margin: 25px 10px;
font-size: 20px;
}
.navbar-burger{
position: absolute;
display: block;
right: 20px;
cursor: pointer;
}
.close-navi{
position: absolute;
display: block;
right: 20px;
cursor: pointer;
}
.navbar ul li{
padding-bottom: 15px;
}
.inactive{
display: none;
}
.active-nav{
display: block;
position: absolute;
}
.header{
float: left;
width: 100%;
}
.border-bg{
background-color: #aaa;
}
.content{
padding-top: 0px;
}
}
<!DOCTYPE html>
<head>
<title>Ananda Vijaya</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/b1643406ad.js"></script>
</head>
<body>
<div class="header">
<div id="navbar" class="navbar">
<span class="navbar-burger"><i class="fas fa-bars"></i></span>
<span class="navbar-close"><i class="fas fa-times"></i></span>
<ul class="nav">
<li class="active">Introduction</li>
<span class="inactive">
<li>Finished Project List</li>
<li>Contact Me</li>
</span>
</ul>
</div>
</div>
<div class="content">
<div class="welcome-message">
<h1>Hi There~</h1>
<h2>This is the Place Where You Can Get to<br>Know Me Better</h2>
<h4>Ananda Vijaya || Web Developer</h6>
<p>I'm a Front-end Developer Who Currently a College Student<br>Majoring in Computer Science at Diponegoro University</p>
<button class="expand-bio">My Complete Profile</button>
</div>
<div class="ava">
<img src="ava.png">
</div>
</div>
<div class="footer">
</div>
</body>
</html>
I expect to have all the element (navbar menu) get the gray background color
I have nav menu you can look at the snippet. (its not responsive in this case). And my problem is that i want to make searchbar (on hover with page max-width980px) to hide all elements and to be full width in nav menu. Problem is that i have very poor understanding of javascript so if is there any css only solution. I tried adding z-index but without effect.
/* Navigation menu */
.resmenu {
display: none;
cursor: pointer;
}
.resmenuitems {
display: none;
}
.navmenu {
width: 100%;
height: 55px;
border-bottom: 1px solid rgb(240,240,240);
}
.logo {
color: black;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100%;
font-size: 1.5em;
font-weight: bold;
float: left;
margin-left: 3%;
padding: 10px 0px 10px 0px;
}
.navlinksr {
float: right;
margin-right: 2%;
width: 490px;
height: 100%;
display: flex;
align-items: center;
justify-content:space-around;
}
.navlinksr a {
float: right;
text-decoration: none;
color: black;
font-size: 0.95em;
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
.navlinksline {
height: 40%;
width: 1px;
background-color: grey;
}
.logodif {
background-color: black;
color: white;
padding: 7px;
border-radius: 3px;
}
.rlynothing {
margin-left: 4%;
float: left;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.rlynothingagain {
height: 40%;
width: 1px;
background-color: grey;
}
/* SEARCH */
.swrap{
height: 100%;
float:left;
margin: auto;
display: flex;
align-items: center;
margin-left: 30px;
}
.search-container {
float:left;
display: flex;
width: 30px;
padding: 8px;
transition: width .2s;
overflow: hidden;
}
.search-container:hover{
width: 200px;
border: 2px solid black;
border-radius: 2px;
}
.search-input {
flex: 1;
display: flex;
}
.search-input input {
flex: 1;
background-clip: padding-box;
border: 0;
padding: 0;
outline: 0;
margin-left: 4px;
}
.navlinkborder {
background-color: limegreen;
padding: 10px;
border-radius: 3px;
}
.navlinkborder:hover {
background-color: green;
color: white;
transition: .5s;
}
<!DOCTYPE html>
<html lang="sk">
<head>
<!-- Site info -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- CSS -->
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/bootstrap-grid.css">
<link rel="stylesheet" href="styles/style.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
</head>
<body>
<!-- BEGIN - Header -->
<div class="navmenu">
<a href="index.php">
<div class="logo">
<p>Coding</p> <p class="logodif">Hub</p>
</div>
</a>
<div class="rlynothing">
<div class="rlynothingagain">
</div>
</div>
<div class="swrap">
<div class="search-container">
<div class="search-icon-btn">
<i class="fa fa-search fa-lg"></i>
</div>
<div class="search-input">
<input type="search" class="search-bar" placeholder="Hľadať...">
</div>
</div>
</div>
<div class="resmenu" id="flip">
<i class="fas fa-bars fa-2x"></i>
</div>
<div class="navlinksr">
Archív
Live
PODPORIŤ
Kontakt
<a class="navlinksline"></a>
Prihlásiť sa
</div>
</div>
<div id="panel" class="resmenuitems">
Archív
PODPORIŤ
Live
Kontakt
Prihlásiť sa
</div>
<!-- END - HEADER -->
Try below
set the header as fixed
.logo {
margin-left: 30px;
}
.rlynothing {
margin-left: 40px;
}
set search container full width
.search-container {
float:left;
display: flex;
width: 30px;
padding: 8px;
overflow: hidden;
position: absolute;
z-index: 1;
border: 2px solid white;
border-radius: 2px;
transition: all .2s;
}
.search-container:hover{
background: white;
width: calc(100% - 264px); /* 264px is the width of Header Image */
border-color: black;
}
You can calculate the width search bar using calc().
And to show the search bar above other elements, use position: absolute(relative) and z-index.
For z-index to work, you need to use position : absolute or position : relative
/* Navigation menu */
.resmenu {
display: none;
cursor: pointer;
}
.resmenuitems {
display: none;
}
.navmenu {
width: 100%;
height: 55px;
border-bottom: 1px solid rgb(240,240,240);
}
.logo {
color: black;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100%;
font-size: 1.5em;
font-weight: bold;
float: left;
margin-left: 30px;
padding: 10px 0px 10px 0px;
}
.navlinksr {
float: right;
margin-right: 2%;
width: 490px;
height: 100%;
display: flex;
align-items: center;
justify-content:space-around;
}
.navlinksr a {
float: right;
text-decoration: none;
color: black;
font-size: 0.95em;
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
.navlinksline {
height: 40%;
width: 1px;
background-color: grey;
}
.logodif {
background-color: black;
color: white;
padding: 7px;
border-radius: 3px;
}
.rlynothing {
margin-left: 40px;
float: left;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.rlynothingagain {
height: 40%;
width: 1px;
background-color: grey;
}
/* SEARCH */
.swrap{
height: 100%;
float:left;
margin: auto;
display: flex;
align-items: center;
margin-left: 30px;
}
.search-container {
float:left;
display: flex;
width: 30px;
padding: 8px;
overflow: hidden;
position: absolute;
z-index: 1;
border: 2px solid white;
border-radius: 2px;
transition: all .2s;
}
.search-container:hover{
background: white;
width: calc(100% - 264px); /* 264px is the width of Header Image */
border-color: black;
}
.search-input {
flex: 1;
display: flex;
}
.search-input input {
flex: 1;
background-clip: padding-box;
border: 0;
padding: 0;
outline: 0;
margin-left: 4px;
}
.navlinkborder {
background-color: limegreen;
padding: 10px;
border-radius: 3px;
}
.navlinkborder:hover {
background-color: green;
color: white;
transition: .5s;
}
<!DOCTYPE html>
<html lang="sk">
<head>
<!-- Site info -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- CSS -->
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/bootstrap-grid.css">
<link rel="stylesheet" href="styles/style.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
</head>
<body>
<!-- BEGIN - Header -->
<div class="navmenu">
<a href="index.php">
<div class="logo">
<p>Coding</p> <p class="logodif">Hub</p>
</div>
</a>
<div class="rlynothing">
<div class="rlynothingagain">
</div>
</div>
<div class="swrap">
<div class="search-container">
<div class="search-icon-btn">
<i class="fa fa-search fa-lg"></i>
</div>
<div class="search-input">
<input type="search" class="search-bar" placeholder="Hľadať...">
</div>
</div>
</div>
<div class="resmenu" id="flip">
<i class="fas fa-bars fa-2x"></i>
</div>
<div class="navlinksr">
Archív
Live
PODPORIŤ
Kontakt
<a class="navlinksline"></a>
Prihlásiť sa
</div>
</div>
<div id="panel" class="resmenuitems">
Archív
PODPORIŤ
Live
Kontakt
Prihlásiť sa
</div>
<!-- END - HEADER -->
I'm currently adding all media queries to a site and I'm stuck with some of the header elements that refuse to float properly when I resize below 480px to mobile-wide. I want my Logo to stretch across the page and all the other elements to float on top of each other. At the moment the phone/email are side by side and social media icons are stuck on the left and won't display inline across the page. I've tried all variants of display rules but they won't budge.
body {
font-family: "Merriweather Sans", sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333333;
}
body {
margin: 0 auto 0 auto;
}
.container {
margin: auto;
max-width: 100%;
padding-left: 10px;
padding-right: 10px;
}
header {
background: #ffffff;
height: 100px;
top: 0;
z-index: 10;
}
.left-header {
background: white;
width: 50%;
float: left;
height: 100px;
}
.right-header {
background: white;
width: 50%;
float: right;
height: 50px;
}
.right-header-top {
background: white;
float: right;
width: 100%;
height: 100%;
margin-right: 100px;
}
.right-header-bottom {
background: white;
float: left;
width: 100%;
height: 100%;
}
#logo {
margin-left: 60px;
margin-top: 50px;
}
nav {
float: left;
font-weight: 400;
}
nav a {
color: #000000;
text-decoration: none;
display: inline-block;
margin-top: 15px;
margin-right: 25px;
font-size: 12px;
}
div#contact {
float: right;
margin-right: 20px;
}
div#contact img {
display: inline-block;
border: 10px;
margin: 20px;
width: 30px;
height: 30px;
}
div#contact p {
display: inline-block;
margin-top: 25px;
font-size: 10px;
}
.right-header-bottom i {
height: 10px;
width: 10px;
border: 15px;
float: left;
margin-top: 15px;
margin-right: 10px;
margin-left: 10px;
}
a {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
}
#media screen and (max-width: 1000px) {
div.container {
float: none;
margin: 0 20px 0 20px;
}
div.column {
float: none;
}
}
#media screen and (max-width: 480px) {
header {
float: none;
height: auto;
}
nav {
float: none;
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}
nav a {
display: block;
}
.right-header {
height: auto;
width: auto;
}
.right-header-top {
float: none;
}
.right-header-bottom {
float: none;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header>
<div class="left-header">
<img src="http://localhost:8888/wp-content/uploads/2017/07/Logo.png" alt="logo" id="logo" style="width:250px;height:30px;">
</div>
<div class="right-header">
<div class="right-header-top">
<div id="contact">
<img src="http://localhost:8888/wp-content/uploads/2017/07/phone.png">
<p>0113 220 5265</p>
<img src="http://localhost:8888/wp-content/uploads/2017/07/email.png">
<p>hello#featuremedia.co.uk</p>
</div>
</div>
<div class="right-header-bottom">
<nav>
HOME
PORTFOLIO
PRODUCTS
ABOUT
CONTACT
BLOG
</nav>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
</div>
</div>
</header>
Here's how it looks -
You've got a lot of floats to kill.
A few things to display block and some text to align enter.
body {
font-family: "Merriweather Sans", sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333333;
}
body {
margin: 0 auto 0 auto;
}
.container {
margin: auto;
max-width: 100%;
padding-left: 10px;
padding-right: 10px;
}
header {
background: #ffffff;
height: 100px;
top: 0;
z-index: 10;
}
.left-header { background:white; width:50%; float:left; height: 100px; }
.right-header { background:white; width:50%; float:right; height: 50px; }
.right-header-top { background: white; float: right; width: 100%; height: 100%; margin-right: 100px; }
.right-header-bottom { background: white; float: left; width: 100%; height: 100%; }
#logo {
margin-left: 60px;
margin-top: 50px;
}
nav {
float: left;
font-weight: 400;
}
nav a {
color: #000000;
text-decoration: none;
display: inline-block;
margin-top: 15px;
margin-right: 25px;
font-size: 12px;
}
div#contact {
float: right;
margin-right: 20px;
}
div#contact img {
display: inline-block;
border: 10px;
margin: 20px;
width: 30px;
height: 30px;
}
div#contact p {
display: inline-block;
margin-top: 25px;
font-size: 10px;
}
.right-header-bottom i {
height: 10px;
width: 10px;
border: 15px;
float: left;
margin-top: 15px;
margin-right: 10px;
margin-left: 10px;
}
a {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
}
#media screen and (max-width: 1000px) {
div.container {
float: none;
margin: 0 20px 0 20px;
}
div.column {
float: none;
}
}
#media screen and (max-width: 480px) {
header {
float: none;
height: auto;
}
nav {
float: none;
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}
nav a {
display: block;
}
.right-header {
height: auto;
width: auto;
}
.right-header-top {
float: none;
}
.right-header-bottom {
float: none;
}
}
/* Added Styles */
.left-header {
display: block;
float: none;
width: 100%;
height: auto;
}
img#logo {
min-width: 100%;
margin: auto;
height: auto !important;
}
.right-header {
display: block;
float: none;
width: 100%;
height: auto;
}
div[class*="header"] {
display: block;
float: none;
width: 100%;
height: auto;
text-align: center;
}
div#contact {
float: none;
display: block;
width: 100%;
margin: auto;
text-align: center;
}
header {
height: auto;
}
body {
max-width: 500px;
border: 1px dashed #ccc;
min-height: 400px;
}
nav {
float: none;
width: 100%;
text-align: center;
}
.right-header-bottom i {
float: none;
}
/* Centered Nav, Email & Phone */
h1 {
text-align: center;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ddd;
margin-bottom: 0px;
margin-top: 100px;
}
h1 {
text-align: center;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ddd;
margin-bottom: 0px;
margin-top: 100px;
}
div#contact
> div img {
margin: auto;
}
div#contact
> div p {
margin: auto 10px;
line-height: 3em;
vertical-align: top;
}
div#contact
> div:first-of-type {
margin-bottom: 10px;
}
nav.block a {
display: block;
margin: 10px auto;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="left-header">
<img src="https://placehold.it/500x100" alt="logo" id="logo" style="width:250px;height:30px;">
</div>
<div class="right-header">
<div class="right-header-top">
<div id="contact">
<img src="https://placehold.it/50x50">
<p>0113 220 5265</p>
<img src="https://placehold.it/50x50">
<p>hello#featuremedia.co.uk</p>
</div>
</div>
<div class="right-header-bottom">
<nav>
HOME
PORTFOLIO
PRODUCTS
ABOUT
CONTACT
BLOG
</nav>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
</div>
</div>
</header>
</body>
<h1>Center Nav, Email & Phone</h1>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="left-header">
<img src="https://placehold.it/500x100" alt="logo" id="logo">
</div>
<div class="right-header">
<div class="right-header-top">
<div id="contact">
<div>
<img src="https://placehold.it/50x50">
<p>0113 220 5265</p>
</div>
<div>
<img src="https://placehold.it/50x50">
<p>hello#featuremedia.co.uk</p>
</div>
</div>
</div>
<div class="right-header-bottom">
<nav class="block">
HOME
PORTFOLIO
PRODUCTS
ABOUT
CONTACT
BLOG
</nav>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
</div>
</div>
</header>
</body>
get rid of float: right on div#contact and change display: inline-block to display: block on nav a
-OR-
Use this CSS for your nav:
nav {
display: flex;
flex-direction: column;
}
nav a {
align-self: center;
}
And you still have to kill the float on the header.
Here is a useful fiddle I keep in my bookmarks for flexbox reference. It shows everything flexbox can do and makes it relatively easy to understand:
https://codepen.io/enxaneta/full/adLPwv