Basically the navbar works but before when hovering over the links the full width would get highlighted (the 100%). I have made some adjustments after that and now i cant get the links to highlight 100% when i hover over them, what am i missing?
my code:
Let me know or hint me, i have tried giving 100% width to the ul, li, the anchor, the container divs, but no luck.
html:
<!DOCTYPE html>
<html lang="en">
<head></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">
<script src="https://kit.fontawesome.com/ae0153af6c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/stylesheets/style.css" />
<link rel="stylesheet" href="/stylesheets/header.css" />
<script src="/javascripts/header.js"></script>
<title>Header</title>
</head>
<body>
<div class="navbar-flexbox" id="navbar">
<div class="hamburger">
<!-- <a href="#" class="toggle-button "> -->
<span class="bar"> </span>
<span class="bar"> </span>
<span class="bar"> </span>
<!-- </a> -->
</div>
<div id="logo">
<h1>The g<span class="title-span">oo</span>d Kitchen</h1>
</div>
<div class="search-wrapper">
<form class="search-form" action="/recipes/search" method="POST">
<div class="search-bar-container">
<label class="search-label" for="search"></label>
<input class="search-input" type="search" name="search" id="search" placeholder="What would you like to cook?">
</div>
<div class="search-icon-container">
<i class="search-icon fa-lg fa-solid fa-magnifying-glass"></i>
</div>
<div class="search-btn-container">
<input class="search-submit" type="submit" value="Search">
</div>
</form>
</div>
<div class="navigation-list-dropdown noDisplay">
<div class="navbar-links">
<ul>
<li>Upload a recipe</li>
<li>All recipes</li>
<li>Home</li>
</div>
<% if(locals.islogged) { %>
<div class="userLogged-links dropdown">
<button class="dropdown-btn">
<% if(locals.userLogged) { %>
<img class="user-image-miniature" src="../../images/userImages/<%=userLogged.image %>">
Hey user
</button>
<% } %>
<div class="dropdown-content navbar-links">
<li>My profile</li>
<li>Logout</li>
</div>
</div>
<% } else { %>
<div class="user-links dropdown navbar-links">
<li>Login</li>
<li>Register</li>
</div>
<% } %>
</ul>
</div>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
#navbar {
/* background-color: #121214; cool black option */
background-color: rgb(47, 84, 88);
position: fixed;
width: 100%;
z-index: 2;
}
.menu li {
/* font-size: 16px; */
/* padding: 15px 5px; */
white-space: nowrap;
}
/* ul {
width: 100%;
} */
/* li {
width: 100vw;
} */
.navbar-links {
width: 100% !important;
}
.navigation-list-dropdown ul {
display: flex;
flex-flow: wrap column;
width: 100%;
}
.navigation-list-dropdown ul li {
list-style: none;
}
.navigation-list-dropdown li a {
padding: 1rem;
text-decoration: none;
display: block;
font-size: 0.8rem;
}
.navigation-list-dropdown li:hover {
background-color: #555;
}
.navigation-list-dropdown li:hover a {
color: rgb(207, 181, 181);
}
.noDisplay {
display: none;
}
.noVisible {
visibility: hidden;
}
body i {
color: black;
}
/* here the hambu menu */
.hamburger {
position: absolute;
top: 0.8rem;
right: 1rem;
/* display: flex;
flex-direction: column; */
/* justify-content: space-between; */
/* height: 20px;
width: 21px; */
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg)
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg)
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: white;
}
.navbar h1 {
display: flex;
justify-content: center;
}
.title-span {
color: rgb(255, 255, 255) !important;
}
#logo h1 {
font-family: Brush Script MT !important;
position: relative;
font-size: 1.7rem;
margin: .5rem;
}
ul {
margin: 0;
}
#navbar .hambMenu,
.login-register-container i,
#logo h1 {
color: rgb(199, 176, 176);
}
.dropdown {
float: left;
overflow: initial;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-btn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
/* Important for vertical align on mobile phones */
margin: 0;
/* Important for vertical align on mobile phones */
}
.dropdown-btn {
color: white !important;
padding: 0px;
display: flex;
align-items: center;
}
.dropdown-btn>* {
padding: 0px 5px;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
.user-image-miniature {
width: 35px;
border-radius: 15px;
}
/* End of user links navbar */
.navbar-flexbox {
display: flex;
flex-direction: column;
align-items: flex-start;
height: auto;
}
/* Search bar*/
.search-input {
font-size: 0.8rem !important;
width: 100%;
height: 35px;
border: 1px solid rgb(188, 180, 180);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align: center;
position: relative;
}
.search-icon-container {
position: relative;
display: flex;
justify-content: flex-end;
}
.search-icon {
right: 5vw;
position: absolute;
z-index: 2;
color: rgb(139, 147, 146);
align-self: center;
}
.search-wrapper {
width: 100%;
}
.search-form {
display: flex;
justify-content: space-evenly;
}
.search-label {
display: none;
}
.search-bar-container {
width: 100%;
}
.search-btn-container {
display: none;
}
/* End of Search bar*/
#media (min-width:480px) {
li {
width: 20vw;
}
.hamburger {
display: none;
}
.navbar-flexbox {
display: flex;
justify-content: space-between;
align-items: center;
}
.navigation-list-dropdown {
display: initial;
}
.navigation-list-dropdown ul {
flex-direction: row;
justify-content: space-evenly;
}
.navigation-list-dropdown ul {
border-top: 3px solid rgb(144, 208, 221);
}
.user-links,
.userLogged-links {
display: flex !important;
border-left: 0.1px solid rgb(144, 208, 221);
}
#logo h1 {
font-size: 2rem;
}
}
/* #media (min-width: 600px) {
li {
padding: 0px 10px;
}
} */
Related
I was just creating website with html and CSS with a responsive navigation bar and hamburger menu
and which has some content as well in the body of page
but after including contents inside the page the hamburger menu isn't showing
its transition are only you can see
i just wanted the hamburger menu to be shown without disturbing the contents of this page
code
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
</head>
<body>
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>
</body>
</html>
Simply add a z-index: 9999; to your nav ul and will see that.
It is hidden probably because it is out of the overflow of the parent block.
Try to add a background-color: #2f2f42; to your ul and job should be done.
DEMO
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
z-index: 9999; /** ADDED **/
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
background-color: #2f2f42; /** ADDED **/
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
</head>
<body>
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>
</body>
</html>
While developing my website I have came across a problem with my footer and form. My footer seems to be appearing through the form on devices but not on the computer and I'm sure this could be issues with widths of devices? So I kept trying to fix it and still haven't been able to fix it. I'm still learning as I go along and I would be grateful if someone could help me get rolling with my website again. code snippets and images below, kindest regards, Caelan.
body {
background-color: black ;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(55, 81, 165);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3{
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a{
text-decoration: none;
}
.gallery{
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content{
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius:10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: .4s;
background-color: whitesmoke;
}
.content:hover{
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: .6s;
}
.productcard-image{
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p{
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6{
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card{
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list{
padding: 5px;
}
.fa{
color: #ff9f43;
font-size: 26px;
transition: .4s;
}
.fa:hover{
transform: scale(1.3);
transition: .6s;
}
.productcardbutton{
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border:0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1{
background-color: #2183a2;
}
.buy-2{
background-color: #3b3e6e;
}
.buy-3{
background-color: #0b0b0b;
}
#media(max-width: 1000px){
.content{
width: 46%;
}
}
#media(max-width: 750px){
.content{
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
margin-bottom: -60vh;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type=submit]{
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type=submit]:hover{
background: rgb(19, 41, 238);
}
#media screen and (max-width:600px) {
.form1{
width: 90%;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/icon.png" />
<link rel="stylesheet" href="styles.css" />
<title>Contact Us</title>
</head>
<body>
<!-- Alert bar -->
<div class="container">
<div class="alert">
<span
class="closebtn"
onclick="this.parentElement.style.display='none';"
>×</span>
<center>
<strong>DEALS NOW ON!</strong> Upto 30% discounts this
christmas
</center>
</div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png" /></li>
<li>Home</li>
<li>Products</li>
<li><a class="active" href="contactus.html">Contact Us</a></li>
<li class="right">About Us</li>
</ul>
<!-- Form -->
<div class="form1">
<h2>Contact Us!</h2>
<p4>Typical Replies Within 24hrs!</p4>
<br>
<form action="">
<input type="email" name="email" id="email" placeholder="Enter your email">
<input type="text" name="name" id="name" placeholder=" Enter your name">
<textarea name="message" id="message" cols="30" rows="10" placeholder="Enter your message here"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<a href="index.html">
<img src="img/logo2.png" id="footer__logo" ></a>
</div>
<p class="website__rights">© KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved</p>
<div class="social__icons">
</div>
</div>
</section>
</div>
</body>
</html>
I've adjusted the css to remove the height and margin on the containers:
body {
background-color: black;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(55, 81, 165);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
font-family: "Courier New", Courier, monospace;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.container {
display: flex;
flex-direction: column;
}
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
#media (max-width: 1000px) {
.content {
width: 46%;
}
}
#media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
#media screen and (max-width: 600px) {
.form1 {
width: 90%;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/icon.png" />
<link rel="stylesheet" href="styles.css" />
<title>Contact Us</title>
</head>
<body>
<!-- Alert bar -->
<div class="container">
<div class="alert">
<span
class="closebtn"
onclick="this.parentElement.style.display='none';"
>×</span
>
<center>
<strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center>
</div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png" /></li>
<li>Home</li>
<li>Products</li>
<li><a class="active" href="contactus.html">Contact Us</a></li>
<li class="right">About Us</li>
</ul>
<!-- Form -->
<div class="form1">
<h2>Contact Us!</h2>
<p4>Typical Replies Within 24hrs!</p4>
<br />
<form action="">
<input
type="email"
name="email"
id="email"
placeholder="Enter your email"
/>
<input
type="text"
name="name"
id="name"
placeholder=" Enter your name"
/>
<textarea
name="message"
id="message"
cols="30"
rows="10"
placeholder="Enter your message here"
></textarea>
<input type="submit" value="Send" />
</form>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<a href="index.html">
<img src="img/logo2.png" id="footer__logo"
/></a>
</div>
<p class="website__rights">
© KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved
</p>
<div class="social__icons"></div>
</div>
</section>
</div>
</body>
</html>
I'm using margins for my form but when I am testing the responsive layout the distance between the navigation bar increases if the screen width is a greater size. Therefore, I have also tried auto height but it still has a big gap between the navigation bar and the form.
I have also tried #media screen.
I had help yesterday with a similar problem to this, but now I'm encountering another one as its not with the footer but with the form itself.
I would kindly like to ask for help, and if you find a solution explain the changes so I can also learn from it! Kindest regards, Caelan : ).
body {
background-color: black;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(55, 81, 165);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
font-family: "Courier New", Courier, monospace;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
#media (max-width: 1000px) {
.content {
width: 46%;
}
}
#media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
margin-top: -200px;
height: auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
#media screen and (max-width: 600px) {
.form1 {
width: 90%;
margin-top:-250px;
height: auto;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/icon.png" />
<link rel="stylesheet" href="styles.css" />
<title>Contact Us</title>
</head>
<body>
<!-- Alert bar -->
<div class="container">
<div class="alert">
<span
class="closebtn"
onclick="this.parentElement.style.display='none';"
>×</span
>
<center>
<strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center>
</div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png" /></li>
<li>Home</li>
<li>Products</li>
<li><a class="active" href="contactus.html">Contact Us</a></li>
<li class="right">About Us</li>
</ul>
</div>
<!-- Form -->
<div class="form1">
<h2>Contact Us!</h2>
<p4>Typical Replies Within 24hrs!</p4>
<br />
<form action="">
<input
type="email"
name="email"
id="email"
placeholder="Enter your email"
/>
<input
type="text"
name="name"
id="name"
placeholder=" Enter your name"
/>
<textarea
name="message"
id="message"
cols="30"
rows="10"
placeholder="Enter your message here"
></textarea>
<input type="submit" value="Send" />
</form>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<a href="index.html">
<img src="img/logo2.png" id="footer__logo"
/></a>
</div>
<p class="website__rights">
© KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved
</p>
<div class="social__icons"></div>
</div>
</[![section][1]][1]>
</div>
</body>
</html>
I analyzed your code. You have just to remove the height: 100vh from your .container.
The next step is to remove the margin-top: -250px from your .form1. then it should look good.
Bonus Tip: the unit vh stands for viewport-height (browser height). so 100vh is 100% of the viewport height.
I want "THE NAV" to be displayed in the center of the navbar for mobile view and want the hamburger menu icon on the far right side.
how do i do this?
I tried .logo justify-content: center but nothing changed
If anyone would care to explain this to me I would be super grateful, I have tried finding a solution myself by using google but as I'm quite new to this I haven't been able to find a fix for my problem because I'm really not sure what to search for to fix my problem
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: "Poppins", sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 40%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.4s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Projects</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
So thing is: Display Flex distributes space between divs evenly. This means your logo and your burger bove geht the same space and justify-content then placees them next to each other with 50% width.
What you need to do is: Take the burger out of the equation for the flexbox. You can do this by placing it absolute (with position: absolute) and then you just have to tell it a right-value of e.g. 40px
//CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: "Poppins", sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 40%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.4s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
position: absolute;
right: 40px;
}
}
.nav-active {
transform: translateX(0%);
}
//HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="nav.css" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap"
rel="stylesheet"
/>
<title>NAVIGATION</title>
</head>
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Projects</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="nav.js"></script>
</body>
</html>
I'm making a homepage look like this one: https://www.daum.net/
When the display is reduced(between the size of 800 px and 1280px - i made a media query when under 800px), this site has overflow-x scroll but mine doesn't look like that
By the way, the login form seems floating when I reduced the size as well even I set the clearfix.
And I assume that it would make x-scroll doesn't work correctly.
Please check this code
+)ADD EXPLAN
I'm still struggling with this homepage. I made a media query when the size is only under 800. When the size is above 800px, the x-scroll should work. It seems to work thankfully but The login form is floating when user reducing the size of display like this. This is what i've want.
(Screenshot at the moment )
It must look like this (Expected Result)
/* NOTE:
* Grid layout stuff starts at line 138.
*/
/*--------------------------------------------------------------
CSS Reset
--------------------------------------------------------------*/
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
height: 100%;
}
body {
margin: 0;
height: 100%;
overflow-x:scroll;
}
.wrapper {
margin: 0;
height: 100%;
}
.homepage-content-wrapper{
max-width: 1280px;
margin: 0 auto;
height: 100%;
}
ul{list-style: none;}
/*--------------------------------------------------------------
Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar */
}
/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
color: #404040;
font-family: 'Helvetica', Arial, sans-serif;
font-size: 18px;
line-height: 1.5;
}
h1,
h2,
h3 {
margin: 0;
padding: 1em 0;
}
/*--------------------------------------------------------------
General styles
--------------------------------------------------------------*/
.site {
background: #ededed;
min-height: 100vh;
}
.main-content,
.main-homepage-content,
.twin,
.footer {
padding: 1em 2em;
}
.masthead{
padding: 1em 0em;
color: white;
}
.sidebar{padding:1em 0.375em; }
.main-content,
.main-homepage-content{
background: white;
}
.news-container{width:100%;}
.colophon {
padding: 2em;
background: #3E454C;
color: white;
}
.colophon a {
color: white;
}
.colophon a:hover,
.colophon a:focus {
border-bottom: 1px solid white;
}
.column-left{position: relative; float: left; width: 900px;}
.column-right{position: relative; float: right; width: 300px;}
.main-homepage-content:after,
.column-left:after,
#main-ad:after,
.column-right:after{content: ""; clear: both; display: table;}
#media (max-width: 800px) {
.column-left{width: 100%;}
}
/*--------------------------------------------------------------
If no grid support, limit width to 50em and center align
--------------------------------------------------------------*/
#supports not (display: grid) {
.wrapper {
max-width: 50em;
margin: 0 auto;
}
}
/*--------------------------------------------------------------
CSS Grid layout for wider screens, when browser supports grid:
--------------------------------------------------------------*/
#media screen and (min-width: 800px) {
#supports (display: grid) {
.content-wrapper {
display: grid;
grid-template-columns: 1fr repeat(6, minmax(auto, 10em)) 1fr;
grid-template-rows: minmax(1em, auto) 1fr auto minmax(1em, auto);
}
.homepage-content-wrapper {
display: grid;
grid-template-columns: 100%;
grid-template-rows: minmax(1em, auto) 1fr auto minmax(1em, auto);
}
.column-left{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.column-right{
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.masthead,
.colophon {
grid-column: span 12;
}
.main-content {
grid-column: 2/12;
}
.sidebar {
grid-column: 1/1;
}
}
}
/*--------------------------------------------------------------
Login &Search Form & Logo
--------------------------------------------------------------*/
.header-level-1{
max-width: 1500px;
margin: 0 auto;
padding: 0.5em 0;
}
.header-level-1 .clearlist{
float:right;
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}
.header-level-1 .clearlist:after{content: ""; clear: both; display: table;}
.header-level-1 .clearlist li{
list-style: none;
margin: 0;
padding: 0;
text-align: left;
float:left;
}
.header-level-1 .clearlist li a{
display: block;
font: normal 11px 돋움;
color: #585858;
text-decoration: none !important;
letter-spacing: -1px;
text-align: center;
}
.header-level-1 .clearlist li:not(:first-child) a::before {
content: "|";}
/*
.header-level-1 .clearlist li a:before {
content: "|";
}
.header-level-1 .clearlist li:first-child a:before {
content: "";
}*/
.header-level-2 {
max-width: 1500px;
margin: 0 auto;
}
.header-level-2-1{width:100px; float:left}
.header-level-2-2{width:auto;}
.header-level-2-1:after,
.header-level-2-2:after{
content: ""; clear: both; display: table;
}
#media screen and (min-width: 800px)
.logo-image{
grid-column: 1/1;
}
.search-form {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
font-family: 'Poppins', sans-serif;
}
.logo-image:after,.search-form:after{content: ""; clear: both; display: table;}
.search-form form {
width: 100%;
max-width: 600px;
margin-bottom: 0;
}
.search-form .inner-form {
background: #fff;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
border-radius: 3px;
}
.search-form form .inner-form .input-field {
height: 68px;
}
.search-form form .inner-form .input-field input {
height: 100%;
background: transparent;
border: 0;
display: block;
width: 100%;
padding-left: 10px;
font-size: 16px;
color: #555;
}
.search-form form .inner-form .input-field input.placeholder {
color: #888;
font-size: 16px;
}
.search-form form .inner-form .input-field input:-moz-placeholder {
color: #888;
font-size: 16px;
}
.search-form form .inner-form .input-field input::-webkit-input-placeholder {
color: #888;
font-size: 16px;
}
.search-form form .inner-form .input-field input:hover, .search-form form .inner-form .input-field input:focus {
box-shadow: none;
outline: 0;
border-color: #fff;
}
.search-form form .inner-form .input-field.first-wrap {
width: 150px;
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.search-form form .inner-form .input-field.first-wrap .choices__inner {
background: transparent;
border-radius: 0;
border: 0;
height: 100%;
color: #fff;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding: 10px 30px;
box-sizing: unset !important;
}
.search-form form .inner-form .input-field.first-wrap .choices__inner .choices__list.choices__list--single {
display: -ms-flexbox;
display: flex;
padding: 0;
-ms-flex-align: center;
align-items: center;
height: 100%;
}
.search-form form .inner-form .input-field.first-wrap .choices__inner .choices__item.choices__item--selectable.choices__placeholder {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
height: 100%;
opacity: 1;
color: #888;
}
.search-form form .inner-form .input-field.first-wrap .choices__inner .choices__list--single .choices__item {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
height: 100%;
color: #555;
}
.search-form form .inner-form .input-field.first-wrap .choices[data-type*="select-one"]:after {
right: 30px;
border-color: #e5e5e5 transparent transparent transparent;
}
.search-form form .inner-form .input-field.first-wrap .choices__list.choices__list--dropdown {
border: 0;
background: #fff;
padding: 20px 30px;
margin-top: 2px;
border-radius: 4px;
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
}
.search-form form .inner-form .input-field.first-wrap .choices__list.choices__list--dropdown .choices__item--selectable {
padding-right: 0;
}
.search-form form .inner-form .input-field.first-wrap .choices__list--dropdown .choices__item--selectable.is-highlighted {
background: #fff;
color: #eb008b;
}
.search-form form .inner-form .input-field.first-wrap .choices__list--dropdown .choices__item {
color: #555;
min-height: 24px;
}
.search-form form .inner-form .input-field.second-wrap {
-ms-flex-positive: 1;
flex-grow: 1;
}
.search-form form .inner-form .input-field.third-wrap {
width: 74px;
}
.search-form form .inner-form .input-field.third-wrap .btn-search {
height: 100%;
width: 100%;
white-space: nowrap;
color: #fff;
border: 0;
cursor: pointer;
background: #eb008b;
transition: all .2s ease-out, color .2s ease-out;
}
.search-form form .inner-form .input-field.third-wrap .btn-search svg {
width: 16px;
}
.search-form form .inner-form .input-field.third-wrap .btn-search:hover {
background: #eb008b;
}
.search-form form .inner-form .input-field.third-wrap .btn-search:focus {
outline: 0;
box-shadow: none;
}
#media screen and (max-width: 992px) {
.search-form form .inner-form .input-field {
height: 50px;
}
}
#media screen and (max-width: 800px) {
.header-level-2-2{width: 90%; margin: 0 auto;}
.header-level-1 .clearlist{
position: absolute;
top: 5em;
right: 0.275em;
}
.logo-image{
display: none;
}
.search-form {
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
font-family: 'Poppins', sans-serif;
}
.search-form form .inner-form {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 1em;
margin-top:5em;
}
.search-form form .inner-form .input-field {
margin-bottom: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.search-form form .inner-form .input-field input {
padding: 10px 15px;
}
.search-form form .inner-form .input-field.first-wrap {
width: 100%;
border-right: 0;
}
.search-form form .inner-form .input-field.first-wrap .choices__inner {
padding: 10px 15px;
}
.search-form form .inner-form .input-field.first-wrap .choices[data-type*="select-one"]:after {
right: 11.5px;
border-color: #e5e5e5 transparent transparent transparent;
}
.search-form form .inner-form .input-field.second-wrap {
width: 100%;
margin-bottom: 30px;
}
.search-form form .inner-form .input-field.third-wrap {
margin-bottom: 0;
width: 100%;
}
.choices__list--dropdown {
display: none;
z-index: 1;
position: absolute;
width: 80%;
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
top: 100%;
margin-top: -1px;
border-bottom-left-radius: 2.5px;
border-bottom-right-radius: 2.5px;
overflow: hidden;
word-break: break-all;
}
}
/*--------------------------------------------------------------
Navigation:
--------------------------------------------------------------*/
.nav-header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: absolute;
top: 0px;
width: 100%;
z-index: 999;
}
.nav-header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.nav-header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
color:#666 !important;
}
.nav-header li a:hover,
.nav-header .menu-btn:hover {
background-color: #eb008b;
color: #fff!important;
}
/* menu */
.nav-header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.nav-header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.nav-header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.nav-header .menu-icon .navicon:before,
.nav-header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.nav-header .menu-icon .navicon:before {
top: 5px;
}
.nav-header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.nav-header .menu-btn {
display: none;
}
.nav-header .menu-btn:checked ~ .menu {
max-height: 400px;
}
.nav-header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.nav-header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.nav-header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.nav-header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.nav-header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
#media (min-width: 800px) {
.nav-header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: relative;
width: 100%;
margin-top:1em;
z-index: 3;
}
.nav-header:after{content: ""; clear: both; display: table;}
.nav-header li {
float: left;
}
.nav-header li a {
padding: 20px 30px;
}
.nav-header .menu {
clear: none;
float: right;
max-height: none;
}
.nav-header .menu-icon {
display: none;
}
}
/*--------------------------------------------------------------
HomePage
--------------------------------------------------------------*/
#loginForm{background-color: #e9ecef;}
.login-input{
margin: 50px 0 0 30px;
display: inline;
float: left;
width: 156px;
}
.login-input input{
width: 100%;
}
.login-input input::-webkit-input-placeholder {
font-size: 12px;
line-height: 3;
padding-left:5px;
}
.btn-login{
overflow: hidden;
float: left;
width: 70px;
height: 60px;
margin-top: 50px;
font-weight: bold;
background-color: white;
}
.login-set {
position: absolute;
top: 15px;
left: 30px;
width: 350px;
height: 30px;
font-size: 12px;
letter-spacing: -1px;
}
.list-user {
overflow: hidden;
width: 270px;
padding: 15px 0 30px 20px;
font-size: 12px;
line-height: 14px;
letter-spacing: -1px;
}
.list-user li {
overflow: hidden;
float: left;
padding: 0 0 1px 10px;
}
.tab-content {
height: 360px;
}
.tab-pane ul{
width:400px;
}
.list_thumb li {
float: left;
width: 180px;
height: 160px;
}
.list_thumb li:last-child:after{
content: "";
clear: both;
display: table;
}
#media screen and (max-width: 800px) {
#main-ad,
.column-right{display: none;}
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.com/libraries/bootstrap-slider"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div class="wrapper">
<header class="masthead">
<div class="header-wrapper">
<div class="header-level-1">
<!-- Login -->
<ul class="clearlist">
<li>로그인</li>
<li>회원가입</li>
<li>소개</li>
</ul>
</div>
<div class="header-level-2">
<!-- Logo and Title -->
<div class="header-level-2-1">
<div class="logo-image" >
<img src="#" alt="#">
</div>
</div>
</div>
<nav>
<!-- Navigation-->
<div class="nav-header">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li class="menu-item">신문줄광고</li>
<li class="menu-item">신문보기</li>
<li class="menu-item">부동산</li>
<li class="menu-item">알뜰장터</li>
<li class="menu-item">자동차</li>
<li class="menu-item">커뮤니티</li>
</ul>
</div>
</nav>
</header><!-- .masthead -->
<div class="homepage-content-wrapper">
<!-- Main Content -->
<main class="main-homepage-content">
<div class="column-left">
<!-- AD TOP -->
<div id="main-ad">
<img src="https://via.placeholder.com/900x170.jpg" class="img-fluid">
</div>
<!-- NEWS Section -->
<div class="news-container">
<ul class="nav" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="allnews-tab" data-toggle="tab" href="#allnews" role="tab" aria-controls="allnews" aria-selected="true">전체기사</a>
</li>
<li class="nav-item">
<a class="nav-link" id="politic-tab" data-toggle="tab" href="#politic" role="tab" aria-controls="politic" aria-selected="false">정치/이민</a>
</li>
<li class="nav-item">
<a class="nav-link" id="economy-tab" data-toggle="tab" href="#economy" role="tab" aria-controls="economy" aria-selected="false">경제</a>
</li>
<li class="nav-item">
<a class="nav-link" id="society-tab" data-toggle="tab" href="#society" role="tab" aria-controls="society" aria-selected="false">사회</a>
</li>
<li class="nav-item">
<a class="nav-link" id="entertain-tab" data-toggle="tab" href="#entertain" role="tab" aria-controls="entertain" aria-selected="false">연예/스포츠</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="allnews" role="tabpanel" aria-labelledby="allnews-tab">
<ul class="list_thumb">
<li>
<a href="#" class="link_item">
<span class="thumb_g">
<img src="https://via.placeholder.com/154x94.jpg" width="154" height="94" class="img_thumb" alt="">
</span>
<div class="cont_item">
<strong class="tit_item">산다라박, 오늘 화제가 됐던 그 옷 맞습니다</strong>
</div>
</a>
</li>
<li><a href="#" class="link_item">
<span class="thumb_g">
<img src="https://via.placeholder.com/154x94.jpgg" width="154" height="94" class="img_thumb" alt=""></span>
<div class="cont_item">
<strong class="tit_item">한소희, '백일의 낭군님' 종방연 참석한 세자빈</strong>
</div>
</a>
</li>
<li>
<a href="#" class="link_item"><span class="thumb_g">
<img src="https://via.placeholder.com/154x94.jpg" width="154" height="94" class="img_thumb" alt="">
</span>
<div class="cont_item">
<strong class="tit_item">소희 '격한 안무에도 미모유지~'</strong>
</div>
</a>
</li>
<li>
<a href="#" class="link_item">
<span class="thumb_g">
<img src="https://via.placeholder.com/154x94.jpg" width="154" height="94" class="img_thumb" alt="">
</span>
<div class="cont_item">
<strong class="tit_item">'여우각시별' 김지수, 이제훈을 감싸는 이유 고...</strong>
</div>
</a>
</li>
</ul>
</div>
<div class="tab-pane fade" id="politic" role="tabpanel" aria-labelledby="politic-tab">
정치/이민
</div>
<div class="tab-pane fade" id="economy" role="tabpanel" aria-labelledby="economy-tab">
경제
</div>
<div class="tab-pane fade" id="society" role="tabpanel" aria-labelledby="society-tab">
사회
</div>
<div class="tab-pane fade show" id="entertain" role="tabpanel" aria-labelledby="entertain-tab">
연예
</div>
</div>
</div>
<!-- NEWS Section -->
</div>
<div class="column-right">
<!-- 로그인 -->
<form id="loginForm" name="loginform" accept-charset="utf-8" method="post" action="" autocomplete="off">
<div class="login-input">
<label class="" for="kyocha_id" style="display: none;">아이디</label>
<input type="text" id="kyocha_id" name="kyocha_id" class="tf_login" maxlength="50" placeholder="아이디" tabindex="1">
<label class="" for="kyocha_pwd" style="display: none;">비밀번호</label>
<input type="password" id="kyocha_pwd" name="kyocha_pwd" class="tf_login tf_pw" maxlength="32" placeholder="비밀번호" tabindex="2">
</div>
<button type="submit" id="loginSubmit" class="btn-login #loginbtn" tabindex="3" onclick="">
<span class="ir_wa">로그인</span>
</button>
<div class="login-set">
<span class="info_check">
<input type="checkbox" id="stln" name="stln" class="inp_steady" tabindex="4" onclick="">
<label id="lbStln" class="lab_steady" for="stln" onclick="">
<span class="ico_login ico_check"></span>로그인 상태 유지
</label>
</span>
</div>
<ul class="list-user">
<li class="fst">
회원가입
</li>
<li>
아이디<span class="screen_out">찾기</span>
<span class="ico_dot">·</span>
비밀번호 찾기
</li>
</ul>
</form>
<!-- //로그인 -->
</div>
</main>
</div>
<footer class="colophon grid">
<aside></aside>
</footer>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</body>
</html>
I may be misinterpreting your question, but in looking at your expected result image it appears you want a portion of your webpage to overflow horizontally while in a desktop viewport.
By simply changing the following rule from:
.homepage-content-wrapper{
max-width: 1280px;
margin: 0 auto;
height: 100%;
}
To:
.homepage-content-wrapper{
width: 1280px;
margin: 0 auto;
height: 100%;
}
You should see your login form remain to the right of your place holder image even when your viewport is under 1280px wide.