Anonymous User 9936702
(@anonymized-9936702)
Hello!
How are you adding this header image? Is this using custom CSS?
The header image is added via Make. I haven’t done anything with CSS.
Hi there!
If you change the Header Background Size option from “Auto” to “Cover”, does it make a difference?
I have tried every option under the header options, and nothing helps. 🙂
Other things I should add:
This problem occurred with previous Make version, so it’s not a new thing.
I had to add whitespace on the bottom of my header image, as it would overlap the navigation menu already, it just gets much much worse when it is resized to mobile-size, and then additionally the image seems to shift down (as you can probably test yourself if you go to the page).
If anyone has any ideas for a workaround, that would be awesome.
The short answer: Get a custom CSS plugin and put this:
.site-header-main {
background-position: left top !important;
}
The long answer: The reason your header image is moving down is because it’s set to be the background image of the header, and the position of the image is set to left center, meaning that it’s set horizontally to the left of the container and vertically in the center of the container. This works when the menu is hidden, but when the menu is visible, the header container becomes taller, which causes the header image to move down so that it will still be vertically centered in the container. Setting it to left top means the image will always be at the left edge and the top edge of the container.
Ok, will give it a try tonight, but will that keep the header background image and menu from overlapping? (I’m guessing not, but will try.)
okay, adding the line in the CSS definitely helps. The nav menu now opens below the header image like it’s supposed to and the header image stays put. But now the header image just slightly overlaps the nav menu when at normal size. (It would look like it overlapped more if I didn’t have whitespace added onto the bottom of the image itself already.) I might just add some more whitespace unless someone knows how to fix that overlapping behavior.
Thanks for the help so far, though! 🙂
What if you added a bit of top margin to the navigation menu?
#site-navigation {
margin-top: 5px;
}
Another option would be to edit the image a bit to slice off a bit of the bottom.
I had to add 15px, but that did the trick! Thanks all for helping me!
How did you get the menu positioned below the header image? My menu sits on top of the header image.
http://www.arcalog.com/images/bible-landsacpes/
The header background color is set to white but that doesn’t seem to make a difference.
My header image has some whitespace along the bottom, that seemed to help get the menu where I wanted it.
