I have a nav bar that I've made in Gatsby using SCSS to style it. For some reason, the "Luke" element and the rest of the list are slightly misaligned vertically. I'm not sure why and have tried vertical align which didn't work. I'm using Gatsby, SCSS.
header.js
return(
<header className={headerStyles.header}>
<h1 className={headerStyles.logo}>Luke</h1>
<nav>
<ul className={headerStyles.navList}>
<li>
<Link className={headerStyles.navItem} activeClassName={headerStyles.activeNavItem} to="/">Home</Link>
</li>
<li>
<Link className={headerStyles.navItem} activeClassName={headerStyles.activeNavItem} to="about">About</Link>
</li>
<li>
<Link className={headerStyles.navItem} activeClassName={headerStyles.activeNavItem} to="blog">Blog</Link>
</li>
<li>
<Link className={headerStyles.navItem} activeClassName={headerStyles.activeNavItem} to="contact">Contact</Link>
</li>
</ul>
</nav>
</header>
)
header.module.scss
.header{
padding-top: 40px;
padding-bottom: 50px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-list{
justify-content: flex-end;
display: flex;
list-style-type: none;
margin: 0;
}
.nav-item{
color: white;
font-size: .9rem;
margin-right: 1.3rem;
text-decoration: none;
}
Given the code you have provided, it already looks vertically aligned. Is there any other css affecting the page?
.header {
padding-top: 40px;
padding-bottom: 50px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-list {
justify-content: flex-end;
display: flex;
list-style-type: none;
margin: 0;
}
.nav-item {
color: white;
font-size: .9rem;
margin-right: 1.3rem;
text-decoration: none;
}
<header class='header'>
<h1 class='logo'>Luke</h1>
<nav>
<ul class='navList'>
<li>
<a class='navItem'>Home</a>
</li>
<li>
<a class='navItem'>About</a>
</li>
<li>
<a class='navItem'>Blog</a>
</li>
<li>
<a class='navItem'>Contact</a>
</li>
</ul>
</nav>
</header>
Related
I am working on a personal project on Next.js. Currently, I am having issues adding a transition class to the navbar when on responsive. When the user clicks the menu the navbar opens and when the user clicks one of the options it closes. I want that to have a smooth transition but I am unable to do it. Below is the code.
CSS
.navbarWrapper {
background-color: #050f2b;
border-bottom: 1px solid #000;
box-shadow: 0px 2px 10px #000;
color: #fff;
display: inline-flex;
justify-content: space-between;
padding: 0.5rem 2rem;
width: 100%;
}
.navbarContainer {
align-items: center;
display: flex;
font-size: 1.2rem;
justify-content: space-around;
list-style-type: none;
width: 100%;
}
.responsive {
transform: translateX(-100vw);
opacity: 0;
}
#media screen and (max-width: 980px) {
.navbarWrapper {
display: block;
}
.navbarContainer {
display: none;
height: auto;
justify-content: flex-start;
transition: all 2s ease-in-out;
}
ul.navbarContainer.responsive li {
display: flex;
justify-content: flex-start;
margin: 0 auto;
width: 90%;
}
.responsive {
align-items: flex-start;
display: flex;
flex-direction: column;
height: 100vh;
opacity: 1;
padding: 0;
transform: translateX(0);
width: 100%;
}
}
JSX
<div className={styles.navbarWrapper}>
<Link href='/'>
<a className={styles.logo}>
<Image src={Logo} alt='something' width={200} height={50} />
<div className={styles.logoText}>something</div>
</a>
</Link>
<div className={styles.burger} onClick={handleOnClick}>
<GiHamburgerMenu size='2rem' />
</div>
<ul className={`${styles.navbarContainer} ${open ? styles.responsive : ''}`}>
<li>
<Link href='/'>
<a className={styles.text} onClick={closeNav}>Home</a>
</Link>
</li>
<li>
<Link href='/SolarProducts'>
<a className={styles.text} onClick={closeNav}>Products</a>
</Link>
</li>
<li>
<Link href='/ContactUs'>
<a className={styles.text} onClick={closeNav}>Contact Us</a>
</Link>
</li>
</ul>
</div>
There is a class of responsive that gets added to the JSX in order to open the navbar and it is deleted when is click one of the options.
This question already has answers here:
How to change CSS property using JavaScript
(7 answers)
Closed 1 year ago.
I am trying to overwrite a Flex 'justify-content:center' rule and change it to 'start-flex' using Javascript. For some reason this isn't working although within the same JS loop I can overwrite any of the other rules. Why is justify-content acting differently and how could you actually overwrite justify-content ?
function myFunction()
{
const links = document.querySelector( '.sidebar-nav' ).querySelectorAll( 'li a' );
links.forEach( function( item ){
item.justifyContent = 'flex-start';
});
}
aside{
display: flex;
flex-direction: column;
width: var(--edge-side);
padding-top: 4rem;
}
.sidebar-nav li{
display: flex;
align-items: stretch;
height: 60px;
width: auto;
}
.sidebar-nav li a{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
<aside>
<nav>
<ul class="sidebar-nav">
<li><a href="#">
<span class="material-icons">apps</span>
<span class="page-name">Page 1</span></a></li>
<li><a href="#">
<span class="material-icons">reorder</span>
<span class="page-name">Page 2</span></a></li>
</ul>
</nav>
</aside>
You need to set .style.justifyContent.
function myFunction() {
const links = document.querySelector('.sidebar-nav').querySelectorAll('li a');
links.forEach(function(item) {
item.style.justifyContent = 'flex-start';
});
}
myFunction();
aside {
display: flex;
flex-direction: column;
width: var(--edge-side);
padding-top: 4rem;
}
.sidebar-nav li {
display: flex;
align-items: stretch;
height: 60px;
width: auto;
}
.sidebar-nav li a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
<aside>
<nav>
<ul class="sidebar-nav">
<li>
<a href="#">
<span class="material-icons">apps</span>
<span class="page-name">Page 1</span></a>
</li>
<li>
<a href="#">
<span class="material-icons">reorder</span>
<span class="page-name">Page 2</span></a>
</li>
</ul>
</nav>
</aside>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I face an issue while I want to align my sign-in form of test website not align to center.
can anyone help me to resolve this issue?
for better understanding here I attached my js form and CSS file.
.form {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.form-container {
display: flex;
flex-direction: column;
width: 32rem;
padding: 2rem;
border: 0.1rem #c0c0c0 solid;
border-radius: 0.5rem;
list-style-type: none;
}
.form-container li {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
margin-top: 1rem;
}
input {
padding: 1rem;
border: 0.1rem #c0c0c0 solid;
border-radius: 0.5rem;
}
<form onSubmit={submitHandler}>
<ul className="form-container">
<li>
<h2>
Sign In
</h2>
</li>
<li>
<label for="email">
Email
</label>
</li>
<li>
<label for="password"> Password </label>
</li>
<li>
<button>Signin</button>
</li>
<li>
New to Tangail Saree?
</li>
<li>
<Link to="/register"> Create your account</Link>
</li>
</ul>
</form>
Edit: It solved. I use dot in front of form that's the reason it not working.
You applied css to .form instead of form
change .form to form
form {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
This works!
form {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.form-container {
display: flex;
flex-direction: column;
width: 32rem;
padding: 2rem;
border: 0.1rem #c0c0c0 solid;
border-radius: 0.5rem;
list-style-type: none;
}
.form-container li {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
margin-top: 1rem;
}
input {
padding: 1rem;
border: 0.1rem #c0c0c0 solid;
border-radius: 0.5rem;
}
<html>
<body>
<form onSubmit={submitHandler}>
<ul className="form-container">
<li>
<h2>
Sign In
</h2>
</li>
<li>
<label for="email">
Email
</label>
</li>
<li>
<label for="password"> Password </label>
</li>
<li>
<button>Signin</button>
</li>
<li>
New to Tangail Saree?
</li>
<li>
<Link to="/register"> Create your account</Link>
</li>
</ul>
</form>
</body>
</html>
So we need to make a header from a soccer site for a school project, so i got https://www.granadacf.es/en. So my question is how do i make the text and the header like it is on the image. My image doesn't stay in the middle when resizing the website and the text isnt centered, like theres too much space.
This is my code so far.
#header{
background-color: #a61b2b;
display: grid;
grid-template-columns: 20% 80%;
min-height: 120px;
align-content: center;
justify-content: flex-end
}
#topnav{
position: relative;
top: 40px;
font-family: 'Open Sans',arial,sans-serif;
color: #f2f2f2;
padding: 14px 16px;
font-size: 12px;
font-weight: bold;
list-style: none;
display: flex;
justify-content: space-between;
}
#topnav a:hover {
background-color: #eb0627;
}
#topnav a{
text-decoration:none;
color: #fff
}
#topnav li:hover ul{
display: block;
list-style: none;
background: black;
color: #fff;
padding: 10px;
}
#topnav li ul li{
margin: 10px 0px;
}
#logo{
position: relative;
left: 500px;
width: 55%;
}
.hidden{
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Granada Club de Fútbol | Granada </title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="scripts.js"></script>
</head>
<body>
<div id="header">
<img alt="Logo" id="logo" src="images/logo.png">
<ul id="topnav">
<li>NEWS
<ul class="hidden">
<li>CLUB
</li>
<li>FIRST TEAM
</li>
</ul>
</li>
<li>
THE CLUB
<ul class="hidden">
<li>CLUB INFORMATION
</li>
<li>STRUCTURE
</li>
</ul>
</li>
<li>
FIRST TEAM
<ul class="hidden">
<li>SQUAD </li>
<li>TRAINING</li>
</ul>
</li>
<li>TEAMS
<ul class="hidden">
<li>GRANADA B </li>
<li>GFC LADIES</li>
</ul>
</li>
<li>GRANADA TV
</li>
</ul>
</div>
</body>
</html>
I have created a Toggle Nav where you click a button and the navbar pops out and everything works fine on desktop. When I make it responsive the Toggle Nav has no problems except it won't show the styles for the mobile-menu-itmes:hover class. Not quite sure what I'm doing wrong....It has to be something with the CSS but I can't figure it out. Any help is appreciated it, thanks.
HTML
<div class="menu-btn" id="toggle-btn">
<i class="fas fa-bars fa-2x"></i>
<div class="mobile-menu">
<li><a class="mobile-menu-items" href="#">Home</a></li>
<li><a class="mobile-menu-items" href="#">About</a></li>
<li><a class="mobile-menu-items" href="#">Services</a></li>
<li><a class="mobile-menu-items" href="#">Portfolio</a></li>
</div>
</div>
SCSS
.menu-btn {
color: #4f6df5;
font-size: 1.1rem;
font-weight: 900;
cursor: pointer;
padding: 1rem;
display: none;
.mobile-menu {
display: none;
flex-direction: column;
list-style: none;
height: 100vh;
width: 50%;
padding: 40px;
.mobile-menu-items {
font-size: .9rem;
text-decoration: none;
color: #242424;
line-height: 4;
display: block;
}
.mobile-menu-items:hover {
background: #4f6df5;
padding: .5rem;
color: white;
display: block;
}
}
}
Javascript
const menuBtn = document.querySelector('#toggle-btn');
const mobileMenu = document.querySelector('.mobile-menu');
menuBtn.addEventListener('click', clickedBtn);
function clickedBtn() {
//mobileMenu.classList.toggle("mobile-menu");
if (mobileMenu.style.display === 'none') {
mobileMenu.style.display = 'block';
} else {
mobileMenu.style.display = 'none';
}
}
Media Queries
#media screen and (max-width: 768px) {
.menu-btn {
display: flex;
}
You have a missing closing curly bracket } in your media query, so it is not rendering these styles. I've added background-color: red to the media query to show you that it works.
.menu-btn {
color: #4f6df5;
font-size: 1.1rem;
font-weight: 900;
cursor: pointer;
padding: 1rem;
display: flex;
}
.mobile-menu {
display: flex;
flex-direction: column;
list-style: none;
height: 100vh;
width: 50%;
padding: 40px;
}
.mobile-menu-items {
font-size: .9rem;
text-decoration: none;
color: #242424;
line-height: 4;
display: block;
}
.mobile-menu-items:hover {
background: #4f6df5;
padding: .5rem;
color: white;
display: block;
}
#media screen and (max-width: 768px) {
.menu-btn {
display: flex;
background-color: red;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous" />
<div class="menu-btn" id="toggle-btn">
<i class="fas fa-bars fa-2x"></i>
<div class="mobile-menu">
<li><a class="mobile-menu-items" href="#">Home</a></li>
<li><a class="mobile-menu-items" href="#">About</a></li>
<li><a class="mobile-menu-items" href="#">Services</a></li>
<li><a class="mobile-menu-items" href="#">Portfolio</a></li>
</div>
</div>
EDIT: SCSS is a superset of CSS, so you can move the curly brackets for .menu-btn and .mobile-menu back to the end where you had them initially and it will work the exact same. SO code snippets do not support SCSS unfortunately.
You are not closing curly braces for
#media screen and (max-width: 768px) {
.menu-btn {
display: flex;
}
}
so it is not showing hover effect ,
Check Updated Fiddle