Skip to content

Commit

Permalink
styles for subnav dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@rrrragas
rrrragas committed Feb 15, 2024
1 parent 0d1e435 commit b105322
Show file tree
Hide file tree
Showing 3 changed files with 356 additions and 220 deletions.
199 changes: 127 additions & 72 deletions blocks/header/header.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.header.block nav {
.header nav {
display: grid;
grid-template:
"logo . hamburger" 65px
Expand All @@ -8,79 +8,75 @@
padding: 0 20px;
align-items: center;
background-color: var(--white);
z-index: 10;
position: relative;
}

.header.block nav a {
.header nav a {
text-decoration: none;
color: var(--quartz);
font-weight: normal;
}

.header.block.nav-logo {
.header nav .nav-logo {
grid-area: logo;
}

.header.block .nav-logo img {
.header nav .nav-logo img {
padding: 15px 0;
height: auto;
width: 99px;
}

.header.block .nav-hamburger {
.header nav .nav-hamburger {
grid-area: hamburger;
overflow: hidden;
}

.header.block .nav-hamburger .nav-hamburger-icon {
.header nav .nav-hamburger .nav-hamburger-icon {
background-color: transparent;
cursor: pointer;
}

.header.block .nav-hamburger .icon {
.header nav .subnav-ribbon .icon,
.header nav .nav-hamburger .nav-hamburger-icon .icon {
height: 25px;
width: 25px;
}

.header.block nav[aria-expanded="false"] .nav-hamburger .icon.icon-hamburger,
.header.block nav[aria-expanded="true"] .nav-hamburger .icon.icon-close {
.header nav .nav-sections>ul>li.top-nav>a>.icon {
display: inline-block;
position: relative;
height: 24px;
width: 24px;
}

.header nav[aria-expanded="false"] .nav-hamburger .nav-hamburger-icon .icon-hamburger,
.header nav[aria-expanded="true"] .nav-hamburger .nav-hamburger-icon .icon-close {
display: block;
}

.header.block nav[aria-expanded="false"] .nav-hamburger .icon.icon-close,
.header.block nav[aria-expanded="true"] .nav-hamburger .icon.icon-hamburger {
.header nav[aria-expanded="false"] .nav-hamburger .nav-hamburger-icon .icon-close,
.header nav[aria-expanded="true"] .nav-hamburger .nav-hamburger-icon .icon-hamburger {
display: none;
}

.header.block .nav-hamburger .icon svg {
.header nav .subnav-ribbon .icon svg,
.header nav .nav-hamburger .nav-hamburger-icon .icon svg {
height: 100%;
width: 100%;
}

.header.block .nav-contact-us > p {
margin: 0;
}

.header.block .nav-contact-us > p > a {
display: inline-block;
padding: 8px 42px;
text-decoration: none;
color: var(--white);
background-color: var(--dark-red);
border-bottom-left-radius: 20px;
white-space: nowrap;
line-height: 19px;
}

.header.block nav .nav-sections {
.header nav .nav-sections {
display: none;
}

.header.block nav[aria-expanded="true"] .nav-sections {
.header nav[aria-expanded="true"] .nav-sections {
grid-area: sections;
display: block;
}

.header.block .nav-sections > ul {
.header nav .nav-sections>ul {
display: flex;
padding: 20px 0;
margin: 0;
Expand All @@ -89,11 +85,22 @@
gap: 16px;
}

.header.block .nav-sections > ul > li > ul {
display: none;
.header nav .subnav-ribbon a {
color: var(--gray);
}

.header nav .nav-contact-us>p>a {
display: inline-block;
padding: 8px 42px;
text-decoration: none;
color: var(--white);
background-color: var(--dark-red);
border-bottom-left-radius: 20px;
white-space: nowrap;
line-height: 19px;
}

.header.block .nav-sections > ul > li > a {
.header nav .nav-sections>ul>li>a {
display: flex;
align-items: center;
justify-content: space-between;
Expand All @@ -102,122 +109,170 @@
font-size: 22px;
}

.header.block .nav-sections > ul > li.top-nav > a.active-arrow-down::after {
.header nav .nav-sections>ul>li>ul {
display: none;
}

.header nav .nav-sections>ul>li.top-nav>a.active-arrow-down::after {
background-image: url('images/down-arrow.png');
}

.header.block .nav-sections > ul > li.top-nav > a > .icon {
display: inline-block;
position: relative;
height: 24px;
width: 24px;
.header nav .nav-contact-us>p {
margin: 0;
}

.header.block .nav-sections > ul > li.top-nav .icon svg {
.header nav .nav-sections>ul>li.top-nav .icon svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.header.block .nav-sections > ul > li.top-nav > a > span {
.header nav .nav-sections>ul>li.top-nav>a>span {
transition: transform 0.3s ease-in-out;
transform: rotate(0);
}

.header.block .nav-sections > ul > li.top-nav[aria-expanded="true"] > a > span {
.header nav .subnav-ribbon[aria-expanded="true"] .subnav-dropdown span {
transform: rotate(180deg);
}

.header nav .nav-sections>ul>li.top-nav[aria-expanded="true"]>a>span {
transform: rotate(180deg);
}

.header.block .nav-sections > ul > li.top-nav[aria-expanded="true"] > ul {
.header nav .nav-sections>ul>li.top-nav[aria-expanded="true"]>ul {
display: block;
}

.header.block .nav-sections > ul > li.top-nav > ul > li.sub-nav > a {
.header nav .nav-sections>ul>li.top-nav>ul>li.sub-nav>a {
display: flex;
justify-content: flex-start;
padding: 10px 20px 0;
font-size: 18px;
}

.header.block .nav-sections > ul > li.top-nav > ul > li.sub-nav.active > a {
.header nav .nav-sections>ul>li.top-nav>ul>li.sub-nav.active>a {
text-decoration: underline;
}

.header.block nav .nav-contact-us {
.header nav .nav-contact-us {
display: none;
}

.header.block nav[aria-expanded="true"] .nav-contact-us {
.header nav[aria-expanded="true"] .nav-contact-us {
grid-area: contact-us;
display: flex;
justify-content: center;
margin: 20px;
}

.header nav .subnav-ribbon {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 1;
opacity: 1;
transition: opacity 0.3s ease-in-out;
color: var(--gray);
}

.header nav .subnav-ribbon.active {
display: block;
}

.header nav .subnav-ribbon>.subnav-dropdown,
.header nav .subnav-ribbon>.active-submenu {
display: none;
justify-content: space-between;
padding: 10px 20px;
color: var(--gray);
font-size: 14px;
font-weight: bold;
background-color: var(--gray-neutral-80);
}


.header nav .subnav-ribbon.active>.subnav-dropdown {
display: flex;
}

.header nav .subnav-ribbon.active>.subnav-dropdown li {
list-style: none;
}



.header nav .subnav-ribbon[aria-expanded="true"] .active-submenu {
display: flex;
flex-direction: column;
row-gap: 10px;
width: 95%;
margin: 0 auto;
align-items: flex-start;
border-radius: 4px;
opacity: 0.8;
}


@media (min-width: 900px) {
.header.block nav {
.header nav {
grid-template:
"logo sections contact-us" 65px
". . hamburger" min-content
/ min-content 1fr min-content;
padding: 0 90px;
padding: 0 90px;
}

.header.block .nav-hamburger {
.header nav .nav-hamburger {
display: none;
}

.header.block .nav-sections {
.header nav .nav-sections {
display: flex;
justify-content: center;
}

.header.block .nav-sections > ul {
.header nav .nav-sections>ul {
flex-direction: row;
width: 100%;
}

.header.block .nav-sections > ul > li.top-nav > a {
.header nav .nav-sections>ul>li.top-nav>a {
padding: 0;
border-bottom: none;
font-size: 14px;
font-weight: bold;
}

.header.block .nav-sections > ul > li.top-nav > a > .icon {
.header nav .nav-sections>ul>li.top-nav>a>.icon {
display: none;
}

.header.block .nav-sections > ul > li.top-nav[aria-expanded="true"] > ul {
position: absolute;
left: 0;
width: 100vw;
.header nav .nav-sections>ul>li.top-nav[aria-expanded="true"]>ul {
display: none;
}

.header nav .subnav-ribbon>.active-submenu {
display: flex;
opacity: 1;
background-color: var(--gray-neutral-80);
top: 65px;
justify-content: space-evenly;
justify-content: space-around;
}

.header.block .nav-sections > ul > li.top-nav > ul > li.sub-nav.active > a {
border-bottom: 5px solid var(--white);
.header nav .subnav-ribbon.active>.subnav-dropdown {
display: none;
}

.header.block .nav-sections > ul > li.top-nav[aria-expanded="true"] > ul > li.sub-nav > a {
padding: 10px 0;
color: var(--gray);
font-size: 14px;
font-weight: bold;
.header nav .subnav-ribbon>.active-submenu .sub-nav.active a {
border-bottom: 2px solid var(--white);
}

}

@media (min-width: 1200px) {
.header.block nav {
padding: 0 140px;
}
.header nav {
padding: 0 140px;
}
}
Loading

0 comments on commit b105322

Please sign in to comment.