I want to move the text on the phone version to the center instead of left.
I tried everything. Nothing worked.. any word of advice?
I tried aligning it to center in media queries but it didn't work, as well as padding. I am missing what's wrong.. help will be appreciated.
.nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__img {
width: 32px;
border-radius: 50%;
}
.nav__logo {
color: var(--title-color);
font-weight: 600;
}
@media screen and (max-width: 767px) {
.nav__menu {
position: fixed;
bottom: 0;
left: 0;
background-color: var(--container-color);
box-shadow: 0 -1px 12px hsla(var(--hue), var(--sat), 15%, 0.15);
width: 100%;
height: 4rem;
padding: 0 1rem;
display: grid;
align-content: center;
border-radius: 1.25rem 1.25rem 0 0;
transition: .4s;
}
}
.nav__list,
.nav__link {
display: flex;
}
.nav__link {
flex-direction: column;
align-items: center;
row-gap: 4px;
color: var(--title-color);
font-weight: 600;
}
.nav__list {
justify-content: space-around;
}
.nav__name {
font-size: var(--tiny-font-size);
/* display: none;*/ /* Minimalist design, hidden labels */
}
.nav__icon {
font-size: 1.5rem;
}
/*Active link*/
.active-link {
position: relative;
color: var(--first-color);
transition: .3s;
}
/* Minimalist design, active link */
/* .active-link::before{
content: '';
position: absolute;
bottom: -.5rem;
width: 4px;
height: 4px;
background-color: var(--first-color);
border-radius: 50%;
} */
/* Change background header */
.scroll-header {
box-shadow: 0 1px 12px hsla(var(--hue), var(--sat), 15%, 0.15);
}
/*=============== MEDIA QUERIES ===============*/
/* For small devices */
@media screen and (max-width: 320px) {
.nav__name {
display: none;
}
}
/* For medium devices */
@media screen and (min-width: 576px) {
.nav__list {
justify-content: center;
column-gap: 3rem;
}
}
@media screen and (min-width: 767px) {
body {
margin: 0;
}
.section {
padding: 7rem 0 2rem;
}
.nav {
height: calc(var(--header-height) + 1.5rem); /* 4.5rem */
}
.nav__img {
display: none;
}
.nav__icon {
display: none;
}
.nav__name {
font-size: var(--normal-font-size);
/* display: block; */ /* Minimalist design, visible labels */
}
.nav__link:hover {
color: var(--first-color);
}
.active-link::before {
content: '';
position: absolute;
bottom: -.75rem;
width: 4px;
height: 4px;
background-color: var(--first-color);
border-radius: 50%;
}
/* Minimalist design */
/* .active-link::before{
bottom: -.75rem;
} */
}
/* For large devices */
@media screen and (min-width: 1024px) {
.container {
margin-left: auto;
margin-right: auto;
}
}
html
<header class="header" id="header">
<nav class="nav container">
<a href="#" class="nav__logo">Zatar</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
<a href="#home" class="nav__link active-link">
<i class='bx bx-home-alt nav__icon'></i>
<span class="nav__name">sub</span>
</a>
</li>
<li class="nav__item">
<a href="#vision" class="nav__link">
<i class='bx bx-user nav__icon'></i>
<span class="nav__name">sub</span>
</a>
</li>
<li class="nav__item">
<a href="#info" class="nav__link">
<i class='bx bx-briefcase-alt nav__icon'></i>
<span class="nav__name">sub</span>
</a>
</li>
<li class="nav__item">
<a href="#contact" class="nav__link">
<i class='bx bx-message-square-detail nav__icon'></i>
<span class="nav__name">sub</span>
</a>
</li>
</ul>
</div>
</nav>
</header>
here's an image of what it looks like original
SeeTohirul's Answer which is a better Solution - Using Justify Content
EDIT - After discussion in the comments, I have amended the code snippet, to move the nav to the bottom and centre the logo.
.nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__img {
width: 32px;
border-radius: 50%;
}
.nav__logo {
color: var(--title-color);
font-weight: 600;
}
@media screen and (max-width: 767px) {
.nav__menu {
position: fixed;
bottom: 0;
left: 0;
background-color: var(--container-color);
box-shadow: 0 -1px 12px hsla(var(--hue), var(--sat), 15%, 0.15);
width: 100%;
height: 4rem;
padding: 0 1rem;
display: grid;
align-content: center;
border-radius: 1.25rem 1.25rem 0 0;
transition: .4s;
}
.nav__logo {
margin: 0 auto;
}
}
.nav__list,
.nav__link {
display: flex;
}
.nav__link {
flex-direction: column;
align-items: center;
row-gap: 4px;
color: var(--title-color);
font-weight: 600;
}
.nav__list {
justify-content: space-around;
}
.nav__name {
font-size: var(--tiny-font-size);
/* display: none;*/ /* Minimalist design, hidden labels */
}
.nav__icon {
font-size: 1.5rem;
}
/*Active link*/
.active-link {
position: relative;
color: var(--first-color);
transition: .3s;
}
/* Minimalist design, active link */
/* .active-link::before{
content: '';
position: absolute;
bottom: -.5rem;
width: 4px;
height: 4px;
background-color: var(--first-color);
border-radius: 50%;
} */
/* Change background header */
.scroll-header {
box-shadow: 0 1px 12px hsla(var(--hue), var(--sat), 15%, 0.15);
}
/*=============== MEDIA QUERIES ===============*/
/* For small devices */
@media screen and (max-width: 320px) {
.nav__name {
display: none;
}
}
/* For medium devices */
@media screen and (min-width: 576px) {
.nav__list {
justify-content: center;
column-gap: 3rem;
}
}
@media screen and (min-width: 767px) {
body {
margin: 0;
}
.section {
padding: 7rem 0 2rem;
}
.nav {
height: calc(var(--header-height) + 1.5rem); /* 4.5rem */
}
.nav__img {
display: none;
}
.nav__icon {
display: none;
}
.nav__name {
font-size: var(--normal-font-size);
/* display: block; */ /* Minimalist design, visible labels */
}
.nav__link:hover {
color: var(--first-color);
}
.active-link::before {
content: '';
position: absolute;
bottom: -.75rem;
width: 4px;
height: 4px;
background-color: var(--first-color);
border-radius: 50%;
}
/* Minimalist design */
/* .active-link::before{
bottom: -.75rem;
} */
}
/* For large devices */
@media screen and (min-width: 1024px) {
.container {
margin-left: auto;
margin-right: auto;
}
}<html>
<head>
</head>
<body>
<header class="header" id="header">
<nav class="nav container">
<a href="#" class="nav__logo">Zatar</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
<a href="#home" class="nav__link active-link">
<i class='bx bx-home-alt nav__icon'></i>
<span class="nav__name">sub</span>
</a>
</li>
<li class="nav__item">
<a href="#vision" class="nav__link">
<i class='bx bx-user nav__icon'></i>
<span class="nav__name">sub</span>
</a>
</li>
<li class="nav__item">
<a href="#info" class="nav__link">
<i class='bx bx-briefcase-alt nav__icon'></i>
<span class="nav__name">sub</span>
</a>
</li>
<li class="nav__item">
<a href="#contact" class="nav__link">
<i class='bx bx-message-square-detail nav__icon'></i>
<span class="nav__name">sub</span>
</a>
</li>
</ul>
</div>
</nav>
</header>
</body>
</html>