Tagged: banner image, enfold
-
AuthorPosts
-
February 23, 2017 at 12:03 pm #750900
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?Thank you for your time.
- This topic was modified 7 years, 10 months ago by waveshaper.
February 28, 2017 at 12:01 pm #752862Hey!
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,
YigitFebruary 28, 2017 at 12:03 pm #752864Hi Yigit
Thank you so much for taking the time to reply.
Understood, I will follow the directions in that post.
CheersFebruary 28, 2017 at 12:05 pm #752866Hey!
Great!
We will keep the thread and open and wait to hear from you in case you need further assistance on this case :)Regards,
YigitFebruary 28, 2017 at 12:51 pm #752891Hi 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.
CheersFebruary 28, 2017 at 12:55 pm #752895Hi!
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!
YigitFebruary 28, 2017 at 1:19 pm #752909Hi 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 #756179Hi!
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,
IsmaelMarch 6, 2017 at 10:24 am #756280Hi 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, 9 months ago by waveshaper.
March 7, 2017 at 5:12 am #756726Hi!
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!
IsmaelMarch 7, 2017 at 1:33 pm #756970Hi 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 #757411Hi,
Glad we could help :)
Best regards,
Nikko -
AuthorPosts
- The topic ‘Place PNG image above menu below social links’ is closed to new replies.