MirandaBay

Hi everyone, Here is my site Password to site page is "00000000" (eight 0s). I currently have a custom menu (not the main pages menu) that uses a code block and custom css to stylize. Currently, the submenu is hidden on mobile, but I wanted to make a floating hamburger menu icon that can open the menu on a black screen. Currently, toggling the hamburger icon, the menu items are behind the content on the page (see image). I've tried upping the z-index to 99, 1000, 9999, etc., and it continues to be behind the text and overall contents. How can I get this to be on top of everything? I made sure my code block is also brought to the front. Here is my code: /* Hamburger Menu Button Styling */ .hamburger-menu button { background-color: #fdeb01; color: black; font-size: 24px; border: none; border-radius: 50%; width: 50px; height: 50px; cursor: pointer; display: none; position: fixed; right: 20px; top: 20px; z-index: 9999; bottom: 20px; right: 20px; top: auto; } @media (max-width: 768px) { .hamburger-menu button { display: block; /* Show button on mobile */ } #custom-submenu { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color:#000000; overflow-y: auto; z-index: 99; } #custom-submenu ul { padding-top: 60px; } } TIA!

I see you were able to get a hover effect on your page. How did you achieve that?

I'm sorry, it would actually be image down below. The top 6 items was me trying to create it via squarespace assets, and I ended up not liking how it looks so I was going to import as image (which is down below and currently has a hover animation around the block).

Yes! Here is the link https://bandyalliekmiller.squarespace.com/allies-tool-list The password is "00000000" (or 8 zeros, if you don't want to count them).

I am currently trying to add a hover animation to an image block (see yellow outline) and I am trying to make it outline the image, not the block that's wrapping it. Any class or id near the image that I've tried removes the hover effect overall. How can I get the image to be hovered and not the block? Here is my code: #block-yui_3_17_2_1_1708718969724_44647:hover { outline: 2px solid yellow !important; } I have tried outline and border (since the image doesn't currently have a border). TIA!