Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 1, 2024 at 6:22 pm #1441623
    marccat

    Hello everyone,

    I am looking at adding a PNG image to the bottom of the header, which would act as an extension of the latter (it would be stuck to it, and would have the same length).

    I’m unsure of how to approach this – I imagine that I could use a PHP script. But, I’m honestly not great at this coding language.

    If anyone knows what code I could use, or another way of doing this, I will appreciate it!

    Thank you in advance,

    • This topic was modified 5 months ago by marccat.
    May 2, 2024 at 6:30 am #1441771
    Ismael

    Hey marccat,

    Thank you for the inquiry.

    You can add this code in the functions.php file to insert a container below the header:

    add_action('ava_after_main_menu', function() {
    echo "<div class='av-bottom-header'></div>";
}, 10);

    Then use this css code to adjust its style. 

    #top .av-bottom-header {
  width: 100vw;
  height: 20px;
  background: red;
  bottom: -20px;
  position: absolute;
  margin-left: -80px;
}

    Adjust the background property if you need to display an image:

    background: url('image-url-here');

    Best regards,
    Ismael

    May 7, 2024 at 6:17 pm #1442593
    marccat

    Hi Ismael,

    Thanks a lot for your reply!

    I tried using the code you provided, and the image does appear. But, I can’t adjust it so that it shows as it should.

    I noticed that the issue could probably be solved easily if the <div> you suggest I add, was added after <div> with id ‘header_main’ and classes ‘container_wrap’ and ‘container_wrap_logo’.

    Is there any way I can attach the image after said <div>

    Thank you,

    Marc

    May 8, 2024 at 8:51 am #1442644
    Ismael

    Hi,

    Thank you for the update.

    was added after

    with id ‘header_main’ and classes ‘container_wrap’ and ‘container_wrap_logo’.

    Try to replace the hook with “ava_main_header”.

    add_action('ava_main_header', function() {
    echo "<div class='av-bottom-header'></div>";
}, 10);

    Best regards,
    Ismael

    May 9, 2024 at 5:57 pm #1442827
    marccat

    Hi Ismael,

    This worked wonderfully! I changed the hook and after amending the styles, it’s looking exactly how I wanted.

    Thanks a lot!

    Marc

    May 9, 2024 at 7:27 pm #1442835
    Mike

    Hi,
    Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Adding image to the bottom of the header’ is closed to new replies.