I want to create a dropdown menu, that works with mobile (i'm using media queries) platforms.
I am able to create the media query to make it work only on 320/480/720px but I am not able to create this sub-menu class, has dropdown menu.
Any tips or tutorials, I could see? Any help would be appreciated...
HTML
<div class="header">
<div class="menu">
<ul>
<li><img src="www.wemadeyou.pt/img/menu.png" alt="Menu" width="22" height="17"/>
<ul class="sub-menu">
<li>Home</li>
<li>Portfolio</li>
<li>Services</li>
<li>About</li>
<li>Contacts</li>
</ul>
</li>
</ul>
</div>
</div>
CSS
.header{
position: relative;
width: 100%;
height: 50px;
margin: 0 auto;
padding: 0;
display: block;
text-align: center;
margin-bottom: 25px;
background-color: rgba(0, 0, 0, 0.2);
}
.menu{}
Maybe not the best solution for you but I did my best.
https://codepen.io/leobezr/pen/VweOELv
Note: Use devTools to change window size.
Note: You might need to use the following code
<body>
<div class="header">
<div class="logo">LOGO</div>
<div class="navigation">
<ul class="sub-menu">
<li>Home</li>
<li>Portfolio</li>
<li>Services</li>
<li>About</li>
<li>Contacts</li>
</ul>
</div>
<div class="mobileController" style="display: none;">
<a href="#" role="button" action="openMenu">
<span class="sandwich">
<span></span>
</span>
</a>
</div>
</div>
<div class="content">
Hello world
</div>
</body>
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#300;500&display=swap');
body {
font-family: 'Montserrat', sans-serif;
font-size: 15px;
min-height: calc(100vh * 2);
}
.header {
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-around;
align-items: center;
z-index: 1000;
height: 40px;
background: #ecf5ff;
}
.header:not(.fixed) {
position: relative;
}
.header.fixed {
position: fixed;
left: 0;
top: 0;
width: 100%;
animation: fadeDown 400ms 1 ease-in;
animation-fill-mode: forwards;
}
.header .navigation ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center
}
.header .navigation li {
display: flex;
padding: 12px 6px;
}
.header .navigation li a {
text-decoration: none;
font-weight: 600;
position: relative;
color: #222;
}
.header .navigation li a:before {
content: "";
position: absolute;
left: 0;
bottom: 5px;
opacity: 0;
height: 2px;
width: 100%;
display: block;
background: #222;
}
.header .navigation li a:hover {
filter: brightness(1.1);
transition: all 200ms ease-in;
}
.header .navigation li a:hover:before {
opacity: 1;
transform: translateY(7px);
transition: all 200ms ease-in;
}
.mobileController .sandwich span {
display: block;
width: 35px;
height: 2px;
background: #222;
position: relative;
}
.mobileController .sandwich span:before {
content: "";
width: inherit;
height: inherit;
position: absolute;
left: 0;
top: -6px;
background: inherit;
}
.mobileController .sandwich span:after {
content: "";
width: inherit;
height: inherit;
position: absolute;
left: 0;
top: 6px;
background: inherit;
}
.mobileController>a {
display: flex;
height: 20px;
align-content: center;
align-items: center;
cursor: pointer;
}
.mobileController>a:hover {
transform: scale(.9);
transition: all 200ms ease-in;
}
#media (max-width: 992px) {
.navigation {
display: none;
position: absolute;
left: 0;
top: 40px;
background: #fff;
width: 100%;
z-index: -1;
border-bottom: solid 1px #ebebeb;
}
.navigation.view {
display: block !important;
animation: slideIn 400ms ease-in 1;
animation-fill-mode: forwards;
}
.navigation ul {
flex-direction: column !important;
}
.mobileController {
display: block !important;
}
}
#keyframes fadeDown {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
#keyframes slideIn {
0% {
opacity: 0;
display: block !important;
transform: translateX(-100%);
}
100% {
opacity: 1;
display: block !important;
transform: translateX(0);
}
}
window.addEventListener("scroll", () => {
const $header = document.querySelector(".header");
const headerHeight = $header.offsetHeight;
if (window.pageYOffset >= Math.round(headerHeight * 2)) {
$header.classList.add("fixed");
} else {
$header.classList.remove("fixed");
}
})
!function(){
window.addEventListener("load", init);
}()
function init() {
const $button = document.querySelector(".mobileController");
const $navigation = document.querySelector(".navigation");
$button.addEventListener("click", () => $navigation.classList.toggle("view"));
}
Ok #uniqezor I do smth^^
Look:
<div class="header">
<div class="menu">
<ul>
<li><img src="www.wemadeyou.pt/img/menu.png" alt="Menu" width="22" height="17"/>
<ul class="sub-menu">
<li>Home</li>
<li>Portfolio</li>
<li>Services</li>
<li>About</li>
<li>Contacts</li>
</ul>
</li>
</ul>
</div>
<div class="topmenu container clearfix">
<div class="top">
<a href="#" class="logo">
<img src="http://wemadeyou.pt/img/logo.png" alt="WeMadeYou - Future Together" class="logo" width="65"
height="21" itemprop="image"/>
</a>
<span class="textbox">This is what we made of you!</span>
<div class="clear"></div>
<div class="nav">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Services</li>
<li>About</li>
<li>Contacts</li>
</ul>
</div>
</div>
</div>
</div>
.header{
position: relative;
width: 100%;
height: 50px;
margin: 0 auto;
padding: 0;
display: block;
text-align: center;
margin-bottom: 25px;
background-color: rgba(0, 0, 0, 0.2);
}
.logo{
float: left;
margin-top: 6px;
margin-right: 10px;
margin-left: 5px;
}
.topmenu{
text-align: center;
height: 50px;
margin: 0 auto;
}
.top{
display: inline;
padding: 0;
}
span.textbox{
display: inline;
float: left;
font-size: 13px;
margin-top: 14px;
color: white;
font-weight: bold;
}
.nav{
float: right;
display: inline;
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
}
.nav ul{margin: 0;}
.nav li{
width: 100px;
height: 50px;
display: inline-block;
float: right;
margin-right: 5px;
}
.nav li a{
height: 40px;
color: white;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
line-height: 48px;
padding: 16px 20px 14px 20px;
}
.nav li a#home{
height: 40px;
padding: 16px 30px 14px 30px;
}
.nav li a:hover{border-bottom:thick solid #fff;}
.menu{display: none; }
#media screen and (max-width: 294px) {
span.textbox {
font-size: 10px;
}}
#media screen and (max-width: 859px) {
.clear{clear: both}
.nav{float: left;max-width: 100%;width: 100%;}
.nav li {display: block;width: 100%;
float: none;margin: 0 auto;}
.nav ul{padding: 0}
.nav li a{color:black}
}
Related
So I have this problem, I have Static web page, and i have header section and few others.
But currently right now. Whatever section i set to be under the header section, its just move over the header.
This is first time this is happening, and i cant reslove it.
On first i tought its problem in browser, but it is same on every one that i tried.
I think it is problem in the image on header section so i placed it above the txt section on the header, but section below header stil overlaps on the header.
Soo I double checked all code on header and I think there was nothing wrong that
could cause this.
header {
margin: auto;
height: 100vh;
}
.navigation-menu {
z-index: 10000;
display: flex;
align-items: center;
background: #fff;
box-shadow: 0 1px 1px #333;
justify-content: space-between;
position: fixed;
width: 100%;
left: 0;
top: 0;
padding: 20px 20px;
}
.navigation-menu nav ul {
word-spacing: 10px;
}
.navigation-menu nav ul li {
list-style-type: none;
display: inline-block;
}
.navigation-menu nav ul li a {
font-size: 19px;
}
/*
===== Hamburger Menu =====
*/
.navigation-menu .hamburger {
padding: 5px;
position: relative;
display: none;
cursor: pointer;
right: 40px;
border: none;
background: none;
outline: none;
appearance: none;
}
.navigation-menu .hamburger .bar {
transition: .3s ease all;
position: relative;
display: block;
margin-bottom: 5px;
width: 30px;
height: 3px;
background: #333;
border-radius: 26px;
}
.hamburger.is-active .bar:nth-last-child(1) {
transform: rotate(-45deg) translate(4px, -5px);
}
.hamburger.is-active .bar:nth-last-child(2) {
transform: translateX(-10px);
opacity: 0;
}
.hamburger.is-active .bar:nth-last-child(3) {
transform: rotate(45deg) translate(6px, 8px);
}
.mobile-menu {
transition: .3s ease all;
transform: translateX(100%);
position: fixed;
display: none;
align-items: center;
justify-content: space-around;
left: 0;
top: 0;
width: 100%;
padding-top: 120px;
height: 100vh;
z-index: 2;
background: #fff;
}
.mobile-menu.menu-show {
transform: translateX(0%);
}
.mobile-menu ul {
word-spacing: 10px;
}
.mobile-menu ul li {
list-style-type: none;
}
.mobile-menu ul li a {
font-family: 'Playfair Display', serif;
margin-bottom: 5px;
transition: .3s ease all;
font-size: 45px;
}
.mobile-menu ul li a:hover {
color: red;
}
#media (max-width:533px) {
.navigation-menu nav {
display: none;
}
.navigation-menu .hamburger {
display: block;
}
.mobile-menu {
display: flex;
}
}
/*
===== Hamburger Menu =====
*/
.heading__container {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
height: 100vh;
}
.heading__content {
position: relative;
margin: 6%;
display: block;
}
.heading__title h1{
font-weight: 900;
text-transform: uppercase;
font-size: 55px;
}
.heading__title h1 span {
color: red;
}
.heading__subtitle p{
font-size: 22px;
}
.heading__subtitle {
max-width: 600px;
width: 100%;
}
.heading__image {
padding: 1em;
position: relative;
text-align: center;
}
.heading__image img {
max-width: 400px;
width: 100%;
}
.heading__button-box .btn__read {
background: red;
border: solid 1px red;
}
.heading__button-box .btn__read a {
color: #fff;
}
.heading__button-box .btn__react {
position: relative;
}
.heading__button-box .btn__react::before {
position: absolute;
content: '';
left: 0;
bottom: 0;
background: red;
z-index: -1;
height: 0;
transition: .3s ease all;
width: 100%;
}
.heading__button-box .btn__react:hover::before {
height: 100%;
}
.heading__button-box button {
margin-bottom: 1%;
margin-right: 5%;
}
.heading__button-box .btn__react a {
transition: .3s ease all;
}
.heading__button-box .btn__react:hover {
border: solid 1px red;
}
.heading__button-box .btn__react:hover a {
color: #fff;
}
.heading__button-box .btn__react {
border: solid 1px red;
}
.h__wrapper {
margin-top: 50px;
}
.h__wrapper .h__button {
display: inline-block;
overflow: hidden;
height: 60px;
width: 60px;
float: left;
border-radius: 50px;
cursor: pointer;
margin: 10px 5px;
transition: .3s ease all;
box-shadow: 0 2px 12px #333;
}
.h__wrapper .h__button:hover {
width: 200px;
}
.h__wrapper .h__button .icon {
height: 60px;
width: 60px;
transition: .3s ease all;
border-radius: 50px;
text-align: center;
line-height: 60px;
box-sizing: border-box;
display: inline-block;
}
.h__wrapper .h__button .icon i {
font-size: 25px;
line-height: 60px;
}
.h__wrapper .h__button span {
font-size: 20px;
line-height: 60px;
margin-left: 10px;
font-weight: 500;
}
.h__wrapper .h__button:nth-child(1) .icon {
background: #fff;
}
.h__wrapper .h__button:nth-child(1):hover .icon {
background: rgb(126, 168, 245);
}
.h__wrapper .h__button:nth-child(1):hover .icon i{
color: #fff;
}
.h__wrapper .h__button:nth-child(2) .icon {
background: #fff;
}
.h__wrapper .h__button:nth-child(2):hover .icon {
background: rgb(214, 146, 20);
}
.h__wrapper .h__button:nth-child(2):hover .icon i{
color: #fff;
}
.h__wrapper .h__button:nth-child(3) .icon {
background: #fff;
}
.h__wrapper .h__button:nth-child(3):hover .icon {
background: #333;
}
.h__wrapper .h__button:nth-child(3):hover .icon i{
color: #fff;
}
<header>
<div class="navigation-menu">
<img src="../assets/images/logo/Anima.png" alt="">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Works</li>
<li>Projects</li>
</ul>
</nav>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
<nav class="mobile-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
<li>Projects</li>
</ul>
</nav>
<section class="heading__container">
<div class="heading__content">
<div class="heading__title">
<h1><span>Emanuel</span> <br> Rajic</h1>
</div>
<div class="heading__subtitle">
<p>I am 16 years old Front-end developer and CS Student</p>
</div>
<div class="heading__button-box">
<button class="btn__read">Read More</button>
<button class="btn__contact btn__react">Get In Touch</button>
</div>
<div class="h__wrapper">
<div class="h__button">
<div class="icon"><i class="fab fa-twitter"></i></div>
<span>Twitter</span>
</div>
<div class="h__button">
<div class="icon"><i class="fab fa-instagram"></i></div>
<span>Instagram</span>
</div>
<div class="h__button">
<div class="icon"><i class="fab fa-github"></i></div>
<span>Github</span>
</div>
</div>
</div>
<div class="heading__image">
<img src="../assets/images/header/valentin-salja-0aX51h4WvAk-unsplash.jpg">
</div>
</section>
</header>
A combination of z-index:10000, which will give this element priority over everything (so being on top all the time), and position:fixed, which will make that element have a fixed position in the said place no matter the scrolling are, the culprits. Removing those two CSS properties would fix your "issue".
Hello guys i followed a nav bar tutorial on youtube and it worked well except when I reduced the screen size to test for mobile view the nav bar didn't turn into a toggled menu, this is my whole HTML CSS code, please tell me whats the problem and how to fix it.the tutorial owner told me to see the #media tag but I'm a newbie idk what that even means
*{
padding:0;
margin: 0;
text-decloration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family:montserrat;
}
nav{
background: #0082e6;
height: 80px;
width: 100%;
}
footer{
opacity: 0.5;
}
label.logo{
color: white;
font-size: 35px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color:black;
font-size: 17px;
text-transform: uppercase;
padding: 7px 13px;
border-radius: 3px;
}
a.active,a:hover{
background: #1b9bff;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
#media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display:block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #0082e6;
}
#check:checked ~ ul{
left: 0;
}
section{
background: url(bgl.jpg) no-repeat
background-size: coover;
height: calc(100vh - 80px):
}
}
<!Doctype HTML>
<html>
<head>
<footer> </footer>
<title>
EgyptPost/Latest news about Egypt
</title>
</head>
<body>
<nav>
<input type="checkbox" id"check">
<label for="check" class="checkbtn">
<i class="fas fa-bars" > </i>
</label>
<label class="logo">EgyptPost</label>
<ul>
<li><a class="active" href="#">Home </a> </li>
<li>Health </li>
<li>News </li>
<li>About Us </li>
<li>Contact Us/FeedBack </li>
</ul>
</nav>
<section>
</section>
<img src="WordpressLogo.jpg" width="70px" height="70px" alt="EgyptPost logo">
<h1> Egypt is expected to be the 7th largest economy in the world said the minister of finance Mohammed Maait.</h1>
<img src="download.jpg" width="600px" height="100px" alt="photo of egypt's 2030 vision">
<p>Egypt is a <b>stong growing economy</b> that has an overall ranking of 33th in the world, and the first in africa, egypt will outpreform countires nearby and will dominate</p>
<footer>End of the article </footer>
</body>
</html>
Actually what you trying to achieve is a responsive Navbar without Javascript using only HTML and CSS. So their so many mistakes in your provided code I have fix everything, now you can use this code to your build.
body {
padding: 0;
margin: 0;
}
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
font-family: 'Montserrat', sans-serif;
padding: 0 5%;
height: 50px;
background-color: #3e65da;
}
nav .logo {
float: left;
width: 40%;
height: 100%;
display: flex;
align-items: center;
font-size: 24px;
color: #fff;
}
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
nav .links li {
list-style: none;
}
nav .links a {
display: block;
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
#nav-toggle {
position: absolute;
top: -100px;
}
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
nav .icon-burger .line {
width: 30px;
height: 3px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
cursor:pointer;
transition: all .3s ease-in-out;
}
section{
margin:70px 20px 30px 20px;;
font-size:15px;
text-align:center;
}
.wrap{
display:flex;
}
.wrap p{
flex:2;
padding:0px 20px;
font-size:20px;
text-align:justify;
}
#media screen and (max-width: 768px) {
nav .logo {
width: auto;
justify-content: center;
}
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 50px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,1);
overflow: hidden;
box-sizing: border-box;
transition: all .5s ease-in-out;
}
nav .links a {
font-size: 20px;
}
nav :checked ~ .links {
bottom: 0;
}
nav .icon-burger {
display: block;
}
nav :checked ~ .icon-burger .line:nth-child(1) {
transform: translateY(10px) rotate(225deg);
}
nav :checked ~ .icon-burger .line:nth-child(3) {
transform: translateY(-10px) rotate(-225deg);
}
nav :checked ~ .icon-burger .line:nth-child(2) {
opacity: 0;
}
}
<nav>
<input id="nav-toggle" type="checkbox">
<div class="logo"><strong>EgyptPost</strong></div>
<ul class="links">
<li>Home</li>
<li>Health</li>
<li>News</li>
<li>About Us</li>
<li>Contact Us/FeedBack</li>
</ul>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
<section>
<h1> Egypt is expected to be the 7th largest economy in the world said the minister of finance Mohammed Maait.</h1>
<div class="wrap">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzEq1WfAEiCsDvkQshIy0-P-0OL2AFfwL_-A&usqp=CAU" alt="" />
<p>Egypt is a <b>stong growing economy</b> that has an overall ranking of 33th in the world, and the first in africa, egypt will outpreform countires nearby and will dominate</p>
</div>
</section>
You need to specify what it should be like in smaller resolutions and you should do that with media queries. Check the following link
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I am trying to create navbar with image logo, Title, Navigation Links and some social links also. I have created 4 divs for each. Whenever I decrease the screen width using responsive a white color appears in the nav bar and increases to the left as i decrease the screen width.
Here are some pics also:
You can aslo see width on top of the picture
Here the problem as i decreases the screen width
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#font-face {
font-family: PollerOne;
src: url('../../fonts/Poller_One/PollerOne-Regular.ttf');
}
/* Styling Navigation Bar */
#navbar {
display: flex;
position: relative;
align-items: center;
height: 65px;
width: 100%;
}
#navbar::before {
content: "";
position: absolute;
background-color: #262626;
height: 65px;
width: 100%;
z-index: -2;
}
.navbar {
color: white;
margin: 7px 7px;
}
/* Styling Logo */
#logo {
background-color: black;
height: 45px;
width: 45px;
min-width: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
#logo img {
filter: invert();
width: 25px;
}
/* Styling Title */
#title {
font-family: PollerOne;
min-width: 160.5px;
font-size: 1.4rem;
margin-left: 0px;
}
/* Styling Nav links */
#nav-links {
margin: 0 auto;
}
#nav-links ul {
list-style-type: none;
display: flex;
}
.nav-links {
font-size: 20px;
margin: 0 20px;
/* padding: 5px 10px; */
position: relative;
cursor: pointer;
}
/* Animation Under Nav Links */
.nav-links::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -4px;
background: linear-gradient(white 0 0) center/0% 100% no-repeat;
display: block;
}
:hover.nav-links::after {
animation: pulse 300ms linear;
animation-fill-mode: forwards;
}
#keyframes pulse {
to {
background-size: 100% 100%;
}
}
/* Styling Social Links */
#social-links {
margin-left: auto;
display: flex;
}
.social-links {
width: 30px;
height: 30px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 5px;
}
.social-links img {
width: 27px;
transition: all 200ms ease;
}
.social-links img:hover {
transform: scale(1.5)
}
/* Utility Class */
<div id="navbar">
<div id="logo" class="navbar">
<img src="./img/bag.png" alt="">
</div>
<div id="title" class="navbar">Meals Point</div>
<div id="nav-links" class="navbar">
<ul>
<li class="nav-links"><a id="link-1">Home</a></li>
<li class="nav-links"><a id="link-2">About</a></li>
<li class="nav-links"><a id="link-3">Services</a></li>
<li class="nav-links"><a id="link-4">Recipes</a></li>
<li class="nav-links"><a id="link-5">Contact</a></li>
</ul>
</div>
<div id="social-links" class="navbar">
<a class="social-links" href="https://www.twitter.com"><img src="./img/twitter.png" id="link-1"></a>
<a class="social-links" href="https://www.facebook.com"><img src="./img/facebook.png" id="link-2"></a>
<a class="social-links" href="https://www.instagram.com"><img src="./img/instagram.png" id="link-3"></a>
</div>
</div>
Try to add to #navbar float: left; :
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#font-face {
font-family: PollerOne;
src: url('../../fonts/Poller_One/PollerOne-Regular.ttf');
}
/* Styling Navigation Bar */
#navbar {
display: flex;
position: relative;
align-items: center;
height: 65px;
min-width: 100%;
float: left;
}
#navbar::before {
content: "";
position: absolute;
background-color: #262626;
height: 65px;
min-width: 100%;
z-index: -2;
}
.navbar {
color: white;
margin: 7px 7px;
}
/* Styling Logo */
#logo {
background-color: black;
height: 45px;
width: 45px;
min-width: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
#logo img {
filter: invert();
width: 25px;
}
/* Styling Title */
#title {
font-family: PollerOne;
min-width: 160.5px;
font-size: 1.4rem;
margin-left: 0px;
}
/* Styling Nav links */
#nav-links {
margin: 0 auto;
}
#nav-links ul {
list-style-type: none;
display: flex;
}
.nav-links {
font-size: 20px;
margin: 0 20px;
/* padding: 5px 10px; */
position: relative;
cursor: pointer;
}
/* Animation Under Nav Links */
.nav-links::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -4px;
background: linear-gradient(white 0 0) center/0% 100% no-repeat;
display: block;
}
:hover.nav-links::after {
animation: pulse 300ms linear;
animation-fill-mode: forwards;
}
#keyframes pulse {
to {
background-size: 100% 100%;
}
}
/* Styling Social Links */
#social-links {
margin-left: auto;
display: flex;
}
.social-links {
width: 30px;
height: 30px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 5px;
}
.social-links img {
width: 27px;
transition: all 200ms ease;
}
.social-links img:hover {
transform: scale(1.5)
}
/* Utility Class */
<div id="navbar">
<div id="logo" class="navbar">
<img src="./img/bag.png" alt="">
</div>
<div id="title" class="navbar">Meals Point</div>
<div id="nav-links" class="navbar">
<ul>
<li class="nav-links"><a id="link-1">Home</a></li>
<li class="nav-links"><a id="link-2">About</a></li>
<li class="nav-links"><a id="link-3">Services</a></li>
<li class="nav-links"><a id="link-4">Recipes</a></li>
<li class="nav-links"><a id="link-5">Contact</a></li>
</ul>
</div>
<div id="social-links" class="navbar">
<a class="social-links" href="https://www.twitter.com"><img src="./img/twitter.png" id="link-1"></a>
<a class="social-links" href="https://www.facebook.com"><img src="./img/facebook.png" id="link-2"></a>
<a class="social-links" href="https://www.instagram.com"><img src="./img/instagram.png" id="link-3"></a>
</div>
</div>
Try to add
For Left Align:class = "navbar-nav mr-auto"
For Right Align:class = "navbar-nav ml-auto"
For Center Align:class = "navbar-nav mx-auto"
I'm recreating the navigation from this website but can't get the animations quite the same. It's all working but seems to be a little off.
so far I've tried to increase and decrease the transition timing but it didn't get it anywhere near the example.
const styleParent = (event) => {
let ancestor = document.querySelector('div.nav');
ancestor.classList[event.type === 'mouseenter' ? 'add' : 'remove']('servicesIsHovered');
};
let child = document.querySelector('li.three');
child.addEventListener('mouseenter', styleParent);
child.addEventListener('mouseleave', styleParent);
body {
font-family: acumin-pro, sans-serif;
font-size: 16px;
letter-spacing: .25px;
margin: 0;
}
a {
text-decoration: none;
}
.main {
width: 100%;
}
.section {
width: 100%;
background: #ededed;
}
.header {
position: relative;
display: flex;
width: 100%;
}
.nav {
width: 1100px;
margin: auto;
position: relative;
padding: 0 40;
transition: background-color 0.3s ease;
}
.nav li {
color: #000;
}
.nav li a {
cursor: pointer
}
.nav ul {
list-style: none;
padding: 0;
margin-bottom: 0;
width: fit-content;
}
.nav ul:hover li {
color: #6C6C6C;
padding-bottom: 20px;
}
.nav ul li:hover {
color: #000;
padding-bottom: 20px;
}
.nav li:last-child {
margin: 0;
}
.nav ul li {
display: inline-block;
padding: 0 35px 20px 0;
}
li:hover>.sub-menu {
height: 200px;
}
.sub-menu {
height: 0px;
overflow: hidden;
display: flex;
flex-direction: row;
position: absolute;
top: 100%;
background: #2E2E2E;
left: 0;
right: 0;
transition: height 0.5s ease;
}
.col-1-4 {
height: 100%;
width: 25%;
position: relative;
}
.service {
padding: 20%;
}
.nav.servicesIsHovered {
background-color: #272727;
}
<div class="header">
<div class="nav">
<ul>
<li>
<a class="one">Home</a>
</li>
<li>
<a class="two">About</a>
</li>
<li class="three">
<a class="">Services</a>
<div class="sub-menu">
<div class="col-1-4"></div>
<div class="col-1-4"></div>
<div class="col-1-4"></div>
<div class="col-1-4"></div>
</div>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
The animation doesn't seem to be as smooth as from the website. Also, they don't seem to be as in sync.
I am have a menu for my website and which is currently align on the left side of the browser. I am try to align on the right side of the browser.
here is the demo: here
what I want is just put the hole menu and align it on the right side of the browser screen. currently its showing on the left side.
trying to do:https://i.stack.imgur.com/D0y00.png
html code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<header>
<span class="toggle-button">
<div class="menu-bar menu-bar-top"></div>
<div class="menu-bar menu-bar-middle"></div>
<div class="menu-bar menu-bar-bottom"></div>
</span>
<div class="menu-wrap">
<div class="menu-sidebar">
<ul class="menu">
<li>Home</li>
<li class="children">News
<span class="arrow"></span>
<ul class="child-menu ">
<li>Link 1</li>
<li>Link 2</li>
<li>link 3</li>
</ul>
</li>
<li class="children">Contact
<span class="arrow"></span>
<ul class="child-menu ">
<li>Link 1</li>
<li>Link 2</li>
<li>link 3</li>
</ul>
</li>
<li class="children">About
<span class="arrow"></span>
<ul class="child-menu ">
<li>Link 1</li>
<li>Link 2</li>
<li>link 3</li>
</ul>
</li>
<li>FAQ</li>
<li>Services</li>
</ul>
</div>
</div>
</header>
<div class="wrapper" style="background-color:;padding:15px;">
<section class="text" style="background-color:;">
<h2 class="heading" id="headings" style="background-color:;text-align:center;">Three Line Menu & CSS Transitions</h2>
<p class="buttons" style="min-width: 200px;margin:auto;background-color:;text-align:center;">
Learn More
</p>
</section>
</div>
CSS:
html {
background: url(https://s33.postimg.cc/tm1vd9yy7/Background_2.jpg);
background-attachment:fixed;
background-repeat: no-repeat;
background-size: cover;
}
.btn_one {
text-decoration: none;
color: white;
font-weight: 100;
border: 1px #fbbc05 solid;
padding: 1em 3em;
border-radius: 100px;
}
a {
text-decoration: none;
}
ul {
padding-left: 0;
}
li {
list-style: none;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Montserrat', Arial, serif;
}
::selection {
background-color: #EBEBF2;
color: #83828D;
}
/* ==================================== */
/* Navigaton Menu */
/* ==================================== */
.menu-wrap {
background-color: #625871;
position: fixed;
top: 0;
height: 100%;
width: 280px;
margin-left: -280px;
font-size: 1em;
font-weight: 700;
overflow: auto;
transition: .25s;
z-index: 10;
}
.menu-show {
margin-left: 0;
box-shadow: 4px 2px 15px 1px #262424;
}
.menu-sidebar {
margin: 75px 0 80px 10px;
position: relative;
top: 70px;
}
.menu-sidebar li {
padding: 18px 22px 0;
}
.menu-sidebar li > a {
color: #f3f3f3;
font-size: 1.18em;
position: relative;
}
.menu-sidebar li > a::after {
content: "";
display: block;
height: 0.15em;
position: absolute;
top: 100%;
width: 100%;
left: 50%;
transform: translate(-50%);
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
transition: background-position .2s .1s ease-out;
background-size: 200% auto;
}
.menu-sidebar li > a:hover::after {
background-position: -100% 0;
}
.menu-sidebar .children {
position: relative;
}
.menu-sidebar .children .child-menu {
display: none;
}
.arrow::after {
content: "\f107";
font-family: 'FontAwesome';
padding: 10px;
color: #FFFA3B;
position: relative;
}
.arrow:hover::after {
cursor: pointer;
color: #fff;
}
.arrow:active::after {
top: 2px;
}
/*Hamburger Button*/
.toggle-button {
position: fixed;
width: 44px;
height: 40px;
top: 50px;
left: 40px;
padding: 4px;
transition: .25s;
z-index: 15;
}
.toggle-button:hover {
cursor: pointer;
}
.toggle-button .menu-bar {
position: absolute;
border-radius: 2px;
transition: .5s;
}
.toggle-button .menu-bar-top {
border: 4px solid #fff;
border-bottom: none;
top: 0;
width: 80%;
}
.toggle-button .menu-bar-middle {
height: 4px;
background-color: #fff;
margin-top: 7px;
margin-bottom: 7px;
width: 40%;
top: 4px;
}
.toggle-button .menu-bar-bottom {
border: 4px solid #fff;
border-top: none;
top: 22px;
width: 60%;
}
.toggle-button:hover div
{
width: 80%;
}
.button-open {
left: 25px;
}
.button-open .menu-bar-top {
border-color: #fff;
transform: rotate(45deg) translate(8px, 8px);
transition: .5s;
}
.button-open .menu-bar-middle {
background-color: #fff;
transform: translate(230px);
transition: .1s ease-in;
opacity: 0;
}
.button-open .menu-bar-bottom {
border-color: #fff;
transform: rotate(-45deg) translate(7px, -7px);
transition: .5s;
}
/* Text Block */
.wrapper {
width: 40%;
margin: 100px auto 0;
color: #83828D;
}
.wrapper .text {
padding: 30px;
}
.wrapper .text .heading {
margin-bottom: 40px;
font-size: 2em;
color:#fff;
}
.wrapper .text p {
line-height: 1.6em;
}
.wrapper .text .buttons {
margin-top: 40px;
}
/* Buttons */
.wrapper .buttons .button {
display: inline-block;
margin-right: 20px;
padding: 20px 25px;
border-radius: 2em;
background-color: #70CE64;
color: #fff;
font-size: .9em;
font-weight: 700;
transition: background-color .3s;
}
.wrapper .buttons .button-secondary {
background-color: #FF6746;
}
.wrapper .buttons .button-primary:hover {
background-color: #84D07A;
}
.wrapper .buttons .button-secondary:hover {
background-color: #FF7D60;
}
/*Active state for the buttons*/
.wrapper .buttons .button-primary:active {
background-color: #70CE64;
}
.wrapper .buttons .button-secondary:active {
background-color: #FF6746;
}
/*Icons*/
.wrapper .buttons .button span {
position: relative;
display: inline-block;
padding-right: 20px;
}
.wrapper .buttons .button span::after {
position: absolute;
font-family: "FontAwesome";
right: -3px;
font-size: 14px;
top: 0;
transition: top .3s, right .3s;
}
.wrapper .buttons .button-primary span::after {
content: "\f019";
}
.wrapper .buttons .button-secondary span::after {
content: "\f178";
}
/*Slight icons animation*/
.wrapper .buttons .button-primary:hover span::after {
top: 4px;
}
.wrapper .buttons .button-secondary:hover span::after {
right: -6px;
}
#media screen and (max-width: 480px) {
#headings{
margin-bottom:20px;
font-size: 18px;
color:#fff;
}
.btn_one {
text-decoration: none;
color: #fff;
font-size:12px;
font-weight: 100;
border: 1px #fbbc05 solid;
padding: 8px 23px;
border-radius: 100px;
}
ul {
padding-left: 35px;
}
.menu-sidebar li
{
padding:0;
}
.menu-wrap {
width: 200px;
}
}
SCRIPT:
$(document).ready(function() {
var $toggleButton = $('.toggle-button'),
$menuWrap = $('.menu-wrap'),
$sidebarArrow = $('.arrow');
// Hamburger button
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
$menuWrap.toggleClass('menu-show');
});
// Sidebar navigation arrows
$sidebarArrow.click(function() {
$(this).next().slideToggle(300);
});
});
Here is the source code for reference: https://nofile.io/f/9bKHsuOoUza/source_code_new.zip
Can anybody guide me? Any input is appreciated.
Thank you so much.
change the toggle button to:
default:
.toggle-button {
position: fixed;
width: 44px;
height: 40px;
top: 50px;
left: auto;
padding: 4px;
transition: .25s;
z-index: 15;
right: 40px;
}
open:
.button-open {
left: auto;
right: 25px;
}
then change the menu to:
closed:
.menu-wrap {
background-color: #00000030;
position: fixed;
top: 0;
height: 100%;
width: 240px;
margin-left: 0;
right: -280px;
font-size: 1em;
font-weight: 700;
overflow: auto;
transition: .25s;
z-index: 10;
left: auto;
}
open:
.menu-show {
left: auto;
right: 0;
margin-left: 0;
box-shadow: 4px 2px 15px 1px #080707;
}
easy as that!