slcollins

Hello, I have customized my navigation to include color and font changes on hover. I have set the active links to be bold. The issue that I am having, is that I have a folder with links inside. Once I select one of those links, all of the links are bold instead of just the active link. I have included 3 images for easy viewing. An image activating the dropdown by hovering over the Work link from the home page. The folder links show correctly. An image hovering over the links within the folder dropdown. The text style and the background act as expected. An image of the selected link from the previous image. As you can see, all of the text is bold. I am wanting only the active link to be bold. I do have my site live so you can see what is happening. https://www.sonyacollins.me/ Here is the code that I am using. I feel like the code is way overkill, but it just wasn't working at all without going in depth. If you have any ideas to clean it up, I'm def game. //---START Nav Style Color .header-nav .header-nav-item--folder .header-nav-folder-content { padding: 0!important;text-align: center!important;right: -3.1em!important; } //---End Nav Style Color //---START Remove line from Nav .header-nav-folder-item--active .header-nav-folder-item-content {background-image: none!important; } //---End Remove line from Nav //---START Remove line within menu folder .header-nav-item--active a {background-image: none!important;font-weight: bold!important;color:#fff!important; } //---End Remove line within menu //---START Adjust Padding on medu folder .header-nav-folder-item {min-width: 20px!important;padding:10px 10px!important;} //---End Adjust Padding on medu folder ///---START Folder NAV hover .header-nav-folder-item:hover {background: #8da8bb!important;font-weight: bold!important; } //---End Folder NAV hover

Thank you for responding. It was not an updating issue. After much digging I removed the word "only" from the @media code and things are now working. In case anyone else needs this here is the process that I used. I am using 7.1, but for this page, I clicked on the "Looking for sections built with our classic editor" then selected image. I placed my image into the image block with the entire image length visible. I used "Find Squarespace Ids" to to find the block# then I used this code. //----Image with Vertical Scroll #block-245de0e6717df7e66b72 { max-width: 100%; padding: 0px; height: 700px; overflow-y: scroll; border: 1px solid #ddd; @media screen and (max-width: 640px) {max-width: 100%!important; margin: 30px!important; padding: 0px!important; height: 500px!important; } } //----Customize Scrollbar Track Color #block-245de0e6717df7e66b72::-webkit-scrollbar { width: 8px; } //----Customize Scrollbar Track Color #block-245de0e6717df7e66b72::-webkit-scrollbar-track { background: #f4f4f4; border-left:1px solid #ddd } //----Customize Scrollbar Thumb Color #block-245de0e6717df7e66b72::-webkit-scrollbar-thumb { background-color: #3E5577; border-radius: 1rem; }

I dug in there and got it! I have styled the scrollbar for this so that it is obvious that is scrolls. Unfortunately, I seem to be having issues on the mobile view. I updated the CSS but I'm not seeing it change so I'm obviously not doing something correctly. I want the image to fit within the viewport. I want at least 20px all around the image. Also, the image itself is appearing lower within the image block creating a white cap at the top. //----Image with Vertical Scroll #block-245de0e6717df7e66b72 { max-width: 100%; padding: 0px; height: 700px; overflow-y: scroll; border: 1px solid #ddd; @media screen only and (max-width: 640px) {width: 300px!important; height: 300px!important; padding: 20px!important; } } //----Customize Scrollbar Track Color #block-245de0e6717df7e66b72::-webkit-scrollbar { width: 8px; } //----Customize Scrollbar Track Color #block-245de0e6717df7e66b72::-webkit-scrollbar-track { background: #f4f4f4; border-left:1px solid #ddd } //----Customize Scrollbar Thumb Color #block-245de0e6717df7e66b72::-webkit-scrollbar-thumb { background-color: #3E5577; border-radius: 1rem; }

Hello. I don't follow what you are saying.

Site: https://clementine-coral-y4tk.squarespace.com/nearly I have a long image that I want to have scroll within an image block that is shorter in height than the image. Within the screen shot attached I have the scroll placed on the #block. When I hover over the image and start to the scrolling action, the scroll appears, but will only scroll a very small part of the image. I need the entire image to scroll. Plus I would like for the scroll bar, scroll thumb and scroll track to always be on so that it is clear that the image is scrollable. Any help would be appreciated. I should note: I am using 7.1, but for this page, I clicked on the Looking for sections built with our classic editor...then selected image. //----Image with Vertical Scroll #block-245de0e6717df7e66b72 { max-width: 100%; padding: 0px; height: 600px; overflow-y: auto; border: 1px solid #ddd; }