Jump to content

Can you make drop down folders in the menu open upwards instead?

Go to solution Solved by Web_Solutions,

Recommended Posts

Hi there,

I am trying to mess quite heavily with my squarespace site to allow for a fixed image as a header (top left corner), and a fixed transparent menu bar along the bottom. 

This has flagged up an issue in the fact that the drop down folders from the menu headings drop down off the bottom of the window. Can I make these instead open 'up', above the menu? Attached screenshots of the overall home page and menu drop down issue.

As an aside, the fixed menu at the bottom is also causing issues by pushing my instagram icon off the page. This is because I have left padded the menu 3% to allow it to resize in line with the fixed image header in the top left. Any help on brining the instagram icon back over a bit would be great!

Website: https://purple-goose-k5e6.squarespace.com/
Password: TELLER 

 

Thanks

Ross

 

Screenshot 2023-10-17 at 13.44.23.png

Screenshot 2023-10-17 at 13.44.08.png

Link to comment
  • Solution
On 10/17/2023 at 6:51 PM, rossbaynham said:

Hi there,

I am trying to mess quite heavily with my squarespace site to allow for a fixed image as a header (top left corner), and a fixed transparent menu bar along the bottom. 

This has flagged up an issue in the fact that the drop down folders from the menu headings drop down off the bottom of the window. Can I make these instead open 'up', above the menu? Attached screenshots of the overall home page and menu drop down issue.

As an aside, the fixed menu at the bottom is also causing issues by pushing my instagram icon off the page. This is because I have left padded the menu 3% to allow it to resize in line with the fixed image header in the top left. Any help on brining the instagram icon back over a bit would be great!

Website: https://purple-goose-k5e6.squarespace.com/
Password: TELLER 

 

Thanks

Ross

 

Screenshot 2023-10-17 at 13.44.23.png

Screenshot 2023-10-17 at 13.44.08.png

 

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

.header-nav .header-nav-item--folder .header-nav-folder-content {
    bottom: 100% !important;
}

 

Screenshot_270.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

Amazing! This worked perfectly, thank you.

Can I ask another question if you don't mind.. I am looking to slow down the fade in of the menu options slightly (ie make the 'about' and 'about the process' fade in more slowly when you hover over 'information'. Just to make it feel a little calmer and more elegant. Is do you know if there is code for this? Likewise, I would like to slow down the blur effect when I hover over the TELLER logo in the top corner.

Any help would be massively appreciated!

 

 

9 hours ago, Web_Solutions said:

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

.header-nav .header-nav-item--folder .header-nav-folder-content {
    bottom: 100% !important;
}

 

Screenshot_270.png

 

Link to comment
8 hours ago, rossbaynham said:

Amazing! This worked perfectly, thank you.

Can I ask another question if you don't mind.. I am looking to slow down the fade in of the menu options slightly (ie make the 'about' and 'about the process' fade in more slowly when you hover over 'information'. Just to make it feel a little calmer and more elegant. Is do you know if there is code for this? Likewise, I would like to slow down the blur effect when I hover over the TELLER logo in the top corner.

Any help would be massively appreciated!

 

 

 

 

Add these code on below the previous code

.header-nav .header-nav-item--folder .header-nav-folder-content, .fe-block-yui_3_17_2_1_1696953527203_1725 img {
    transition: 1s !important;
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
  • 7 months later...

Hi there, I have this same issue with my website piersvivash.com with pw: jinx

The only slight variation I require is that I only want one of my menu dropdown lists to go upwards (I have 5 dropdown menus on the website at present).

The dropdown menu I would like to go upwards is the one that is indicated by a Y on the home page.

My site is a massive work in progress. Tackling one small issue at a time before I add 'actual content' and start playing around with styling a little bit more.

 

Any and all help is greatly appreciated. Piers.

Screenshot 2024-05-21 at 15.52.15.png

Link to comment
On 5/21/2024 at 9:52 PM, PiersVivash said:

Hi there, I have this same issue with my website piersvivash.com with pw: jinx

The only slight variation I require is that I only want one of my menu dropdown lists to go upwards (I have 5 dropdown menus on the website at present).

The dropdown menu I would like to go upwards is the one that is indicated by a Y on the home page.

My site is a massive work in progress. Tackling one small issue at a time before I add 'actual content' and start playing around with styling a little bit more.

 

Any and all help is greatly appreciated. Piers.

Screenshot 2024-05-21 at 15.52.15.png

You mean Y title or Y dropdown?

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.