Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Add overbite Image right Below Navigation Menu

Home Forums Support Add overbite Image right Below Navigation Menu

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #36268
    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?

    #36322
    Tom
    Lead Developer
    Lead Developer

    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.

    #36442
    Eugene

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

    Thanks again.

    #37602
    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.

    #37764
    Tom
    Lead Developer
    Lead Developer

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

    That should do it 🙂

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.