heatherjacksonio
-
Posts
10 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by heatherjacksonio
-
-
My site: https://giraffe-giraffe-em23.squarespace.com/ (password: heather)
Hi! I'm looking to have a dropdown color background when hovering on any of the nav items. I want the whole header (logo, all nav items) to still be visible in front of this color block, but not any page content or footer content. I was able to get the background color to change according to each nav item, but I can't figure out the best way to have the rest of the page disappear.
I was also hoping this color can slide down as it appears, but not a necessity.
I'm attaching screenshots of what I have currently, versus the vision I've mocked up. On the mockup you'll notice a small piece of text below the nav item "design" which is also part of my vision when hovering on each nav item, but I haven't attempted this part yet.
-
On 7/24/2024 at 1:53 AM, LoftyDevs-Website-Designer said:
Hello @heatherjacksonio,
Please update your CSS with the following:
.header-menu-nav-wrapper { margin-top: 48px; }
Hi! Thank you so much for responding. I actually was hoping to find a solution that wouldn't shift my menu items down, since we like the look of the items being aligned at the top as they are. Is it possible to leave everything aligned as is, but allow for the first item to still work as a link?
-
https://cuboid-guppy-5ab6.squarespace.com/
Site password: heatherHi! I've used some custom CSS to have a hamburger menu on desktop view, but I'm having an issue:
When the overlay menu is open on desktop, my menu links are aligned at the top and my first item is inline with the "x" to close the menu. The header (logo and hamburger icons) seems to be "in front" of everything else, which means the user isn't able to click on my first menu item. Is there a way to bring my link items all the way to the front so that the first item can be clicked? I was having trouble achieving this without losing the "x" icon all together.
Additionally, when the menu is open I'm still able to scroll the page in the background and the header (logo and hamburger icons) scroll out of view. I'd like to disable all scrolling when the menu is open, so no scroll on the page behind OR on the overlay menu. Is this possible?Thanks in advance!
-
On 3/26/2024 at 2:07 PM, melody495 said:
Can you pretend it's all working as they should, and place the anchor links where you'd like them to scroll to in mobile mode? And I can check to see what's going on.
At the moment they're placed at weird places, so it's more difficult to diagnose what the issue is.
Let me know when you've done that!
Ok, I've placed each anchor link with the corresponding heading I'd like it to scroll to.
-
On 3/22/2024 at 8:24 PM, melody495 said:
Hi @heatherjacksonio have you tried going into mobile edit mode to place the anchor links? They seem to be placed really far above their respective headings, which explains the behaviour you are seeing.
For "hours" and "entrances", the distance from the code block to the heading are placed at different distances.
Hope this helps!
Hi @melody495 thank you so much for replying! So actually all of the code blocks containing the anchor links are intentionally placed on mobile. I have moved them up and down on mobile trying to get my anchor links to scroll to the correct spot. I do, in fact, want them to scroll to the headings, but no matter where I place the code blocks I can't seem to get it to adjust. Like in your screenshot, I've placed the span for entrances up above, behind that paragraph text, yet it still brings you down passed the heading to the map. I've moved it up higher and even down lower, but it seems to jump to the exact same position, which I find strange.
This issue is specifically happening on iPhones.
-
Hi! Wondering if anyone is having the same issue or can help me solve.
I have anchor links set up on all my main navigation pages, and they work great on desktop.
For each anchor link, I have a code block with an #id that I place a little further above the section header so the position it scrolls to isn't thrown off by the header. On mobile, this doesn't seem to work all the time. The links still scroll, but no matter where I place the anchor link blocks, there doesn't seem to be a rhyme or reason to the exact position they scroll to. It's in the general area I want it but the spacing is not consistent.
For example, on the /visit page on mobile, the code block containing the #id for the first anchor link "public hours" is placed behind the orange box and scrolls down midway the image to display the heading "public hours". This block is positioned 4 rows above where I want it to land and it works great like all the desktop ones. However the "entrances" code block containing the #id is also positioned 4 rows above the heading "entrances," yet the scroll position lands further down than expected. These blocks are identical size on mobile and are both code blocks with identical span tags (other than the #id of course). If I move the id block for entrances up a couple rows thinking that would be the simple fix, it doesn't change where it lands. I'm not quite sure what the issue here is. Does anyone else notice these inconsistencies with the scroll-to position for anchor links on mobile, or am I missing something?
Happy to explain further if my description of the issue isn't clear enough.
I use an iPhone. Site url: https://www.buildingbok.com/visit
Thanks in advance for any help!
-
-
Hi,
The password to my site is heather.
I'm hoping someone can help me with this quickly. I've created a fixed text box to use as a 'sidebar' navigation within each of my main pages. My goal is to have this 'sidebar' remain fixed on the page until it reaches the footer. The problem: since I have a large footer and these sidebars are a decent length, the sidebar overlaps with the footer once I get to the bottom of the page. I'm hoping to 'un-fix' the fixed box once it hits the footer so that it just scrolls up with the rest of the content in the last section.
Is this possible? Please help!
P.S. I'd like to keep separate sections on the pages rather than make the entire page one section in order to avoid headaches while editing in the future.
Dropdown color block background behind nav when hovering on nav items
in Other
Posted
This works perfectly! Thank you! Is there anyway to get the background color to flood the page and cover the contents of the page like in the images I've shown? Similar to how the typical mobile overlay menu works, except the header in this case stays put.