This question already has answers here:
Content overlapping with "position:fixed"
(1 answer)
How can I make content appear beneath a fixed DIV element?
(13 answers)
Closed 2 years ago.
Here is the code:
body {
margin: 0;
padding: 0;
}
/* NAVIGATION */
nav {
background: #222222;
padding: 10px 40px 10px 70px;
color: #ffffff;
}
header {
position: fixed;
width: 100%;
top: 0;
}
#nav-list {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
#search {
height: 40px;
width: 240px;
display: flex;
border-radius: 5px;
}
#searchBar {
height: 100%;
width: 200px;
border: none;
border-radius: 5px 0 0 5px;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
}
#search #searchButton {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
background-color: rgb(81, 22, 219);
color: #222222;
transition: color 0.75s;
}
#search #searchButton:hover {
color: #fff;
}
#page-title {
font-size: 24px;
}
/* MAIN CONTENT */
#content {
/* test to see if the color will appear */
background: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Vault</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<nav>
<ul id="nav-list">
<li id="search">
<input id="searchBar" type="search" placeholder="Search...">
<label id="searchButton">
<i class="fas fa-search"></i>
</label>
</li>
<li id="page-title">Video Vault</li>
</ul>
</nav>
</header>
<section>
test
</section>
</body>
</html>
The goal I am trying to achieve is having the text from the section tag and have it directly below my fixed navbar. I have attempted to put a z-index with the values of above 1 into header, nav and #nav-list, but it has not worked. What can be re-configured to make this work? I am sorry. I have tried all I know and searched this site but to no success.
I would just add a margin-top equivalent to the nav offsetHeight, which in this case is 106 pixels.
body {
margin: 0;
padding: 0;
}
/* NAVIGATION */
nav {
background: #222222;
padding: 10px 40px 10px 70px;
color: #ffffff;
}
header {
position: fixed;
width: 100%;
top: 0;
}
#nav-list {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
#search {
height: 40px;
width: 240px;
display: flex;
border-radius: 5px;
}
#searchBar {
height: 100%;
width: 200px;
border: none;
border-radius: 5px 0 0 5px;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
}
#search #searchButton {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
background-color: rgb(81, 22, 219);
color: #222222;
transition: color 0.75s;
}
#search #searchButton:hover {
color: #fff;
}
#page-title {
font-size: 24px;
}
/* MAIN CONTENT */
#content {
/* test to see if the color will appear */
background: blue;
}
section{
margin-top:106px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Vault</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<nav>
<ul id="nav-list">
<li id="search">
<input id="searchBar" type="search" placeholder="Search...">
<label id="searchButton">
<i class="fas fa-search"></i>
</label>
</li>
<li id="page-title">Video Vault</li>
</ul>
</nav>
</header>
<section>
test
</section>
</body>
</html>
If you have a responsive navigation bar you could use JS to dynamically set the margin top.
document.getElementsByTagName("section")[0].style.marginTop = document.getElementsByTagName("nav")[0].offsetHeight+"px";
body {
margin: 0;
padding: 0;
}
/* NAVIGATION */
nav {
background: #222222;
padding: 10px 40px 10px 70px;
color: #ffffff;
}
header {
position: fixed;
width: 100%;
top: 0;
}
#nav-list {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
#search {
height: 40px;
width: 240px;
display: flex;
border-radius: 5px;
}
#searchBar {
height: 100%;
width: 200px;
border: none;
border-radius: 5px 0 0 5px;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
}
#search #searchButton {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
background-color: rgb(81, 22, 219);
color: #222222;
transition: color 0.75s;
}
#search #searchButton:hover {
color: #fff;
}
#page-title {
font-size: 24px;
}
/* MAIN CONTENT */
#content {
/* test to see if the color will appear */
background: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Vault</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<nav>
<ul id="nav-list">
<li id="search">
<input id="searchBar" type="search" placeholder="Search...">
<label id="searchButton">
<i class="fas fa-search"></i>
</label>
</li>
<li id="page-title">Video Vault</li>
</ul>
</nav>
</header>
<section>
test
</section>
</body>
</html>
position: fixed; and position: absolute; puts the header out of the normal flow. use position: sticky; instead:
body {
margin: 0;
padding: 0;
}
/* NAVIGATION */
nav {
background: #222222;
padding: 10px 40px 10px 70px;
color: #ffffff;
}
header {
position: sticky;
width: 100%;
top: 0;
}
#nav-list {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
#search {
height: 40px;
width: 240px;
display: flex;
border-radius: 5px;
}
#searchBar {
height: 100%;
width: 200px;
border: none;
border-radius: 5px 0 0 5px;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
}
#search #searchButton {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
background-color: rgb(81, 22, 219);
color: #222222;
transition: color 0.75s;
}
#search #searchButton:hover {
color: #fff;
}
#page-title {
font-size: 24px;
}
/* MAIN CONTENT */
#content {
/* test to see if the color will appear */
background: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Vault</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<nav>
<ul id="nav-list">
<li id="search">
<input id="searchBar" type="search" placeholder="Search...">
<label id="searchButton">
<i class="fas fa-search"></i>
</label>
</li>
<li id="page-title">Video Vault</li>
</ul>
</nav>
</header>
<section>
test
</section>
</body>
</html>
Alternatively, you can use a top-margin at the section:
body {
margin: 0;
padding: 0;
}
/* NAVIGATION */
nav {
background: #222222;
padding: 10px 40px 10px 70px;
color: #ffffff;
}
header {
position: fixed;
width: 100%;
top: 0;
}
#nav-list {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
#search {
height: 40px;
width: 240px;
display: flex;
border-radius: 5px;
}
#searchBar {
height: 100%;
width: 200px;
border: none;
border-radius: 5px 0 0 5px;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
}
#search #searchButton {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
background-color: rgb(81, 22, 219);
color: #222222;
transition: color 0.75s;
}
#search #searchButton:hover {
color: #fff;
}
#page-title {
font-size: 24px;
}
/* MAIN CONTENT */
#content {
/* test to see if the color will appear */
background: blue;
}
section {
margin-top: 90px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Vault</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<nav>
<ul id="nav-list">
<li id="search">
<input id="searchBar" type="search" placeholder="Search...">
<label id="searchButton">
<i class="fas fa-search"></i>
</label>
</li>
<li id="page-title">Video Vault</li>
</ul>
</nav>
</header>
<section>
test
</section>
</body>
</html>
Related
By using nth-child(1) & nav .start-home,a:nth-child(1):hover~.animation I should define the properties of home link and it's animation like it's width and position. But to adjust the width and position of the animation of the home link I have to make adjustments in nnth-child(2). And same goes for about link I need to do adjustments in nth-child(3).
In the end I can make the animation work for the last sign-in link. Also the animation is not running properly, it's breaking in the middle. Run the code and you will get better understanding of my problem.
body{
box-sizing: border-box;
font-family: sans-serif;
background-color: rgb(255, 238, 238);
}
nav{
position: relative;
margin: 0;
padding: 0;
box-shadow: 0 2px 3px 0;
width: 100%;
height: 50px;
background-color: #04111ffa;
line-height: 50px;
font-size: 15px;
padding: 0px 20px;
}
nav a{
width: 100%;
font-size: 15px;
color: seashell;
position: relative;
text-decoration: none;
text-transform: uppercase;
line-height: 50px;
z-index: 5;
text-align: center;
}
nav .animation{
position: absolute;
height: 50px;
top: 0;
z-index: 0;
width: 100px;
background-color: rgb(58, 233, 218);
border-radius: 10%;
transition: all 0.5s ease 0s;
}
a:nth-child(1){
width: 150px;
left: 0;
}
nav .start-home,a:nth-child(1):hover~.animation {
width: 80px;
left: 70px;
}
a:nth-child(2){
left: 50px;
width: 150px;
}
nav .start-about,a:nth-child(2):hover~.animation {
width: 80px;
left: 70px;
}
a:nth-child(3){
left: 70px;
width: 120px;
}
nav .start-contact,a:nth-child(3):hover~.animation {
width: 80px;
left: 140px;
}
a:nth-child(4){
left: 90px;
width: 170px;
}
nav .start-privacy-policy,a:nth-child(4):hover~.animation {
width: 90px;
left: 225px;
}
a:nth-child(5){
left: 110px;
width: 200px;
}
nav .start-docs,a:nth-child(5):hover~.animation {
width: 145px;
left: 315px;
}
a:nth-child(6){
left: 130px;
width: 100px;
}
.search-container{
float: right;
}
input[type=text]{
padding: 6px;
margin-top: 13px;
font-size: 17px;
border: none;
border-radius: 15px;
}
.search-container button{
float: right;
padding: 6px 10px;
margin-top: 13px;
margin-right: 30px;
font-size: 17px;
border-radius: 15px;
background-color: rgb(58, 233, 218);
}
.search-container button:hover{
background-color: rgb(35, 168, 157);
}
.icon{
color: white;
z-index: 5;
}
.search-container{
float: right;
}
.links{
display: inline-block;
}
<!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="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="stylesheet" href="navbar.css">
<title>Document</title>
</head>
<body>
<header>
<nav>
<div class="links">
<span class="icon fas fa-bars"></span>
Home
About
Contact
Privacy Policy
Sign-in
<div class="animation start-home"></div>
</div>
<div class="search-container">
<form>
<input type="text" placeholder="Search..." name="search" class="searchbar">
<button type="submit"><i class="fas fa-search"></i><span class="text">Search</span></button>
</form>
</div>
</nav>
</header>
</body>
</html>
If I understood you correctly, then perhaps this example can help you:
const animationElement = document.querySelector('.links .animation');
const defaultElement = document.querySelector('.links a'); // set default element !
const slideToElement = (el) => {
if (el) {
animationElement.style.left = el.offsetLeft + 'px';
animationElement.style.width = el.offsetWidth + 'px';
} else {
animationElement.style.removeProperty('left');
animationElement.style.removeProperty('width');
}
}
// tracking all hovers on "a" links
document.querySelector('.links').addEventListener('mouseover', (ev) => ev.target.matches('a') && slideToElement(ev.target))
// tracking leaving the links area
document.querySelector('.links').addEventListener('mouseleave', () => slideToElement(defaultElement))
slideToElement(defaultElement); // setting the slide to the default position
body {
box-sizing: border-box;
font-family: sans-serif;
background-color: rgb(255, 238, 238);
}
nav {
position: relative;
margin: 0;
padding: 0;
box-shadow: 0 2px 3px 0;
width: 100%;
height: 50px;
background-color: #04111ffa;
line-height: 50px;
font-size: 15px;
padding: 0px 20px;
}
nav a {
width: 100%;
font-size: 15px;
color: seashell;
position: relative;
text-decoration: none;
text-transform: uppercase;
line-height: 50px;
z-index: 5;
text-align: center;
margin-left: 30px;
padding: 0 10px;
}
nav .animation {
position: absolute;
height: 50px;
top: 0;
z-index: 0;
width: 100px;
background-color: rgb(58, 233, 218);
border-radius: 10%;
transition: all 0.5s ease 0s;
}
a:nth-child(1) {
width: 150px;
left: 0;
}
input[type=text] {
padding: 6px;
margin-top: 13px;
font-size: 17px;
border: none;
border-radius: 15px;
}
.search-container button {
float: right;
padding: 6px 10px;
margin-top: 13px;
margin-right: 30px;
font-size: 17px;
border-radius: 15px;
background-color: rgb(58, 233, 218);
}
.search-container button:hover {
background-color: rgb(35, 168, 157);
}
.icon {
color: white;
z-index: 5;
}
.search-container {
float: right;
}
.links {
display: inline-block;
}
<!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="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="stylesheet" href="navbar.css">
<title>Document</title>
</head>
<body>
<header>
<nav>
<div class="links">
<span class="icon fas fa-bars"></span>
Home
About
Contact
Privacy Policy
Sign-in
<div class="animation start-home"></div>
</div>
<div class="search-container">
<form>
<input type="text" placeholder="Search..." name="search" class="searchbar">
<button type="submit"><i class="fas fa-search"></i><span class="text">Search</span></button>
</form>
</div>
</nav>
</header>
</body>
</html>
This solution is made in JS, which made it possible to remove excess from CSS and not depend on pre-set CSS values.
I hope this can help somehow.
I have just started trying to learn to code.
I have tried to replicate the google homepage as part of an online course. This is HTML and CSS, however I have ran into the following issue.
Context: I added the border in css for my own sake, so I can see where and how much space the center is taking.
Here is the code in a snippet:
body,
html {
background-color: white;
font-size: 1em;
width: 100%;
max-width: 2400px;
max-height: 100vh;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
height: 100vh;
position: fixed;
}
.navigation {
list-style: none;
overflow: hidden;
width: 100%;
background-color: white;
height: 8vh;
display: block;
text-align: right;
}
.navigation li {
display: inline-block;
font-size: .9em;
}
.navigation li a {
padding: 7px;
text-decoration: none;
color: black;
justify-content: center;
}
.navigation li a:hover {
cursor: pointer;
text-decoration: underline;
}
.navimage {
border-radius: 50%;
border: 5px solid transparent;
}
#user-image {
margin-right: 1em;
}
.navimage:hover {
border-color: #E8E8E8;
cursor: pointer;
}
.center {
width: 100%;
height: 84vh;
text-align: center;
border: 1px solid green;
}
.google-logo {
margin-top: 10em;
margin-bottom: 1em;
}
.search input {
margin-top: 1em;
margin-bottom: 1em;
border: 2px solid #d3d3d3;
width: 28%;
height: 40px;
border-radius: 30px;
font-size: 1.4em;
padding-left: 50px;
padding-right: 40px;
color: black;
}
input:hover {
box-shadow: 3px violet;
}
#magnifier-glass {
position: absolute;
margin-top: 36px;
margin-left: 20px;
}
#microphone {
position: absolute;
margin-top: 36px;
margin-left: -36px;
}
#lucky {
width: 100%;
}
.btn {
background-color: #f0f0f0;
width: 8%;
height: 40px;
border-radius: 5px;
margin: 10px;
border-color: transparent;
font-size: 15px;
}
.btn:hover {
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
cursor: pointer;
}
footer {
width: 100%;
height: 8vh;
justify-content: space-between;
background-color: #E8E8E8;
display: flex;
position: fixed;
z-index: 1;
border: 1px solid red;
}
footer ul {
list-style: none;
}
footer ul li {
display: inline-block;
margin: 5px;
padding-top: 25px;
}
footer ul li a {
text-decoration: none;
font-size: 1em;
color: #686868;
}
footer ul li a:hover {
text-decoration: underline;
}
.footer-right {
margin-right: 30px !important;
}
.footer-left {
margin-left: -15px !important;
}
<!DOCTYPE html>
<html lang="eng">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/png" href="images/title-logo.png">
<title>Google</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- NAVBAR-->
<header>
<navbar class="navigation">
<ul>
<li>
Gmail
</li>
<li>
Images
</li>
<li>
<img class="navimage" width="30" style="vertical-align:middle" src="images/Apps-Google-Chrome-App-List-icon.png">
</li>
<li>
<img id="user-image" class="navimage" width="30" style="vertical-align:middle" src="images/userimage.jpg">
</li>
</ul>
</navbar>
</header>
<!-- SEARCH BAR / MAIN PAGE-->
<div class="center">
<div class="google-logo">
<img src="images/googlelogo_color_272x92dp.png">
</div>
<div class="search">
<i id="magnifier-glass" class="fa fa-search" aria-hidden="true"></i>
<input type="text" class="searchGoogle" placeholder="">
<i id="microphone" class="fa fa-microphone" aria-hidden="true"></i>
</div>
<div id="lucky">
<button class="btn" type="button">Google Search</button>
<button class="btn" type="button">I'm Feeling Lucky</button>
</div>
</div>
<!--FOOTER-->
<footer>
<ul class="footer-left">
<li>
About
</li>
<li>
Advertising
</li>
<li>
Business
</li>
<li>
How Search works
</li>
</ul>
<ul class="footer-right">
<li>
Privacy
</li>
<li>
Terms
</li>
<li>
Settings
</li>
</ul>
</footer>
</body>
</html>
I know the CSS is probably bad as it is too large.
But my main concern is: why does the footer disappear when I remove the border from the center div?
Yes, I tried to remove and modify but I can't figure out what is messing it up (apart from me doing it all wrong).
Thank you for your help.
The footer doesn't disappear, it just drops further down so it doesn't appear on the screen and you don't set overflow:auto to body so you can't see it by scrolling.
By the way, it caused by .google-logo's margin. Try deleting it.
Second way, to fix this, see this example. I gave overflow:auto and fixed a bit of CSS for the footer to make it neater by removing position and height.
body, html {
background-color: white;
font-size: 1em;
width: 100%;
max-width: 2400px;
max-height: 100vh;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
height: 100vh;
position: fixed;
overflow: auto;
}
.navigation {
list-style: none;
overflow: hidden;
width: 100%;
background-color: white;
height: 8vh;
display: block;
text-align: right;
}
.navigation li {
display: inline-block;
font-size: .9em;
}
.navigation li a {
padding: 7px;
text-decoration: none;
color: black;
justify-content: center;
}
.navigation li a:hover{
cursor: pointer;
text-decoration: underline;
}
.navimage {
border-radius: 50%;
border: 5px solid transparent;
}
#user-image{
margin-right: 1em;
}
.navimage:hover {
border-color: #E8E8E8;
cursor: pointer;
}
.center {
width: 100%;
height: 84vh;
text-align: center;
}
.google-logo {
margin-top: 10em;
margin-bottom: 1em;
}
.search input {
margin-top: 1em;
margin-bottom: 1em;
border: 2px solid #d3d3d3;
width: 28%;
height: 40px;
border-radius: 30px;
font-size: 1.4em;
padding-left: 50px;
padding-right: 40px;
color: black;
}
input:hover {
box-shadow: 3px violet;
}
#magnifier-glass {
position:absolute;
margin-top: 36px;
margin-left: 20px;
}
#microphone {
position: absolute;
margin-top: 36px;
margin-left: -36px;
}
#lucky {
width: 100%;
}
.btn {
background-color: #f0f0f0;
width: 8%;
height: 40px;
border-radius: 5px;
margin: 10px;
border-color: transparent;
font-size: 15px;
}
.btn:hover{
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
cursor: pointer;
}
footer {
width: 100%;
height: auto;
justify-content: space-between;
background-color: #E8E8E8;
display: flex;
z-index: +1;
}
footer ul {
list-style: none;
}
footer ul li {
display: inline-block;
margin: 5px;
padding-top: 25px;
}
footer ul li a {
text-decoration: none;
font-size: 1em;
color: #686868;
}
footer ul li a:hover{
text-decoration: underline;
}
.footer-right {
margin-right: 30px !important;
}
.footer-left {
margin-left: -15px !important;
}
<html lang="eng">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/png" href="images/title-logo.png">
<title>Google</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- NAVBAR-->
<header>
<navbar class="navigation">
<ul>
<li>
Gmail
</li>
<li>
Images
</li>
<li>
<img class="navimage" width="30" style="vertical-align:middle" src="images/Apps-Google-Chrome-App-List-icon.png">
</li>
<li>
<img id="user-image"class="navimage" width="30" style="vertical-align:middle" src="images/userimage.jpg">
</li>
</ul>
</navbar>
</header>
<!-- SEARCH BAR / MAIN PAGE-->
<div class="center">
<div class="google-logo">
<img src="images/googlelogo_color_272x92dp.png">
</div>
<div class="search">
<i id="magnifier-glass" class="fa fa-search" aria-hidden="true"></i>
<input type="text" class="searchGoogle" placeholder="">
<i id="microphone" class="fa fa-microphone" aria-hidden="true"></i>
</div>
<div id="lucky">
<button class="btn" type="button">Google Search</button>
<button class="btn" type="button">I'm Feeling Lucky</button>
</div>
</div>
<!--FOOTER-->
<footer>
<ul class="footer-left">
<li>
About
</li>
<li>
Advertising
</li>
<li>
Business
</li>
<li>
How Search works
</li>
</ul>
<ul class="footer-right">
<li>
Privacy
</li>
<li>
Terms
</li>
<li>
Settings
</li>
</ul>
</footer>
</body>
</html>
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 just started coding CSS and i am very mad because my login form in the header is going below my contact us nav link on smaller screens then my desktop. Can anyone tell me why? HTML & CSS BELOW
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Site Description">
<meta name="keywords" content="Site Keywords">
<title>AffAttraction | Performance Based Marketing Network</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/showcase.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>AffAttraction</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Advertisers</li>
<li>Publishers</li>
<li>About Us</li>
<li>Contact Us</li>
</nav>
<div id="login">
<form action="publishers/login.php" method="post">
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit" class="header_login_btn">Login</button>
</form>
</div>
</div>
</header>
<section id="showcase">
<div class="container">
<h1><span class="highlight">Performance</span> Based Marketing</h1>
<p>AffAttraction will help you make money from your Websites, Apps, Games, and More!</p>
</div>
</section>
</body>
</html>
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: : 1.5;
margin: 0;
padding: 0;
background-color: #F4F4F4;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
.header_login_btn {
color: #FFFFFF;
background-color: #00CF03;
width: 70px;
height: 35px;
margin-top: 10px;
border: #00CF03 2px solid;
border-radius: 2px;
}
.header_login_btn:hover {
color: #FFFFFF;
background-color: #42DB4C;
width: 70px;
height: 35px;
margin-top: 10px;
border: #42DB4C 2px solid;
border-radius: 2px;
}
/* Header */
header {
color: #FFFFFF;
background-color: #418DD9;
padding-top: 15px;
min-height: 50px;
}
header a {
color: #FFFFFF;
text-decoration: none;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding-right: 20px;
padding-left: 20px;
}
header #branding {
float: left;
font-weight: bold;
}
header #branding h1 {
margin: 0;
}
header nav {
float: center;
padding-top: 10px;
}
header a:hover {
color: #42DB4C;
}
header #login {
margin-top: -15px;
float: right;
}
header #login input {
height: 25px;
width: 110px;
border: #FFFFFF;
border-radius: 8px;
padding: 5px;
float: none;
}
/* Showcase */
#showcase {
color: #FFFFFF;
min-height: 500px;
background: url('../img/cover.jpg') no-repeat;
text-align: center;
}
#showcase h1 {
margin-top: 100px;
font-size: 50px;
font-weight: bold;
}
#showcase p {
font-size: 30px;
}
#showcase .highlight {
color: #42DB4C;
}
Any help is appreciated!
(1) In your css file, you should set header #login margin-top to -35px.
header #login {
margin-top: -35px;
float: right;
}
（2）Use position:absolute to solve the problem
header {
color: #FFFFFF;
background-color: #418DD9;
padding-top: 15px;
min-height: 50px;
position: relative;
}
header #login {
position: absolute;
right: 20px;
transform: translateY(-50%);
}
(3)
header {
color: #FFFFFF;
background-color: #418DD9;
padding-top: 15px;
min-height: 50px;
position: relative;
}
header #login {
position: absolute;
top: 50%;
right: 20px;
margin-top: -22.25px;
}
I am trying to create a popover class of respective sections, but it is not aligning as symmetrically as desired.
I want it to look like this: https://www.screencast.com/t/DrbkBj36M
Here is my CSS/HTML. Help would be much appreciated.
.filters {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
text-align: right;
min-height: 70px;
max-height: 70px;
width: 100%;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 10px;
padding-right: 30px;
}
.locations {
border-right: #DDDDDD solid 1px;
}
.locations, .amenities {
height: 100%;
padding-left: 30px;
flex-grow: 1;
text-align: left;
}
h3 {
font-weight: 600;
line-height: .6;
}
h4 {
font-weight: 400;
font-size: 14px;
line-height: .6;
}
button {
border:none;
border-radius: 4px;
width: 20%;
height: 48px;
font-size: 18px;
background-color: #FF5A5F;
color: white;
margin: 0 30px 0 auto;
}
button:hover {
opacity: 0.9;
}
.popover {
position: absolute;
display: none;
width: inherit;
font-size: 16px;
background-color:#FAFAFA;
border: #DDDDDD 1px solid;
border-radius: 4px;
padding: 0 30px 30px 30px;
margin: 0;
}
.locations:hover .popover {
display: block;
}
.amenities:hover .popover {
display: block;
padding-top: 30px;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="4-common.css" media="all">
<link rel="stylesheet" type="text/css" href="6-filters.css" media="all">
<link rel="icon" type="image/x-icon" href="images/favicon.ico" sizes="16x16">
</head>
<body>
<header>
</header>
<div class="container">
<section class="filters">
<div class="locations">
<h3>States</h3>
<h4>California, New York...</h4>
<ul class="popover">
<h2>California</h2>
<li>Berkeley</li>
<li>Los Angeles</li>
<li>San Francisco</li>
<h2>New York</h2>
<li>New York</li>
</ul>
</div>
<div class="amenities">
<h3>Amenities</h3>
<h4>Internet, kitchen...</h4>
<ul class="popover">
<h2>Amenities</h2>
<li>Fiber internets</li>
<li>Big stove</li>
<li>Cryogenic chamber</li>
</ul>
</div>
<button>Search</button>
</section>
</div>
</body>
</html>
Eh.. is this what you want?
.filters {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
text-align: right;
height: 70px;
width: 100%;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding-right: 30px;
}
.locations {
border-right: #DDDDDD solid 1px;
}
.locations, .amenities {
height: 100%;
padding-left: 30px;
flex-grow: 1;
text-align: left;
position: relative;
}
h3 {
font-weight: 600;
line-height: .6;
}
h4 {
font-weight: 400;
font-size: 14px;
line-height: .6;
}
button {
border:none;
border-radius: 4px;
width: 20%;
height: 48px;
font-size: 18px;
background-color: #FF5A5F;
color: white;
margin: 0 30px 0 auto;
}
button:hover {
opacity: 0.9;
}
.popover {
position: absolute;
top: 100%;
right: 0;
bottom: auto;
left: 0;
display: none;
width: inherit;
font-size: 16px;
background-color:#FAFAFA;
border: #DDDDDD 1px solid;
border-radius: 4px;
padding: 0 30px 30px 30px;
margin-top: 1px;
margin-left: -1px;
}
.amenities .popover
{
margin-left: -2px;
}
.locations:hover .popover {
display: block;
}
.amenities:hover .popover {
display: block;
padding-top: 30px;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="4-common.css" media="all">
<link rel="stylesheet" type="text/css" href="6-filters.css" media="all">
<link rel="icon" type="image/x-icon" href="images/favicon.ico" sizes="16x16">
</head>
<body>
<header>
</header>
<div class="container">
<section class="filters">
<div class="locations">
<h3>States</h3>
<h4>California, New York...</h4>
<ul class="popover">
<h2>California</h2>
<li>Berkeley</li>
<li>Los Angeles</li>
<li>San Francisco</li>
<h2>New York</h2>
<li>New York</li>
</ul>
</div>
<div class="amenities">
<h3>Amenities</h3>
<h4>Internet, kitchen...</h4>
<ul class="popover">
<h2>Amenities</h2>
<li>Fiber internets</li>
<li>Big stove</li>
<li>Cryogenic chamber</li>
</ul>
</div>
<button>Search</button>
</section>
</div>
</body>
</html>