Header with Image Overlay

Support
#1

Trying to overlay thhe main logo image with top padding for mobile.

http://vm3001.mojohost.com/agirlwithatractor.com/public_html/

Phone number, facebook icon and hamburger bottom padding doesn’t seem to work.

I’d like to have the image further into the header background but this was the best config I could come up with.

#2

Hey There,

Thanks for posting in! Do you want something like this?

If that is the case, please add this code in the custom css section of the header builder;

@media(max-width: 980px){
  .e41-10.x-image {
    margin-top: 5em;
  }    
}

It is best that you send us a screenshot of how your page should look like in a smaller screen.

Thanks.

#3

No, sorry, we want it to overlay the black about half way. The problem is when it goes to mobile the phone and logo and hamburger do not move out of the way. We need them to push up a bit.

#4

Hi There,

Please inspect the Containers where your contact number and the mobile menu is placed and add this in the Element CSS field under Customize tab (yes in both container).

@media (max-width: 767px) {
	el.x-bar-container {
		align-items: flex-start;
	}
}

Then add this to the text element (contact number) Element CSS

@media (max-width: 767px) { 
	$el.x-anchor {
		margin: 0;
	}
}

Hope it helps,
Cheers!

#5

We’d like the arrowed items to move up 10-20px to make better use of the black header. I implemented the codes as suggested but I do not see any difference so I must have done it wrong.

#6

Hi There,

Sorry about that, there is a typo in my CSS code given above, please update that to this:

Place this in Container’s Element CSS area

@media (max-width: 767px) {
	$el.x-bar-container {
		align-items: flex-start;
	}
}

This for Text element (Contact number)

@media (max-width: 767px) { 
	$el.x-anchor {
		margin: 0;
	}
}

And add this to the Image/Logo Element CSS.

@media (max-width: 767px) { 
	$el.x-image {
		margin-top: -6em;
	}
}

Also, clear your caching plugins and browser’s cache before you preview the page.

Hope that helps,
Cheers!

#7

ok i will try and get back to you

#8

No Problem.
Please let us know until then.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.