I’m using a background image in my first content row (see here). But if I keep the top margin at 0, the navigation menu is overlapping the top part of the image and cutting it off. In order to fix this I tried adding a top margin (30px) and inserted an empty row above. Now the image is shown properly when the browser is in full screen mode. But when the size of the browser is decreased, there suddenly appears an empty white gap between the image and the navigation bar. Is there any way to fix this?
Just took a look at your Website and I’m able to see the issue there. Could you try setting the padding to 0px for the empty row that you’ve inserted above the image? If it doesn’t work, try the CSS snippet below and let us know how it goes.
It is because of the upper margin in the row in which the image is. It’s set to 30, if I remove it, the white gap doesn’t appear when decreasing the window size. But then the problem is that the image is overlapped by the menu bar and cut off at the top (see here) when in regular full screen mode. The only way to stop that from happening that I have found was to add the top margin (then image is not cut off, see here). How can this be resolved?
Sorry about that, do you think you can share temp admin access to your site so we can take a better look? You can post the details here using the private reply option below.
Could you check on this test page I created http://www.omyoga.co/home-2 and see if it’s what you’re looking for? I’ve removed some columns and adjusted the background photo position to “top center”. I’m a little lost here, Do you mind sharing a screenshot on what you are trying to achieve? You can upload it to imgur and paste the link here. What I’m trying to do here is to avoid using custom CSS for your Website. Lets us know how it goes.
What I would like to achieve: The photo should be visible until the hair of the girl ends like here.
What I don’t want is that if the size of the browser window is decreased, that there suddenly appears a white gap between the image and the navigation bar like here. This is still happening on the test page you created…
I tried to insert the below CSS snippet into your Child Theme but it doesn’t seem to work that way, could you attempt it? Sorry, I’m not familiar with your theme. The CSS snippet below should eliminate the white gap on smaller screens. Please let us know how it goes.
@media only screen and (max-width: 1023px) {
#intro.fl-node-5682e0c10072e .fl-row-content-wrap {
margin-top: 0px;
}
}
