Header overhang mobile vs desktop

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?

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!

Did you solve or still need help?

@tuanphan I did not solve it.

@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?

I see you solved? except this problem, logo cut off on both desktop + mobile?

@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.

11 hours ago, irunyourdog said:

@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.

So you want to use this code, for mobile, and adjust to another value?

@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 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