[Resolved] Add overbite Image right Below Navigation Menu

[Eugene]

Hello,

Thanks for the excellent theme. I’ve been working on customizing the theme and I’ve not been able to get this done. I want to place an image of balloons right below the navigation menu. The image would act like as a border. Here’s the tricky part, I want the image to have a slight overbite on the container below.

I’ve seen this on your home page where the phone corner is out of the black containing box.

I’m not sure how to go at this. Would I need to work with transparencies? Where would the code be placed?

[Tom]

Hi there,

First, the image needs to be a PNG with a transparent background.

Then, it needs to be placed inside a container, inside of the container below the navigation.

So it would look like this:

<div class="my-balloons">
      <img src="..." alt="" />
</div>

That would go below your navigation.

Then, you simply need to add some negative margin to the top of that container, so it would become:

<div class="my-balloons" style="margin-top:-10px;">
      <img src="..." alt="" />
</div>

Then you would adjust the 10px to your liking.

[Eugene]

Sounds great. Will try it out and let you know the results.

Thanks again.

[Eugene]

Hi, I’m trying to do this but it seems like it overbites the header section above. I need it over biting the container below.

[Tom]

In that case, change “margin-top” to “margin-bottom”.

That should do it 🙂

[Author]

Posts