(DESKTOP) A Full Drop Down Menu that covers the whole page like the mobile version

Site URL: https://www.virginiachen.com/

Site: https://www.virginiachen.com/

Looking for Help on CSS:

1. A full drop down menu that covers the whole page like how a default burger works on mobile. (E.g. HERE)

2. On top of Q1, would it be possible to stylise the full-page drop down as a blur to the background effect, and have all the page links on the right hand side?

3. If all of those above possible, how do I make the design consistent on mobile?

TIA! 😊

Add to Design > Custom CSS

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

On 7/9/2022 at 5:12 AM, tuanphan said:

Add to Design > Custom CSS

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

 

Hi Tuanphan, thanks so much for the code. On top of that, how could I include this bit of code (that you wrote on another post of mine) to hide the extra layer clicks? TIA.
 

@media screen and (max-width:991px) {
    .header-menu-nav-folder {
    transform: unset !important;
}
.header-menu-controls.container.header-menu-nav-item {
    display: none;
}
[data-folder="root"]>.header-menu-nav-folder-content:first-child {
    display: none;
}}

11 hours ago, MavisChen said:

Hi Tuanphan, thanks so much for the code. On top of that, how could I include this bit of code (that you wrote on another post of mine) to hide the extra layer clicks? TIA.
 

@media screen and (max-width:991px) {
    .header-menu-nav-folder {
    transform: unset !important;
}
.header-menu-controls.container.header-menu-nav-item {
    display: none;
}
[data-folder="root"]>.header-menu-nav-folder-content:first-child {
    display: none;
}}

Change 991px in second code to 9999px

On 7/9/2022 at 5:12 AM, tuanphan said:

Add to Design > Custom CSS

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

 

Hi Tuanphan,

I would like to adjust the spacing (maybe to half of the current size) between those page links (image attached). What code could I add on top of the last code you helped me with? TIA.

Mavis

On 7/15/2022 at 3:53 PM, MavisChen said:

Hi Tuanphan,

I would like to adjust the spacing (maybe to half of the current size) between those page links (image attached). What code could I add on top of the last code you helped me with? TIA.

Mavis

Use this

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
div.container.header-menu-nav-item a {
	margin-top: 5px;
	margin-bottom: 5px;
}
}

4 hours ago, tuanphan said:

Use this

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
div.container.header-menu-nav-item a {
	margin-top: 5px;
	margin-bottom: 5px;
}
}

 

Hello life saver, it's me again. Thanks so much for the code, they worked in terms of adjusting the space between page links. Now I would like to move them up (please see attached image as a reference), could you help me with the CSS please？ Thank you so much!

Edit above code to this

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
div.container.header-menu-nav-item a {
	margin-top: 5px;
	margin-bottom: 5px;
}
.header-menu-nav-folder-content {
    justify-content: flex-start;
}
}

(I added .header-menu-nav-folder-content { justify-content: flex-start; })

18 hours ago, tuanphan said:

.header-menu-nav-folder-content {
    justify-content: flex-start;
}
}

Hey, thanks so much!

That code worked to move the links up. How can I move them to the right, so the right side of the links aligns with the right side of the cross? TIA

23 hours ago, MavisChen said:

Hey, thanks so much!

That code worked to move the links up. How can I move them to the right, so the right side of the links aligns with the right side of the cross? TIA

Add margin-right: 0px; to this code