irunyourdog

@tuanphan , I was missing the "-mobile-", and extra {}. That works. Thank you! If anyone sees this in the future, I had to add a min width to the desktop css, here is the full junk of code. //* Header Image Overhang Desktop *// @media screen and (min-width:768px) { .header-title-logo, .header-title-logo a { overflow: visible !important; margin-bottom: -32px; } header#header img { transition: all 0.3s; } header#header.shrink img { max-height: 100px; transition: all 0.3s; } } //* Header Image Overhang Mobile *// @media screen and (max-width:767px) { .header-mobile-logo, .header-mobile-logo a { overflow: visible !important; margin-bottom: -14px !important; } header#header img { transition: all 0.3s; } header#header.shrink img { max-height: 60px; transition: all 0.3s; } } //* Mobile Header Padding *// @media screen and (max-width:767px) { .tweak-fixed-header .header .header-announcement-bar-wrapper { padding-top: 1vw !important; padding-bottom: 1vw !important; } } Adjust variables as needed

@tuanphan Yes, I need to use that code and input different values for mobile and desktop, but my media query inputs didn't work.

@tuanphan I did not solve. The logo overhang is intentional. I like that it shrinks and leaves a tab with my site name. I need to adjust the size parameter for mobile and desktop separately, regarding this bit of code .header-title-logo, .header-title-logo a { overflow: visible !important; margin-bottom: -32px; } header#header img { transition: all 0.3s; } header#header.shrink img { max-height: 100px; transition: all 0.3s; } but a I can't get the media query to work.

@Paul01 Thanks for responding. This seemed to make a bigger mess of things/have minimal affect regardless of how i play with the inputs. Again, I'm not a coder but, doesn't the broad based code for "Header Image Overhang" conflict with the media queried "Mobile Header Padding" code?

@tuanphan I did not solve it.

inb4 this tuanphan fellow saves me like they save everyone. lol. @tuanphan I've used a dozen of your old posts on my site, you're the best!

irunyour.dog Custom CSS: //* Header Image Overhang *// .header-title-logo, .header-title-logo a { overflow: visible !important; margin-bottom: -32px; } header#header img { transition: all 0.3s; } header#header.shrink img { max-height: 100px; transition: all 0.3s; } //* Mobile Header Padding *// @media screen and (max-width:767px) { .tweak-fixed-header .header .header-announcement-bar-wrapper { padding-top: 1vw !important; padding-bottom: 1vw !important; } } On desktop, the header is large and overhangs. On scroll it shrinks and leaves a nice little tab in the upper left corner. I like this. But on mobile it does the opposite. It starts small and then scales UP, (i think) to the established 100px in the code. I tried to double the entire command and media query two separate commands for mobile and desktop, so i can adjust their size and position separately using: @media screen and (max-width:767px) { .header-title-logo, .header-title-logo a { .......etc and @media screen and (min-width:768px) { .header-title-logo, .header-title-logo a { .......etc but don't code so i couldn't get them to work right. Thoughts?