Skip to content

Added responsive CSS styles for navigation menu and icons, enhancing usability on smaller screens. #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added responsive CSS styles for navigation menu and icons, enhancing usability on smaller screens. #21

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
224 changes: 60 additions & 164 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,217 +244,113 @@ Navigation
Navigation Media Query
======================
*/
/* Styles for screens with a maximum width of 768px */
@media only screen and (max-width: 768px) {
/* Navigation menu styles */
.nav__menu {
position: fixed;
top: 0;
left: -30rem;
width: 0;
background-color: var(--white);
z-index: 9990;
height: 100%;
transition: all 0.5s;
position: fixed; /* Keeps the menu in a fixed position */
top: 0; /* Aligns the menu to the top of the screen */
left: -30rem; /* Hides the menu off-screen to the left */
width: 0; /* Initially sets the menu width to 0 */
background-color: var(--white); /* Sets the background color */
z-index: 9990; /* Ensures the menu appears on top */
height: 100%; /* Sets the menu height to 100% of the viewport */
transition: all 0.5s; /* Animates all changes over 0.5 seconds */
}

/* Styles when the menu is open */
.nav__menu.open {
left: 30rem;
width: 30rem;
left: 30rem; /* Moves the menu into view */
width: 30rem; /* Sets the menu width */
}

/* Logo styles */
.nav__logo {
width: 50%;
width: 50%; /* Sets the logo width to 50% of its container */
}

/* Hamburger menu styles */
.nav__hamburger {
display: block;
display: block; /* Displays the hamburger menu */
}

/* Menu top section styles */
.menu__top {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--orange);
padding: 1.8rem 1rem;
display: flex; /* Uses flexbox for layout */
align-items: center; /* Centers items vertically */
justify-content: space-between; /* Spaces items apart */
background-color: var(--orange); /* Sets the background color */
padding: 1.8rem 1rem; /* Adds padding */
}

/* SVG icon styles in the menu top section */
.menu__top svg {
height: 1.6rem;
width: 1.6rem;
fill: var(--primaryColor);
height: 1.6rem; /* Sets the icon height */
width: 1.6rem; /* Sets the icon width */
fill: var(--primaryColor); /* Sets the fill color */
}

/* Navigation category styles */
.nav__category {
color: var(--white);
font-size: 2.3rem;
font-weight: 700;
color: var(--white); /* Sets the text color */
font-size: 2.3rem; /* Sets the font size */
font-weight: 700; /* Sets the font weight */
}

/* Navigation list styles */
.nav__list {
flex-direction: column;
align-items: start;
padding: 1.6rem 1rem;
flex-direction: column; /* Stacks items vertically */
align-items: start; /* Aligns items to the start */
padding: 1.6rem 1rem; /* Adds padding */
}

/* Styles for each navigation item */
.nav__item:not(:last-child) {
margin-right: 0;
margin-right: 0; /* Removes right margin for all items except the last one */
}

/* Styles for navigation items */
.nav__item {
width: 100%;
width: 100%; /* Sets the item width to 100% */
}

/* Styles for navigation links */
.nav__list .nav__link:link,
.nav__list .nav__link:visited {
padding: 1.6rem 0;
width: 100%;
color: var(--grey2);
padding: 1.6rem 0; /* Adds vertical padding */
width: 100%; /* Sets the link width to 100% */
color: var(--grey2); /* Sets the link color */
}

/* Styles for the body element when the menu is active */
body.active::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 110%;
background: var(--black) none no-repeat 0 0;
opacity: 0.7;
z-index: 999;
transition: 0.8s;
content: ""; /* Adds an empty content */
position: fixed; /* Fixes the position */
top: 0; /* Aligns to the top */
left: 0; /* Aligns to the left */
width: 100%; /* Sets the width to 100% */
height: 110%; /* Sets the height to 110% */
background: var(--black) none no-repeat 0 0; /* Sets the background color */
opacity: 0.7; /* Sets the opacity */
z-index: 999; /* Ensures it appears below the menu */
transition: 0.8s; /* Animates the changes over 0.8 seconds */
}
}

/* Styles for screens with a maximum width of 568px */
@media only screen and (max-width: 568px) {
/* Icon styles */
.nav__icons .icon__item svg {
width: 1.4rem;
height: 1.4rem;
width: 1.4rem; /* Sets the icon width */
height: 1.4rem; /* Sets the icon height */
}

/* Icon item styles */
.nav__icons .icon__item {
padding: 0.4rem;
padding: 0.4rem; /* Adds padding */
}
}

/*
======================
Hero Area
======================
*/

.hero,
.hero .glide__slides {
background-color: var(--primaryColor);
position: relative;
width: 100%;
height: 100vh;
}

.hero .glide__bullet {
background-color: #222;
width: 1.2rem;
height: 1.2rem;
}

.hero .glide__arrow {
padding: 1.5rem 1.7rem;
opacity: 0;
border: none;
background-color: var(--grey);
transition: all 0.5s ease-in-out 0.2s;
}

.glide__arrow:hover {
background-color: var(--black);
}

.glide__arrow--left {
left: 20rem;
}

.glide__arrow--right {
position: absolute;
right: 20rem;
}

.hero:hover .glide__arrow {
opacity: 1;
}

.hero:hover .glide__arrow--left {
left: 23rem;
}

.hero:hover .glide__arrow--right {
right: 23rem;
}

.hero .glide__arrow svg {
height: 1.8rem;
width: 1.8rem;
fill: var(--primaryColor);
}

.hero .glide__arrow {
border-radius: 50%;
}

.hero__center {
display: flex;
align-items: center;
justify-content: center;
position: relative;
max-width: 114rem;
margin: 0 auto;
height: 100%;
padding-top: 3rem;
}

.hero__left {
padding: 0 3rem;
flex: 0 0 50%;
}

.hero__btn {
display: inline-block;
font-weight: 700;
font-size: 1.4rem;
background-color: var(--black);
color: var(--primaryColor);
cursor: pointer;
margin-top: 1rem;
padding: 1.5rem 4rem;
border: 1px solid var(--black);
transition: all 0.3s ease-in-out;
}

.hero__btn:focus {
outline: none;
}

.hero__left .hero__btn:hover {
font-weight: 700;
background-color: transparent;
color: var(--black);
}

.hero__left h1 {
margin: 1rem 0;
}

.hero__left p {
margin-bottom: 1rem;
}

.hero__right {
flex: 0 0 50%;
position: relative;
text-align: center;
}

.hero__right img.banner_03 {
width: 70%;
}

/*
======================
Hero Media Query
Expand Down