I have this navbar with flexbox. I use justify-content: space-between but it seems the items are not evenly distribute as the center item is a bit on the left side. Is there something i am missing? Sorry for the basic question.
How it currently looks like and how it should look like
Codepen: https://codepen.io/joxs546/pen/qBRYZLa
* {
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #e2dfe3;
}
.logo {
height: 85px;
width: 85px;
display: inline-block;
cursor: pointer;
background: url('https://dummyimage.com/400x400/000/fff') no-repeat;
background-size: contain;
}
.logo:hover {
background: url('https://dummyimage.com/400x400/000/ffff') no-repeat;
background-size: contain;
}
li,
a,
button {
font-family: PT Sans, sans-serif;
font-weight: bold;
font-size: 18px;
color: black;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.nav-ul {
list-style: none;
}
.nav-ul li {
padding: 0px 40px;
display: inline-block;
}
.nav-ul li a {
transition: all 0.3s ease 0s;
}
.nav-ul li a:hover {
color: cornflowerblue;
}
button {
padding: 9px 25px;
background-color: cornflowerblue;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
color: white;
}
<header>
<div class="logo">
</div>
<nav class="nav">
<ul class="nav-ul">
<li> Services</li>
<li> Project</li>
<li> About</li>
</ul>
</nav>
<a class="nav-button" href="#"></a><button>Contact</button>
</header>
Use <button>Contact</button> inside of <a> tag.
Also you can use justify-content: space-evenly; in case you want to fill the space evenly.
There is an empty a tag that is taking some space. Either it should be removed from the HTML or it should wrap the button. Everything else is perfect.
<a class="nav-button" href="#">
<button>Contact</button>
</a>
Related
Problem
" float: right" poorly working in responsive class
Basically, I am trying to place my image logo in the right-up corner for a semi-lang case but every manipulation on .logo force navigation bar to change its values.
Question
How can I align the logo to the right-up corner?
What I've tried
let mainNav = document.getElementById('js-menu');
let navBarToggle = document.getElementById('js-navbar-toggle');
navBarToggle.addEventListener('click', function () {
mainNav.classList.toggle('active');
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Josefin Sans', sans-serif;
}
.navbar {
background-image: url("bg-mob.png");
background-size: 100vw;
font-size: 18px;
/*background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);*/
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 10px;
}
.main-nav {
list-style-type: none;
display: none;
}
.nav-links, .logo {
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
/*margin-right: auto;*/
}
.logo img {
width: 150px;
/*background-color: white;*/
}
.navbar-toggle {
position: absolute;
top: 15px;
left: 20px;
cursor: pointer;
color: rgba(255,255,255,0.8);
font-size: 24px;
}
.active {
display: block;
}
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<img src="https://via.placeholder.com/50" alt="">
</span>
<img src="https://via.placeholder.com/150/0000FF">
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li>
Blog
</li>
</ul>
</nav>
Positions absolute and floats do not play well together and are a headache on their own when you try to align them with other elements.
Thankfully you do not have to mess with them, since display:flex is a thing
What I would do is add a wrapper div around your toggler and logo and make that flex and justify the two items on the edges, like so:
<nav class="navbar">
<div style="display:flex; justify-content: space-between;">
<span class="navbar-toggle" id="js-navbar-toggle">
<img src="menuicon.png.png" alt="">
</span>
<img src="logo-blue.png">
</div>
<ul class="main-nav" id="js-menu">
[...]
And this way you can remove the absolute position from your toggler
You can use text-align: right; in .navbar:
let mainNav = document.getElementById('js-menu');
let navBarToggle = document.getElementById('js-navbar-toggle');
navBarToggle.addEventListener('click', function () {
mainNav.classList.toggle('active');
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Josefin Sans', sans-serif;
}
.navbar {
background-image: url("bg-mob.png");
background-image: url("https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w1024-h683-n-l50-sg-rj");
background-size: 100vw;
font-size: 18px;
/*background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);*/
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 10px;
text-align: right; /* added */
}
.main-nav {
list-style-type: none;
display: none;
}
.nav-links, .logo {
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
/*margin-right: auto;*/
}
.logo img {
width: 150px;
/*background-color: white;*/
}
.navbar-toggle {
position: absolute;
top: 15px;
left: 20px;
cursor: pointer;
color: rgba(255,255,255,0.8);
font-size: 24px;
}
.active {
display: block;
}
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w24-h16-n-l50-sg-rj" alt="">
</span>
<img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w150-h100-n-l50-sg-rj">
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li>
Blog
</li>
</ul>
</nav>
I'm still beginner with JavaScript and ReactJS.
I'm doing a project to improve my knowledge. I have a layout with CSS and HTML already responsive. I'm trying to implement some logic wiht Javascript on my ReactJS project. When I click on my burger-icon, my nav open up, and when I click on my close icon, my nav close up. Can you tell me how can i do this?
As the layout is responsive only in HTML and CSS, for my nav to appear, it depends on the width of the screen.
Here's my code I put into codesandbox.io
import React, { useState } from "react";
import "./index.scss";
const Home = () => {
const [showMenu, setShowMenu] = useState(false);
const handleBurgerIcon = (e) => {
e.preventDefault();
setShowMenu(!showMenu);
};
return (
<div className="flex-container">
<nav className="nav-categories">
<div className="header">
<h2>Categories</h2>
<div className="close">
<svg width="1em" height="1em" viewBox="0 0 12 12">
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g
transform="translate(-318.000000, -363.000000)"
fill="#000000"
fillRule="nonzero"
>
<path
d="M318.234315,373.616648 C317.921896,373.929067 317.921892,374.435597 318.23432,374.748025 C318.54673,375.060434 319.053273,375.060443 319.365691,374.748025 L329.548029,364.565687 C329.860447,364.253269 329.860438,363.746726 329.548029,363.434316 C329.235601,363.121888 328.729071,363.121892 328.416652,363.434311 L318.234315,373.616648 Z M319.365688,363.234318 C319.05327,362.921899 318.546746,362.921889 318.234318,363.234318 C317.921908,363.546727 317.921899,364.05327 318.234318,364.365688 L328.416655,374.548026 C328.729074,374.860445 329.235617,374.860435 329.548026,374.548026 C329.860454,374.235598 329.860445,373.729074 329.548026,373.416655 L319.365688,363.234318 Z"
fill="currentColor"
/>
</g>
</g>
</svg>
</div>
</div>
<ul className="nav-menu">
<li className="active">
Floral
</li>
<li>
Fresh
</li>
<li>
Gourmand
</li>
<li>
Woody
</li>
</ul>
</nav>
<section className="perfumes-list">
<header>
<div className="burguer-button" onClick={handleBurgerIcon}>
<div></div>
<div></div>
<div></div>
</div>
<input type="text" placeholder="Search by perfume" />
</header>
<ul>
<li>
<div className="perfume-item">
<div className="box-info">
<div className="box-info--content">
<div className="description">
<h1>Kim Kardashian</h1>
<p>
In 2009, Kim Kardashian launched a perfume line with her
signature fragrance, called Kim Kardashian by Kim
Kardashian.
</p>
</div>
<div className="tags">
<span>Woody</span> / <span>Oriental</span> /{" "}
<span>Gourmand</span>
</div>
</div>
<div className="box-info--footer">
<ul>
<li>
<span>Sample</span>{" "}
<h3>
Free<sup></sup>
</h3>
</li>
<li>
<span>Normal</span>{" "}
<h3>
38.00<sup>€</sup>
</h3>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</section>
</div>
);
};
export default Home;
:root {
--white: #ffffff;
--black: #111116;
--gray: #f4f7f6;
--gray-dark: #6c7680;
--orange: #ff8f32;
}
body,
html {
font-family: Helvetica, sans-serif;
font-weight: 300;
line-height: 1.5;
color: var(--black);
text-align: left;
background-color: var(--gray);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
p {
color: var(--gray-dark);
}
.tags {
color: var(--orange);
text-align: right;
}
h1 {
color: var(--orange);
font-weight: 400;
}
h2 {
font-size: 2.125rem;
padding: 0 1rem;
}
h3 {
font-size: 1.5rem;
padding: 0 0.5rem;
font-weight: 300;
}
.flex-container {
display: flex;
flex-flow: row wrap;
text-align: center;
max-width: 1400px;
margin: 2rem auto;
}
.flex-container > * {
padding: 15px;
flex: 1 100%;
}
header {
display: flex;
align-items: center;
text-align: center;
margin-bottom: 2rem;
}
.burguer-button {
margin-right: 1rem;
cursor: pointer;
}
.burguer-button div {
width: 2rem;
height: 0.25rem;
background-color: var(--black);
margin-bottom: 0.3rem;
}
input[type="search"],
input[type="text"] {
font-size: 1rem;
font-weight: 300;
background-clip: padding-box;
transition: all 0.2s ease;
outline: 0;
-webkit-appearance: none;
width: 100%;
resize: none;
padding: 1rem;
border: 1px solid var(--gray);
}
input:hover,
input:focus {
transition: all 0.2s ease;
cursor: auto;
border: 1px solid var(--orange);
}
.nav-menu .active a {
color: var(--orange);
}
.nav-menu a {
position: relative;
display: block;
padding: 1rem;
font-size: 17px;
font-weight: 300;
color: #202121;
cursor: pointer;
background: #f4f7f6;
border-bottom: 1px solid #e6eaea;
text-decoration: none;
transition: all 0.3s ease;
}
.nav-menu a:hover {
background-color: var(--white);
-webkit-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
.perfume-item {
position: relative;
width: 100%;
-webkit-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
box-shadow: 0 2px 3px 0 #e8ebed, 0 0 3px 0 #e8ebed;
}
.box-info {
transition: all 0.3s ease-in-out;
padding: 1.5rem;
flex: 1;
position: relative;
clear: both;
background-color: var(--white);
margin-bottom: 1.5rem;
}
.box-info--content {
display: flex;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.box-info--footer {
display: flex;
}
.box-info--footer ul {
display: inline-flex;
}
.box-info--footer li {
display: inline-flex;
align-items: baseline;
padding: 0 1rem 0 0;
}
.box-info--footer li span {
color: var(--gray-dark);
}
/*Nav Categories*/
.nav-categories {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 75%;
padding-top: 3rem;
text-align: left;
z-index: -1;
background-color: var(--gray);
}
.nav-categories .header {
position: relative;
}
.nav-categories .close {
position: absolute;
top: 0;
right: 0;
}
.nav-categories ul {
list-style-type: none;
}
.nav-categories li {
cursor: pointer;
}
.nav-categories li.selected {
background-color: rgb(87, 87, 206);
color: #ffffff;
}
.perfumes-list {
flex: 1;
order: 2;
text-align: left;
}
.perfume {
margin: 10px;
text-align: left;
border-bottom: 1px solid black;
}
.perfume ul {
list-style-type: none;
}
/*Pagination*/
.pagination {
text-align: center;
order: 3;
}
.pagination {
width: 100%;
}
.pagination {
display: inline-flex;
align-items: center;
padding-left: 0;
margin-bottom: 0;
justify-content: center;
}
.pagination li {
margin-right: 0.25rem;
}
.pagination li:last-child {
margin-right: 0;
}
.pagination li a {
transition: all 0.3s ease-in-out;
color: var(--gray-dark);
padding: 0.375rem 0.4375rem;
text-decoration: none;
}
.pagination li a:hover {
background: var(--orange);
color: var(--white);
}
.pagination li a:focus {
box-shadow: inset 0 0 0 2px var(--orange);
}
.pagination li a:active {
background: var(--gray-dark);
color: var(--white);
}
.pagination .active a {
background: var(--orange);
color: var(--white);
pointer-events: none;
}
// 48em -> 768px
#media (min-width: 48em) {
.nav-categories {
width: 40%;
}
}
// 64em -> 1024px
#media (min-width: 64em) {
.nav-categories {
position: relative;
top: unset;
left: unset;
display: block;
width: 100%;
flex: 0;
order: 1;
padding-top: 1rem;
z-index: 0;
display: block;
}
.nav-categories .close {
display: none;
}
.burguer-button {
display: none;
}
}
Thank you advance!!
First of all you cannot just use class attribute in react. In react it's className. Click here for more info.
Handling events with React elements is very similar to handling events on DOM elements. There are just some syntax differences.
You can simply add an onClick listener to your burger-icon element and call a function that you create in your Home.js, like this.
<div className="burguer-button" onClick={handleBurgerIcon}>
Now we are going to create a boolean state and change the value everytime when button is clicked. This is how you create a state in a functional react.
const [showMenu, setShowMenu] = React.useState(false);
You can represent this like a variable with a getter and setter. And as default value we use false.
Now we create the function to handle the click.
const handleBurgerIcon = (e) => {
e.preventDefault();
setShowMenu(!showMenu);
}
The function setShowMenu toggles the value of our showMenu state.
Finally we use a conditional rendering for our nav-menu. So it only gets visible, when our showMenu is true. This is how you can do it.
{showMenu &&
<ul className="nav-menu">
<li className="active">
Floral
</li>
<li>
Fresh
</li>
<li>
Gourmand
</li>
<li>
Woody
</li>
</ul>
}
I'm making a responsive navbar with a hamburger menu that toggles the navbar when clicked on the Hamburger Icon. I'm trying to make the dropdown of the Nav menu smooth using transition property in CSS. But there is no change in the transition while toggling.
I have tried adding height property to the navbar but still, there is no transition.
var toggleButton = document.querySelector('.toggle-btn');
var navLinks = document.querySelector('.nav-main');
toggleButton.addEventListener('click', function() {
navLinks.classList.toggle('hidden');
});
.navbar {
background: #000;
font-size: 26px;
font-family: 'Play', sans-serif;
padding-top: 35px;
padding-bottom: 20px;
}
.nav-main {
display: none;
}
.nav-main li {
list-style: none;
text-align: center;
margin: 10px auto;
}
.nav-links {
text-decoration: none;
color: #F5F5F5;
}
.nav-links:hover {
color: #E6E6E6;
}
.toggle-btn {
position: absolute;
top: 15px;
right: 35px;
cursor: pointer;
color: #F5F5F5;
}
.toggle-btn:hover {
color: #E6E6E6;
}
.hidden {
display: block;
}
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"/>
<nav class="navbar">
<span class="toggle-btn"><i class="fas fa-bars"></i></span>
<ul class="nav-main">
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
To animate height by transition you should change max-height property. You can take a look at this example here: https://codepen.io/felipefialho/pen/ICkwe
For your case:
1) set max-height: 0 for .nav-main
2) set max-height: ${your max height value here} for .nav-main--open
3) change this row navLinks.classList.toggle('nav-main--open');
Probably it will be useful for you.
Inspired by this post: https://stackoverflow.com/a/25544161/2777988
I used a label and a hidden checkbox to implement a smooth linear transition. This doesn't even require any Javascript.
#block {
background: #000;
height: 0;
overflow: hidden;
transition: height 300ms linear;
font-size: 26px;
font-family: 'Play', sans-serif;
}
label {
cursor: pointer;
}
#showblock {
display: none;
}
#showblock:checked+#block {
height: 240px;
}
.navbar {
background: #000;
font-size: 26px;
padding-top: 35px;
padding-bottom: 10px;
font-family: 'Play', sans-serif;
}
.nav-main {
display: block;
}
.nav-main li {
list-style: none;
text-align: center;
margin: 10px auto;
}
.nav-links {
text-decoration: none;
color: #F5F5F5;
}
.nav-links:hover {
color: #E6E6E6;
}
.toggle-btn {
position: absolute;
top: 15px;
right: 35px;
cursor: pointer;
color: #F5F5F5;
}
.toggle-btn:hover {
color: #E6E6E6;
}
.hidden {
display: block;
}
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet" />
<nav class="navbar">
<span class="toggle-btn"><label for="showblock" class="fas fa-bars"></label></span>
</nav>
<input type="checkbox" id="showblock" />
<div id="block">
<ul class="nav-main">
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
How do I make a sticky CTA under navbar, that closes when clicked in the CTA-button or the X. This could be used to run a campaign on your website, or make users aware any sales going on.
This is what I am looking for: https://imgur.com/a/jLF0s
#navbar {
overflow: hidden;
background-color: #333;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.sticky {
position: fixed;
top: 0;
width: 100%
}
<div class="sticky" id="navbar">
Home
<a href="#" >News</a>
Contact
</div>
One approach using flexbox.
Wrap the menu and CTA in separate containers within the #navbar. Then apply flexbox properties to both. I've removed float from the a elements in this example.
.menu,
.cta {
display: flex;
}
#navbar a {
display: inline-block;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.sticky {
position: fixed;
top: 0;
width: 100%
}
.menu {
background-color: #333;
}
.cta {
justify-content: center;
align-items: center;
background: red;
}
.cta button {
margin-left: 1em;
background: yellow;
border: none;
padding: .5em;
}
<div class="sticky" id="navbar">
<div class="menu">
Home
News
Contact
</div>
<div class="cta">
<p>Limited...</p>
<button>Buy</button>
</div>
</div>
Okay so my navigation is positioned absolute. Also I have a div above that also positioned absolute but with a z index of 2. When you click a toggle button the div with the z-index of 2 gets 240 pixels of margin added to the left revealing the navigation below it. This works perfectly apart from on mobile you can see the navigation below the div by scrolling. How can I fix this?
My website is up at http://www.zoidstudios.com/
Code Pen: http://codepen.io/ZoidCraft/pen/KrRvjr
<nav class="main-nav">
<ul>
<li>Examples</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<header class="top-header">
<button class="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<h1>Zoid Studios</h1>
<h2>A <span>visual design</span> studio based in the <span>united kingdom</span></h2>
<a class="btn-view" href="">view our work <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</header>
.main-nav {
position: fixed;
background-color: #080911;
height: 100%;
width: 240px;
transition: all 0.3s ease-in-out; }
.main-nav ul {
display: flex;
flex-direction: column; }
.main-nav a {
display: block;
padding: 20px 40px;
color: #FFFFFF;
text-align: center;
font-size: 1rem;
transition: all 0.3s ease-in-out; }
.main-nav a:hover {
color: #ffff00; }
.shift {
margin-left: 240px; }
.menu-toggle {
position: absolute;
z-index: 3;
top: 0;
left: 0;
padding: 10px;
margin: 20px;
background-color: transparent;
border: none;
outline: none;
cursor: pointer; }
.menu-toggle span {
display: block;
background-color: #FFFFFF;
width: 18px;
height: 2px;
margin: 4px; }
.top-header {
transition: all 0.3s ease-in-out;
width: 100%;
height: 100%;
display: flex;
position: absolute;
z-index: 2;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #101223;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); }
.top-header h1 {
color: #FFFFFF;
font-size: 3.2rem;
font-weight: 800;
padding: 25px 0;
text-align: center; }
.top-header h2 {
color: #FFFFFF;
font-size: 2.6rem;
margin-bottom: 80px;
text-align: center;
text-transform: capitalize; }
.top-header h2 span {
color: #ffff00; }
#media screen and (max-width: 768px) {
.top-header h1 {
font-size: 3rem;
margin: 0 10px 30px 10px; }
.top-header h2 {
font-size: 2.4rem;
margin: 0 10px 30px 10px; } }
.btn-view {
color: #FFFFFF;
padding: 15px 20px;
border: 1px solid #ffff00;
text-transform: capitalize;
transition: all 0.3s ease-in-out; }
.btn-view i {
padding-left: 10px; }
.btn-view:hover {
color: #101223;
background-color: #ffff00;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75); }
Is there another way of doing this exact way of side navigation?
Thanks for the help :)