Jump to content

Header overhang mobile vs desktop

Go to solution Solved by tuanphan,

Recommended Posts

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?

Link to comment
  • Replies 10
  • Views 402
  • Created
  • Last Reply

Top Posters In This Topic

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

Link to comment

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

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution

With mobile, use this

@media screen and (max-width:767px) {
    .header-mobile-logo, .header-mobile-logo a {
		overflow: visible !important;
 	 margin-bottom: -12px !important;
}
header#header img {
    transition: all 0.3s;
}
header#header.shrink img {
    max-height: 100px;
    transition: all 0.3s;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
Posted (edited)

@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

Edited by irunyourdog
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.