Jump to content

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

Recommended Posts

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! 😊

Link to comment
  • Replies 9
  • Views 903
  • Created
  • Last Reply

Top Posters In This Topic

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}}

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Screenshot 2022-07-15 at 09.52.34.png

Link to comment
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

Screenshot 2022-07-15 at 09.52.34.png

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!

Screenshot 2022-07-18 at 13.12.49.png

Link to comment

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; })

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

image.thumb.png.c3693eec8089226e760d86ea240669c5.png

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.