Description of my problem: I have a slider without js and I need to add a fixed Text and a button on top of it
html:
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop</title>
<meta charset="UTF-8">
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</head>
<body>
<header class="header">
Fresh market
<input class="menu-btn" type="checkbox" id="menu-btn" />
<link rel="stylesheet" href="style.css">
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Home</li>
<li>Shop</li>
<li>About</li>
<li>Contact</li>
<div class="icons">
<input class="search" placeholder="Search.." type="text">
<ion-icon name="search-outline"></ion-icon>
<ion-icon name="person-circle-outline"></ion-icon>
<ion-icon name="bag-handle-outline"></ion-icon>
</div>
</ul>
</header>
<div class="slider">
<input type="radio" name="switch" id="btn1" checked>
<input type="radio" name="switch" id="btn2">
<input type="radio" name="switch" id="btn3">
<div class="switch">
<label for="btn1"></label>
<label for="btn2"></label>
<label for="btn3"></label>
</div>
<div class="slider-inner">
<div class="slides">
<img src="https://static.wixstatic.com/media/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.webp"/>
<img src="https://static.wixstatic.com/media/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.webp"/>
<img src="https://static.wixstatic.com/media/ad420a_01886647b6df44198b05bc86420472c0~mv2.jpg/v1/fill/w_1112,h_601,fp_0.73_0.29,q_90/ad420a_01886647b6df44198b05bc86420472c0~mv2.webp"/>
</div>
</div>
</div>
</body>
</html>
css:
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #ffffff;
}
a {
color: #000;
}
/* header */
.header {
background-color: #ffff;
/*box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);*/
position: fixed;
width: 100%;
z-index: 99;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
color:green;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
color:green;
}
.logo::before {
content:url('imgonline-com-ua-Resize-HhpRdaDieHxuk8.png');
display: inline-block;
padding-right: 3px;
vertical-align: middle;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
.icons{
/* display:block; */
display:flex;
gap:20px;
float:right;
padding:16px;
margin-right:50px;
/* clear:both; */
}
ion-icon{
font-size:25px;
}
.search{
border:none;
}
.search::placeholder{
font-size
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: center;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
.slider {
position: relative;
width: 680px;
margin: 50px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
transform: translateY(40%);
}
.slider input[name="switch"] {
display: none;
}
.switch {
position: absolute;
left: 0;
bottom: -40px;
text-align: center;
width: 100%;
}
.switch label {
display: inline-block;
width: 8px;
height: 8px;
cursor: pointer;
margin: 0 0px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, .8);
border-radius: 50%;
border: 5px solid #2f363c;
background-color: #738290;
}
#btn1:checked~.switch label[for="btn1"] {
background-color: white;
}
#btn2:checked~.switch label[for="btn2"] {
background-color: white;
}
#btn3:checked~.switch label[for="btn3"] {
background-color: white;
}
.slider-inner {
overflow: hidden;
}
.slides {
width: 500%;
transition: all 0.5s;
}
.slides img {
width: 680px;
height: 340px;
float: left;
}
#btn1:checked~slider-inner slides {
transform: translate(0);
}
#btn2:checked~.slider-inner .slides {
transform: translate(-680px);
}
#btn3:checked~.slider-inner .slides {
transform: translate(-1360px);
}
also, this slider is written only in html and css, so there may be many bugs here, and the code itself is probably written quite poorly and I have never made sliders so I don't know how to do it can you help?
this is what the slider should look like
This one is done with following steps:
Remove the <img> tags in div.slides
Create <div> with class .slide-wrapper
Add <h1>, <p> and <button> in div.slide-wrapper
Now add required image to the background of div.slide-wrapper using css background-image: url(image-link);
Don't forget to give the background-size: cover; to the div.slide-wrapper to fit the image in <div>
It is just an easy task...
Note: I am not going to style this one it is all up to you. Give the content some margin and padding freely to gain required design. You can also set image using before and after pseudo selectors.
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #ffffff;
}
a {
color: #000;
}
/* header */
.header {
background-color: #ffff;
/*box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);*/
position: fixed;
width: 100%;
z-index: 99;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
color: green;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
color: green;
}
.logo::before {
content: url('imgonline-com-ua-Resize-HhpRdaDieHxuk8.png');
display: inline-block;
padding-right: 3px;
vertical-align: middle;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
.icons {
/* display:block; */
display: flex;
gap: 20px;
float: right;
padding: 16px;
margin-right: 50px;
/* clear:both; */
}
ion-icon {
font-size: 25px;
}
.search {
border: none;
}
.search::placeholder {
/* font-size */
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 240px;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: center;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
.slider {
position: relative;
width: 680px;
margin: 50px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
transform: translateY(40%);
}
.slider input[name="switch"] {
display: none;
}
.switch {
position: absolute;
left: 0;
bottom: -40px;
text-align: center;
width: 100%;
}
.switch label {
display: inline-block;
width: 8px;
height: 8px;
cursor: pointer;
margin: 0 0px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, .8);
border-radius: 50%;
border: 5px solid #2f363c;
background-color: #738290;
}
#btn1:checked~.switch label[for="btn1"] {
background-color: white;
}
#btn2:checked~.switch label[for="btn2"] {
background-color: white;
}
#btn3:checked~.switch label[for="btn3"] {
background-color: white;
}
.slider-inner {
overflow: hidden;
}
.slides {
width: 500%;
transition: all 0.5s;
position: relative;
}
.slides .slide-wrapper {
width: 680px;
height: 340px;
float: left;
}
#btn1:checked~slider-inner slides {
transform: translate(0);
}
#btn2:checked~.slider-inner .slides {
transform: translate(-680px);
}
#btn3:checked~.slider-inner .slides {
transform: translate(-1360px);
}
/* Code For Your Question */
.slides .slide-wrapper {
background-size: cover;
background-repeat: no-repeat;
}
.slides .slide-wrapper:nth-child(1){
background-image: url('https://static.wixstatic.com/media/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.webp');
}
.slides .slide-wrapper:nth-child(2){
background-image: url('https://static.wixstatic.com/media/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.webp');
}
.slides .slide-wrapper:nth-child(3){
background-image: url('https://static.wixstatic.com/media/ad420a_01886647b6df44198b05bc86420472c0~mv2.jpg/v1/fill/w_1112,h_601,fp_0.73_0.29,q_90/ad420a_01886647b6df44198b05bc86420472c0~mv2.webp');
}
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop</title>
<meta charset="UTF-8">
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</head>
<body>
<header class="header">
Fresh market
<input class="menu-btn" type="checkbox" id="menu-btn" />
<link rel="stylesheet" href="styles.css">
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Home</li>
<li>Shop</li>
<li>About</li>
<li>Contact</li>
<div class="icons">
<input class="search" placeholder="Search.." type="text">
<ion-icon name="search-outline"></ion-icon>
<ion-icon name="person-circle-outline"></ion-icon>
<ion-icon name="bag-handle-outline"></ion-icon>
</div>
</ul>
</header>
<div class="slider">
<input type="radio" name="switch" id="btn1" checked>
<input type="radio" name="switch" id="btn2">
<input type="radio" name="switch" id="btn3">
<div class="switch">
<label for="btn1"></label>
<label for="btn2"></label>
<label for="btn3"></label>
</div>
<div class="slider-inner">
<div class="slides">
<div class="slide-wrapper">
<h1>Fresh Market</h1>
<p>We'll Deliver Everything You Need</p>
<button>Shop Online</button>
</div>
<!-- <img
src="https://static.wixstatic.com/media/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.webp" /> -->
<div class="slide-wrapper">
<h1>Fresh Market 2</h1>
<p>We'll Deliver Everything You Need</p>
<button>Shop Online</button>
</div>
<!-- <img
src="https://static.wixstatic.com/media/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.webp" /> -->
<div class="slide-wrapper">
<h1>Fresh Market 3</h1>
<p>We'll Deliver Everything You Need</p>
<button>Shop Online</button>
<!-- <img
src="https://static.wixstatic.com/media/ad420a_01886647b6df44198b05bc86420472c0~mv2.jpg/v1/fill/w_1112,h_601,fp_0.73_0.29,q_90/ad420a_01886647b6df44198b05bc86420472c0~mv2.webp" /> -->
</div>
</div>
</div>
</div>
</body>
</html>
Related
I have certain menu items in Navbar. It converts to Hamburger when rendered in mobile view thus its responsive. The items in Hamburger menu doesn't align properly. Following is the code reference
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height 0.2s ease-out;
}
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background 0.2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: "";
display: block;
height: 100%;
position: absolute;
transition: all 0.2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 240px;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
.menu-search {
display: flex;
flex-wrap: wrap;
float: right;
}
.search-box h5 {
color: red;
}
/* 48em = 768px */
#media (min-width: 52em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu-search .menu-box .menu {
clear: none;
text-align: left;
max-height: none;
}
.header .menu-icon {
display: none;
}
.menu {
float: left;
}
}
<header class="header">
Celebyte
<div class="menu-search">
<span class="search-box">
<h5>Search Box</h5>
</span>
<span class="menu-box">
<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>Celebyte Gifting</li>
<li>Track Order</li>
<li>All Categories</li>
<li>Login</li>
</ul>
</span>
</div>
</header>
As seen above I wanted SearchBox and MenuItems to be in one row, thus used flex, but, even the hamburger items also getting the above property. My intention is to align Hamburger items to left. So what could be the best possible solution?
Codesandbox link: https://codesandbox.io/s/vibrant-night-r7p4e
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height 0.2s ease-out;
}
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background 0.2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: "";
display: block;
height: 100%;
position: absolute;
transition: all 0.2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 240px;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
.menu-search {
display: flex;
flex-wrap: wrap;
width: calc(100% - 166.297px);
}
.search-box h5 {
color: red;
}
/* 48em = 768px */
#media (min-width: 52em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu-search .menu-box .menu {
clear: none;
text-align: left;
max-height: none;
}
.header .menu-icon {
display: none;
}
.menu {
float: left;
}
}
.search-box {
position: absolute;
right: 10px;
}
<header class="header">
Celebyte
<div class="menu-search">
<span class="menu-box">
<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>Celebyte Gifting</li>
<li>Track Order</li>
<li>All Categories</li>
<li>Login</li>
</ul>
</span>
<span class="search-box">
<h5>Search Box</h5>
</span>
</div>
</header>
I'm new in css and I have pure hamburger css menu
Problem is the menu is part of page as absolute item, I want it to float and show always when page scroll, the position is just below the header:
Desired result:
And when menu is open take space of page and show an icon at the bottom of menu:
Snippet:
*{
box-sizing: border-box;
}
body{
font-family: 'Montserrat', sans-serif;
margin:0px;
}
.section-title{
color: #2ddf5c;
}
.main-header{
display: flex;
align-items: center;
justify-content: space-evenly;
width:100%;
/* background: #2ddf5c; */
padding: 16px;
}
.main-header > div{
vertical-align: middle;
}
.main-header__brand{
color: #7B8F34;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
.main-nav__searchbar_container {
display: flex;
width: 100%;
padding: 8px 8px 8px 40px;
overflow: hidden;
vertical-align: middle;
white-space: nowrap;
}
.main-nav__searchbar_container input.main-nav__searchbar{
width:100%;
height: 50px;
/* background: #2b303b; */
border: none;
font-size: 10pt;
float: left;
/* color: #fff; */
padding-left: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.main-nav__searchbar_container input.main-nav__searchbar::-webkit-input-placeholder{
color: #65737e;
}
.main-nav__searchbar_container input.main-nav__searchbar:-moz-placeholder{ /*Frefox 18 */
color: #65737e;
}
.main-nav__searchbar_container input.main-nav__searchbar::-moz-placeholder{/*Frefox 19 */
color: #65737e;
}
.main-nav__searchbar_container input.main-nav__searchbar:-ms-input-placeholder{
color: #65737e;
}
.main-nav__searchbar_container button.icon{
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: none;
background: #4f5b66;
height: 50px;
width: 50px;
color: #ffffff;
opacity: 0;
font-size: 10pt;
-webkit-transition: all .55s ease;
-moz-transition: all .55s ease;
-ms-transition: all .55s ease;
-o-transition: all .55s ease;
transition: all .55s ease;
}
.main-nav__searchbar_container:hover button.icon,
.main-nav__searchbar_container:active button.icon,
.main-nav__searchbar_container:focus button.icon{
outline: none;
opacity: 1;
margin-left: -50px;
}
.main-nav__searchbar_container:hover button.icon:hover{
background: red;
cursor: pointer;
}
input.main-nav__searchbar:hover{
border: 2px solid #4f5b66;
}
.main-nav__searchbar{
display: flex;
width: 100%;
/* margin: 8px; */
/* padding: 8px; */
border: 2px solid;
border-radius: 4px;
outline: none;
transition: .3s;
}
.main-nav{
display: flex;
width: 100%;
text-align: right;
margin: 0 10px;
}
.main-nav__items{
display: flex;
margin:8px;
padding:8px;
list-style: none;
}
.main-nav__item{
display: inline-block;
}
.main-nav__social{
display:block;
width: 35px;
height: 35px;
margin-left: 10px;
padding: 4px;
}
#main-slider {
width: 100%;
height: 528px;
/* border-radius: 0% 0% 50% 50% / 0% 0% 20% 20%; */
border-bottom-right-radius: 50% 25%;
border-bottom-left-radius: 50% 25%;
position: relative;
}
/* menu icon */
.main .menu-icon {
cursor: pointer;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.main .menu-icon .nav-icon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.main .menu-icon .nav-icon:before,
.main .menu-icon .nav-icon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.main .menu-icon .nav-icon:before {
top: 5px;
}
.main .menu-icon .nav-icon:after {
top: -5px;
}
/* menu btn */
.main .menu-btn {
display: none;
}
.main .menu-btn:checked ~ .menu {
/* max-height: 240px; */
display: block;
}
.main .menu-btn:checked ~ .menu-icon .nav-icon {
background: transparent;
}
.main .menu-btn:checked ~ .menu-icon .nav-icon:before {
transform: rotate(-45deg);
top:0;
}
.main .menu-btn:checked ~ .menu-icon .nav-icon:after {
transform: rotate(45deg);
top:0;
}
#media (min-width: 48em) {
.main li a {
padding: 20px 30px;
}
.main .menu {
clear: none;
float: right;
max-height: none;
}
}
<header class="main-header">
<div>
<a href="index.html" class="main-header__brand">
uHost
</a></div><nav class="main-nav">
<div class=main-nav__searchbar_container><input type="text" placeholder="Search" class="main-nav__searchbar">
<button class="icon"><i class="fas fa-search" aria-hidden="true"></i></button>
</div>
<ul class="main-nav__items">
<li class="main-nav__item">
<img class="main-nav__social" src="navbar-icons/social-media__icons/facebook.svg" alt="facebook">
</li>
<li class="main-nav__item">
<img class="main-nav__social" src="navbar-icons/social-media__icons/instagram-bosquejado.svg" alt="instagram">
</li>
</ul>
</nav>
</header>
<div class="main">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</div>
<main>
<section>
<div class="slider-wrapper">
<img id="main-slider" src="https://via.placeholder.com/1365x528?text=Slider">
</div>
</section>
I try to change position:fixed instead position: absolute on
.main .menu-icon .nav-icon:before,
.main .menu-icon .nav-icon:after
class, but it no works, hamb menu bars disappear and some strange effect happen when it opens
Regards
Add this style on your style it is solution:
*{
box-sizing: border-box;
}
body{
font-family: 'Montserrat', sans-serif;
margin:0px;
}
.section-title{
color: #2ddf5c;
}
.main-header{
display: flex;
align-items: center;
justify-content: space-evenly;
width:100%;
/* background: #2ddf5c; */
padding: 16px;
}
.main-header > div{
vertical-align: middle;
}
.main-header__brand{
color: #7B8F34;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
.main-nav__searchbar_container {
display: flex;
width: 100%;
padding: 8px 8px 8px 40px;
overflow: hidden;
vertical-align: middle;
white-space: nowrap;
}
.main-nav__searchbar_container input.main-nav__searchbar{
width:100%;
height: 50px;
/* background: #2b303b; */
border: none;
font-size: 10pt;
float: left;
/* color: #fff; */
padding-left: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.main-nav__searchbar_container input.main-nav__searchbar::-webkit-input-placeholder{
color: #65737e;
}
.main-nav__searchbar_container input.main-nav__searchbar:-moz-placeholder{ /*Frefox 18 */
color: #65737e;
}
.main-nav__searchbar_container input.main-nav__searchbar::-moz-placeholder{/*Frefox 19 */
color: #65737e;
}
.main-nav__searchbar_container input.main-nav__searchbar:-ms-input-placeholder{
color: #65737e;
}
.main-nav__searchbar_container button.icon{
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: none;
background: #4f5b66;
height: 50px;
width: 50px;
color: #ffffff;
opacity: 0;
font-size: 10pt;
-webkit-transition: all .55s ease;
-moz-transition: all .55s ease;
-ms-transition: all .55s ease;
-o-transition: all .55s ease;
transition: all .55s ease;
}
.main-nav__searchbar_container:hover button.icon,
.main-nav__searchbar_container:active button.icon,
.main-nav__searchbar_container:focus button.icon{
outline: none;
opacity: 1;
margin-left: -50px;
}
.main-nav__searchbar_container:hover button.icon:hover{
background: red;
cursor: pointer;
}
input.main-nav__searchbar:hover{
border: 2px solid #4f5b66;
}
.main-nav__searchbar{
display: flex;
width: 100%;
/* margin: 8px; */
/* padding: 8px; */
border: 2px solid;
border-radius: 4px;
outline: none;
transition: .3s;
}
.main-nav{
display: flex;
width: 100%;
text-align: right;
margin: 0 10px;
}
.main-nav__items{
display: flex;
margin:8px;
padding:8px;
list-style: none;
}
.main-nav__item{
display: inline-block;
}
.main-nav__social{
display:block;
width: 35px;
height: 35px;
margin-left: 10px;
padding: 4px;
}
#main-slider {
width: 100%;
height: 528px;
/* border-radius: 0% 0% 50% 50% / 0% 0% 20% 20%; */
border-bottom-right-radius: 50% 25%;
border-bottom-left-radius: 50% 25%;
position: relative;
}
/* menu icon */
.main .menu-icon {
cursor: pointer;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.main .menu-icon .nav-icon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.main .menu-icon .nav-icon:before,
.main .menu-icon .nav-icon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.main .menu-icon .nav-icon:before {
top: 5px;
}
.main .menu-icon .nav-icon:after {
top: -5px;
}
/* menu btn */
.main .menu-btn {
display: none;
}
.main .menu-btn:checked ~ .menu {
/* max-height: 240px; */
display: block;
}
.main .menu-btn:checked ~ .menu-icon .nav-icon {
background: transparent;
}
.main .menu-btn:checked ~ .menu-icon .nav-icon:before {
transform: rotate(-45deg);
top:0;
}
.main .menu-btn:checked ~ .menu-icon .nav-icon:after {
transform: rotate(45deg);
top:0;
}
#media (min-width: 48em) {
.main li a {
padding: 20px 30px;
}
.main .menu {
clear: none;
float: right;
max-height: none;
}
}
/* start update */
main {display: flex;position: relative;}
main .main {
background: #fff;
order: 2;
padding-top: 15px;
}
main .main .menu {
transition: all .3s ease-in-out;
width: 0;
overflow: hidden;
margin: 0;
padding: 0;
text-align: center;
}
main .main .menu-icon {
position: absolute;
right: 0;
top: 0;
z-index: 9;
}
main .main .menu-btn:checked ~ .menu {
width: 200px;
font-size: 14px;
opacity: 1;
padding-left: 25px;
}
/* end update */
<header class="main-header">
<div>
<a href="index.html" class="main-header__brand">
uHost
</a></div>
<nav class="main-nav">
<div class=main-nav__searchbar_container><input type="text" placeholder="Search" class="main-nav__searchbar">
<button class="icon"><i class="fas fa-search" aria-hidden="true"></i></button>
</div>
<ul class="main-nav__items">
<li class="main-nav__item">
<img class="main-nav__social" src="navbar-icons/social-media__icons/facebook.svg" alt="facebook">
</li>
<li class="main-nav__item">
<img class="main-nav__social" src="navbar-icons/social-media__icons/instagram-bosquejado.svg" alt="instagram">
</li>
</ul>
</nav>
</header>
<main>
<div class="main">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn">
<span class="nav-icon"></span>
</label>
<ul class="menu">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</div>
<section>
<div class="slider-wrapper">
<img id="main-slider" src="https://via.placeholder.com/1365x528?text=Slider">
</div>
</section>
</main>
In-order to do this, you will need to make an outer container.
For example:
<nav id="outer-nav"></nav>
<div id="container">
<div class="slider"></div>
<div id="hamburger-menu">
<div id="hamburger-menu-container">
<div id="hamburger-menu-items">
<ul>
<li>etc</li>
</ul>
</div>
</div>
</div>
</div>
Now that we have the outer container, we can create the CSS to look something like this:
#container {
position:relative;
min-height: 800px;
}
#hamburger-menu {
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#hamburger-menu-container {
position: relative;
}
The hamburger menu will now stretch the whole distance allowed by the header. And as you add more contents inside the hamburger menu, you can use absolute positioning to place them in different areas of the menu.
For example:
#hamburger-menu-items {
position: absolute;
top: 100px;
}
#hamburger-something-else {
position: absolute;
bottom: 100px;
}
I haven't tested this completely, but should work. Let me know if otherwise :)
I am trying to utilize CSS for a responsive hamburger menu and the jQuery for some drop down menu items further down my webpage. The CSS hamburger menu works perfectly fine when I don't have the jQuery library loaded into my project. However as soon as I do load in the jQuery library the CSS hamburger stops working. I am not getting any error messages. How do I fix this?
This is my first question in the stackoverflow community am I am a beginner with coding. Any and all help is appreciated.
Hamburger in index.html:
</head>
<header class="header">
<a href="" class="logo"><img src="./img/consulting.png" alt=""><h1><span class ="highlight"></span>
Consulting</h1></a>
<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>Services</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</header>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
Hamburger in style.css:
body {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
line-height:1.5;
padding:0;
margin:0;
background-color:#f4f4f4;
}
a {
color: #000;
}
.header h1 {
font-family: Arial, Helvetica, sans-serif;
font-size:24px;
font-weight: bold;
width: 300px;
margin-top: 12px;
margin-bottom: 5px;
}
/*Global*/
.container{
width:100%;
margin:auto;
overflow:hidden;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
border-bottom: #e8491d 3px solid;
z-index: 3;
}
.header img {
float: left;
width: 60px;
height: 60px;
margin-bottom: 5px;
margin-right: 5px;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
margin-top: 5px;
padding: 10px 30px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding-left: 10px;
padding-right: 5px;
padding-top: 5px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
float: right;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 10px;
padding-right: 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 300px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 23px 30px;
margin-top: 5px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
padding-left: 5px;
padding-right: 5px;
}
}
I'm creating this navigation, learning how to develop responsive navigation menus. And I can't get the a tag in the menu to go full height leaving this 5px margin between the nav and the border when you hover over the buttons. I've spent quite some time trying to figure this out and googling, however I think I need someones help.
Notice in this image when I hover over the a link theres about 5px of margin between the bottom of the of a link and the nav. Example of Problem
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
a {
color: #000;
}
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 240px;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<header class="header">
<div class="container">
Test Navigation
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<!-- Main Navigation -->
<ul class="menu">
<li>Our Work</li>
<li>About</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
</header>
.header li a {
display: block;
padding: 20px 25px; /*increase the left padding by 5px */
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
Do you want to reduce the padding of the "a" tag? If so change the padding as below -
.header li a {
display: block;
padding: 5px 5px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
Otherwise let us know your query clearly with a picture as what change are you expecting. It is really difficult to figure out exactly what you want..
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
a {
color: #000;
}
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 5px 5px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 240px;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<header class="header">
<div class="container">
Test Navigation
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<!-- Main Navigation -->
<ul class="menu">
<li>Our Work</li>
<li>About</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
</header>
I have created a responsive pure css menu on my page which works great except for the hover. On hover I need it to draw a magenta line under the menu text. This works already but the line extends too far past the end of the word. It should only underline the word. I had this working previously so I know it can be done but that was with a different menu and I achieved it through random bashing of keys so I don't know how to repeat it.
This might be a duplicate. I noticed two other related posts but I was not able to get their solutions to work so either it's a different problem or I'm not figuring out how to apply the changes to my code correctly.
This is what it currently looks like:
HTML
#{
ViewBag.Title = "_Layout";
}
<link href="~/Content/Site.css" rel="stylesheet" />
<div class="wrapper">
<header class="header">
<a href="/" class="logo">
<img src="~/Images/companylogo.png" />
</a>
<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>About</li>
<li>Residential & Business</li>
<li>My Account Details</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</header>
<!--End of code for responsive menu-->
<!--HEADER END-->
<div class="page-content">
<div class="cloud1">
<img src="~/Images/cloud1.png" />
</div>
<div class="cloud2">
<img src="~/Images/cloud2.png" />
</div>
<div class="cloud3">
<img src="~/Images/cloud3.png" />
</div>
<div class="cloud4">
<img src="~/Images/cloud4.png" />
</div>
<!--CONTENT START-->
<div class="box">
#RenderBody()
</div>
<!--CONTENT END-->
</div>
<!--FOOTER START-->
<div class="bottom">
<div class="padt120">
<img src="~/Images/about-buildings.png" alt="Buildings" class="buildings" />
<div class="grass"></div>
</div>
<footer class="padtb30">
<span class="copyright">
<small class="lightgrey-text">
© Copyright 2016. All Rights Reserved. SomeCompany Inc. Privacy Policy
</small>
</span>
</footer>
</div>
</div>
CSS
#font-face {
font-family: 'HelveticaNeue-Thin';
src: url('../Resources/HelveticaNeue-Thin.woff') format('woff');
}
#font-face {
font-family: 'HelveticaNeue';
src: url('../Resources/HelveticaNeue.woff') format('woff');
}
#font-face {
font-family: 'fontawesome-webfont';
src: url('../Resources/fontawesome-webfont.ttf') format('truetype');
}
#keyframes cloud1 {
0% {
left: -488px;
top: 100px;
}
100% {
left: 100%;
top: 100px;
}
}
#keyframes cloud2 {
0% {
left: -215px;
top: 200px;
}
100% {
left: 100%;
top: 200px;
}
}
#keyframes cloud3 {
0% {
left: -421px;
top: 300px;
}
100% {
left: 100%;
top: 300px;
}
}
#keyframes cloud4 {
0% {
left: -359px;
top: 400px;
}
100% {
left: 100%;
top: 400px;
}
}
body {
padding-top: 50px;
padding-bottom: 20px;
background-image: linear-gradient(#B2D2EA, #ffffff);
overflow-x: hidden;
}
.header {
background-color: #fff;
position: absolute;
display: table;
top: 0;
left: 0;
width: 100%;
height: 80px;
z-index: 3;
font-family: HelveticaNeue-Thin;
font-size: medium;
}
.header ul {
align-self: center;
height: auto;
margin: 0;
padding: 8px 5%;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.heading li {
display: inline;
padding: 5px;
}
.header li a {
text-decoration: none;
display: inline-block;
height: 20px;
padding: 8px 8px 8px 8px;
font-family: HelveticaNeue-Thin;
border-bottom: 3px solid transparent;
transition: 0.5s ease;
white-space: nowrap;
color: #171581;
}
.header li a:hover {
color: #D60053;
border-bottom: 3px solid #D60053;
border-bottom-width: 2px;
padding-bottom: 2px;
width: auto;
}
a::after {
display: block;
content: attr(title);
font-family: HelveticaNeue-Thin;
height: 1px;
color: transparent;
overflow: hidden;
visibility: hidden;
margin-bottom: -1px;
}
#about {
padding-left: 0px;
padding-right: 0px;
text-align: center;
width: auto;
}
#residential {
padding-left: 0px;
padding-right: 0px;
text-align: center;
width: auto;
}
#myaccountdetails {
padding-left: 0px;
padding-right: 0px;
text-align: center;
width: auto;
}
#faq {
padding-left: 0px;
padding-right: 0px;
text-align: center;
width: auto;
}
#contactus {
padding-left: 0px;
padding-right: 0px;
text-align: center;
width: auto;
}
.header .logo {
display: table-cell;
height: 100%;
padding-left: 5%;
vertical-align: middle;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/*End of code added for menu*/
/*Style menu icon*/
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #80BD01;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #80BD01;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/*End of style for men icon*/
/*Icon and menu animations when the checkbox is clicked*/
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/*End of menu and icon animations*/
/*Show the horizontal menu items for larger browser widths by default*/
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
margin: 0;
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
/*End of menu items for large browser widths*/
.page-content {
font-family: HelveticaNeue;
margin-left: 10%;
margin-right: 10%;
padding-top: 50px;
padding-bottom: 100px;
max-width: 100%;
height: auto;
text-align: center;
}
.cloud1 {
animation-name: cloud1;
animation-duration: 25s;
animation-iteration-count: infinite;
position: absolute;
top: 100px;
left: -488px;
z-index: -1;
}
.cloud2 {
animation-name: cloud2;
animation-duration: 25s;
animation-delay: 10s;
animation-iteration-count: infinite;
position: absolute;
top: 200px;
left: -215px;
z-index: -1;
}
.cloud3 {
animation-name: cloud3;
animation-duration: 20s;
animation-delay: 7s;
animation-iteration-count: infinite;
position: absolute;
top: 300px;
left: -421px;
z-index: -1;
}
.cloud4 {
animation-name: cloud4;
animation-duration: 30s;
animation-delay: 10s;
animation-iteration-count: infinite;
position: absolute;
top: 400px;
left: -359px;
z-index: -1;
}
.box {
background-color: #F28B20;
border-radius: 5px;
height: auto;
margin-bottom: 150px;
width: 80%;
display: inline-block;
box-shadow: 10px 10px 5px #888888;
background-image: url("../Images/logo_faded_background-2.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.bottom {
position: relative;
height: auto;
width: 100%;
}
.grass {
height: 20px;
width: 100%;
background-color: #80BD01;
}
.padtb30 {
width: 100%;
position: absolute;
bottom: 0;
height: 80px;
line-height: 80px;
background-color: #ffffff;
text-align: center;
}
.buildings {
display: block;
margin: 0 auto;
}
.padt120 {
position: absolute;
width: 100%;
height: 100px;
bottom: 100px;
background-image: url("../Images/backcity.png");
background-position: center;
}
.copyright {
font-family: HelveticaNeue;
}
Here's a fiddle for the user who requested it.
http://jsfiddle.net/kd7nv4vb
I changed your HTML and CSS a bit and came up with this:
HTML: Added <span>in <a>:
<li>
<a href="#about">
<span>About</span>
</a>
</li>
CSS:
.header li a {
text-decoration: none;
display: inline-block;
height: 20px;
padding: 8px 8px 8px 8px;
font-family: HelveticaNeue-Thin;
white-space: nowrap;
color: #171581;
}
.header li a span {
transition: 0.5s ease;
border-bottom: 3px solid transparent;
}
.header li a:hover span {
color: #D60053;
border-bottom: 3px solid #D60053;
border-bottom-width: 2px;
padding-bottom: 2px;
width: auto;
}
Previous (your code):
.header li a {
text-decoration: none;
display: inline-block;
height: 20px;
padding: 8px 8px 8px 8px;
font-family: HelveticaNeue-Thin;
border-bottom: 3px solid transparent;
transition: 0.5s ease;
white-space: nowrap;
color: #171581;
}
.header li a:hover {
color: #D60053;
border-bottom: 3px solid #D60053;
border-bottom-width: 2px;
padding-bottom: 2px;
width: auto;
}
You're issue was with the padding on the link elements.
.header li a {
text-decoration: none;
display: inline-block;
height: 20px;
padding: 8px 8px 8px 8px; /*This was where your problem was*/
font-family: HelveticaNeue-Thin;
border-bottom: 3px solid transparent;
transition: 0.5s ease;
white-space: nowrap;
color: #171581;
}
Borders will always fill the space of the container for its respective element. If you switch that line of padding to remove the left and right padding, you should end up with what you want.
padding: 8px 0px 8px 0px;
Here is a working example.
If this works, please don't forget to mark this as the correct answer so anyone else with this problem will see this answer.