Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 23, 2017 at 12:03 pm #750900
    waveshaper

    Hi Kriesi

    I wish to place a png banner image in the space above my menu and below the social links.
    How can I achieve that the right way?

    Banner image example

    Thank you for your time.

    • This topic was modified 7 years, 9 months ago by waveshaper.
    February 28, 2017 at 12:01 pm #752862
    Yigit

    Hey!

    Sorry for the late reply!

    Please refer to this post – http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/ and add a widget area to your header and place your image inside that widget area :)

    Best regards,
    Yigit

    February 28, 2017 at 12:03 pm #752864
    waveshaper

    Hi Yigit
    Thank you so much for taking the time to reply.
    Understood, I will follow the directions in that post.
    Cheers

    February 28, 2017 at 12:05 pm #752866
    Yigit

    Hey!

    Great!
    We will keep the thread and open and wait to hear from you in case you need further assistance on this case :)

    Regards,
    Yigit

    February 28, 2017 at 12:51 pm #752891
    waveshaper

    Hi Yigit
    Thanks, that worked… but I need some help adjusting it, as currently my main menu items do not work, I could resize the image?
    Thank you for your time.
    Cheers

    February 28, 2017 at 12:55 pm #752895
    Yigit

    Hi!

    It seems like you have not added the custom CSS code posted on the documentation.
    Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust the values as needed 

    #header .widget {
  left: 50%;
  padding-top: 0;
  position: absolute;
  top: 0;
  transform: translate(-50%);
  z-index: 999;
}

    Cheers!
    Yigit

    February 28, 2017 at 1:19 pm #752909
    waveshaper

    Hi Yigit
    Thank you for your help, still, though, this is tricky as I want the banner to be aligned to the right and clickable as a link to a product.

    Currently, the main menu interferes with the banner image so when I hover over the banner it selects the menu item link, I adjusted the Z-index which helped a bit but I will see how I can adjust this, seems like a mission to get to work.

    I used 

    #header .widget {
    left: 50%;
    padding-top: 0;
    position: absolute;
    top: -7px;
    transform: translate(9%);
    z-index: 10;
}

    and my image is 600px X 70px.

    Still it would be interesting to see what you suggest.

    Cheers

    March 6, 2017 at 7:10 am #756179
    Ismael

    Hi!

    Did you remove the banner? You need to adjust the height of the menu items to prevent them from covering the banner.

    #top #header_main > .container .main_menu ul:first-child > li > a, #top #header_main #menu-item-shop .cart_dropdown_link {
    height: 40px;
    line-height: 40px;
}

.html_cart_at_menu.html_header_top #top .main_menu {
    right: 0px;
    top: 50px;
}

    Best regards,
    Ismael

    March 6, 2017 at 10:24 am #756280
    waveshaper

    Hi Ismael
    Thank you for taking the time to look into this The menu disappeared now… it seems to have been moved way below, it will take some adjusting on my side but i get what you are saying.
    One more thing, is there a way to hide the header widget on mobile/tablet view?

    Thanks a mill

    • This reply was modified 7 years, 8 months ago by waveshaper.
    March 7, 2017 at 5:12 am #756726
    Ismael

    Hi!

    To hide the header widget on mobile view, please use this:

    @media only screen and (max-width: 768px) {
  /* Add your Mobile Styles here */
    #header .widget {
        display: none !important;
    }
}

    For tablet, just adjust the max-width value to 989px.

    Cheers!
    Ismael

    March 7, 2017 at 1:33 pm #756970
    waveshaper

    Hi Ismael
    Thank you so much, that works and for all the other tips.
    Have a beautiful day further.

    March 8, 2017 at 1:10 am #757411
    Nikko

    Hi,

    Glad we could help :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Place PNG image above menu below social links’ is closed to new replies.