rossbaynham Posted October 17, 2023 Posted October 17, 2023 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
rossbaynham Posted October 17, 2023 Author Posted October 17, 2023 Bumping this up! Does anyone know the css to allow the menu folder to open above the navigation? Would really appreciate it!
rossbaynham Posted October 19, 2023 Author Posted October 19, 2023 @tuanphan is there any chance you could help with this? sorry to ask directly. Trying to get the menu folder to open above my navigation bar, instead of below. Thanks in advance
Solution Web_Solutions Posted October 19, 2023 Solution Posted October 19, 2023 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 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; } rossbaynham and Ainul 2 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.
rossbaynham Posted October 19, 2023 Author Posted October 19, 2023 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; }
Web_Solutions Posted October 20, 2023 Posted October 20, 2023 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; } Ainul 1 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.
PiersVivash Posted May 21 Posted May 21 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.
tuanphan Posted May 23 Posted May 23 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. 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment