# Navigation bar overlapping with image **URL:** \ **Category:** Beaver Builder\ **Created:** [January 1, 2016, 4:13am UTC](https://community.wpbeaverbuilder.com/t/navigation-bar-overlapping-with-image/6245 "2016-01-01T04:13:04Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![fabian-merklegmail-c](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/f/35a633/32.png) [@fabian-merklegmail-c](https://community.wpbeaverbuilder.com/u/fabian-merklegmail-c)\ **Post date:** [January 1, 2016, 4:13am UTC](https://community.wpbeaverbuilder.com/t/navigation-bar-overlapping-with-image/6245/1 "2016-01-01T04:13:04Z")
I’m using a background image in my first content row (see [here](http://www.omyoga.co/)). 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? Thanks! ---
**Author:** ![kcchai](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/kcchai/32/621_2.png) [@kcchai](https://community.wpbeaverbuilder.com/u/kcchai)\ **Post date:** [January 3, 2016, 9:16pm UTC](https://community.wpbeaverbuilder.com/t/navigation-bar-overlapping-with-image/6245/2 "2016-01-03T21:16:10Z")
Hey Fabian, 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. ```auto .fl-node-56866c7ed67bd .fl-row-content-wrap { padding: 0px; } ``` Thanks! KC ---
**Author:** ![fabian-merklegmail-c](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/f/35a633/32.png) [@fabian-merklegmail-c](https://community.wpbeaverbuilder.com/u/fabian-merklegmail-c)\ **Post date:** [January 5, 2016, 12:56am UTC](https://community.wpbeaverbuilder.com/t/navigation-bar-overlapping-with-image/6245/3 "2016-01-05T00:56:34Z")
Thanks KC. I tried both suggestions, it’s still there. 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](http://snag.gy/keyUJ.jpg)) 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](http://snag.gy/k4OKN.jpg)). How can this be resolved? Thanks! ---
**Author:** ![kcchai](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/kcchai/32/621_2.png) [@kcchai](https://community.wpbeaverbuilder.com/u/kcchai)\ **Post date:** [January 5, 2016, 1:03am UTC](https://community.wpbeaverbuilder.com/t/navigation-bar-overlapping-with-image/6245/4 "2016-01-05T01:03:01Z")
Hey Fabian, 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. Thanks! KC ---
**Author:** ![fabian-merklegmail-c](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/f/35a633/32.png) [@fabian-merklegmail-c](https://community.wpbeaverbuilder.com/u/fabian-merklegmail-c)\ **Post date:** [January 5, 2016, 1:46am UTC](https://community.wpbeaverbuilder.com/t/navigation-bar-overlapping-with-image/6245/5 "2016-01-05T01:46:59Z")
[Content Hidden] ---
**Author:** ![kcchai](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/kcchai/32/621_2.png) [@kcchai](https://community.wpbeaverbuilder.com/u/kcchai)\ **Post date:** [January 5, 2016, 1:49am UTC](https://community.wpbeaverbuilder.com/t/navigation-bar-overlapping-with-image/6245/6 "2016-01-05T01:49:55Z")
Hey Fabian, Thanks for the details. Just letting you know that we’re checking on it. Thanks! KC ---
**Author:** ![kcchai](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/kcchai/32/621_2.png) [@kcchai](https://community.wpbeaverbuilder.com/u/kcchai)\ **Post date:** [January 5, 2016, 2:18am UTC](https://community.wpbeaverbuilder.com/t/navigation-bar-overlapping-with-image/6245/7 "2016-01-05T02:18:39Z")
Hey Fabian, Could you check on this test page I created [http://www.omyoga.co/home-2](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](http://imgur.com) 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. Thanks! KC ---
**Author:** ![fabian-merklegmail-c](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/f/35a633/32.png) [@fabian-merklegmail-c](https://community.wpbeaverbuilder.com/u/fabian-merklegmail-c)\ **Post date:** [January 5, 2016, 3:15am UTC](https://community.wpbeaverbuilder.com/t/navigation-bar-overlapping-with-image/6245/8 "2016-01-05T03:15:53Z")
What I would like to achieve: The photo should be visible until the hair of the girl ends like [here](http://snag.gy/pIKCs.jpg). 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](http://snag.gy/k0KCy.jpg). This is still happening on the test page you created… ---
**Author:** ![kcchai](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/kcchai/32/621_2.png) [@kcchai](https://community.wpbeaverbuilder.com/u/kcchai)\ **Post date:** [January 5, 2016, 3:34am UTC](https://community.wpbeaverbuilder.com/t/navigation-bar-overlapping-with-image/6245/9 "2016-01-05T03:34:58Z")
Hey Fabian, 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. ```auto @media only screen and (max-width: 1023px) { #intro.fl-node-5682e0c10072e .fl-row-content-wrap { margin-top: 0px; } } ``` Thanks! KC ---
**Author:** ![system](https://community.wpbeaverbuilder.com/uploads/default/original/2X/9/9db1b183a7ea1efa26199a2a2b3511d742473dae.png) [@system](https://community.wpbeaverbuilder.com/u/system)\ **Post date:** [April 27, 2019, 10:20pm UTC](https://community.wpbeaverbuilder.com/t/navigation-bar-overlapping-with-image/6245/10 "2019-04-27T22:20:57Z")