Jnap

Creedon, I guess I somehow didn't see your post! That worked great, thank you very much.

Site URL: https://www.originexpeditions.org/caltopo-guide Scroll down to "A Tour of CalTopo's Interface." For some reason, whenever it does the image swap it changes the size of the picture. The two images injected in the code are the exact same size so I have no idea why this is happening, it should look like a smooth transition. It does this for every image swap on the page. Here is my CSS: .image-swap img:nth-child(1) { position: absolute; transition: .5s;} .image-swap img:nth-child(1):hover { opacity:0; } .image-swap2 img:nth-child(1) { position: absolute; transition: 1s; } .image-swap2 img:nth-child(1):hover { opacity:0; } .image-swap3 img:nth-child(1) { position: absolute; transition: 1s; } .image-swap3 img:nth-child(1):hover { opacity:0; } .image-swap4 img:nth-child(1) { position: absolute; transition: 1s; } .image-swap4 img:nth-child(1):hover { opacity:0; } .image-swap5 img:nth-child(1) { position: absolute; transition: 1s; } .image-swap5 img:nth-child(1):hover { opacity:0; } .image-swap6 img:nth-child(1) { position: absolute; transition: 1s; } .image-swap6 img:nth-child(1):hover { opacity:0; }

I decided to just eliminate the drop down menu's altogether so I'm good now. Thank you!

My mistake, I accidentally re-posted the URL. It should work now.

Hi folks, Just an update. I figured some of this out just by inspecting the webpage to determine where to modify some of the CSS elements. I put the following into custom CSS: .header-nav-item a:hover { color: rgb(111,111,111) !important; } .header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content { left: -1em; right: auto; text-align: left; min-width: 50px; background-color: rgba(155, 155, 155,0.5); } I think there is some importance to having [right: whatever] and [left: whatever] with an auto variable congruent with which the OPPOSITE side you want your text aligned to. In my case, I set the right as auto so I could adjust how far left the alignment is. Correct me if I'm wrong, I'm new to CSS as of today. This managed to accomplish all but: The currently viewed page having shaded text in the navigation Adding the semi-transparent background of the dropdown menu to overarching category (IE: About or Expeditions) Still seeking input on these items! Thanks

Site URL: https://antelope-bluebird-89a2.squarespace.com/ Hi everyone, I'm looking to migrate my site from a 7.0 template to the 7.1 Clarkson Template. Here is my old website: http://www.originexpeditions.org Here is the one I'm working on: https://antelope-bluebird-89a2.squarespace.com/ Sitewide password: thanksforhelping I have spent about 8 hours searching the Squarespace forums, internet, and even trying to learn CSS myself to resolve an issue I have with the Header Navigation Bar. In short: I want the navigation bar and its dropdown menus to appear as they did on my old site. Features that I'm talking about include: Text being highlighted upon hover (I've gotten this to work) A semi-transparent dropdown menu for folders with a width that conforms to the text of the longest link + a few inches of padding (see my old site) The currently viewed page having shaded text in the navigation The menu options /links beneath each category being aligned left, formatted in congruence with the folder title above Additionally, if there is a way to add the semi-transparent background of the dropdown menu to overarching category (IE: About or Expeditions) also, that would be great. If anyone has solutions to any or all of these requests I would greatly appreciate it. Thanks for your considerations, - Joe