Home › Forums › Pro Themes › Blog Pro › Change Menu Header Image
- This topic has 12 replies, 2 voices, and was last updated 5 years, 2 months ago by
wensolutions.
-
AuthorPosts
-
May 29, 2019 at 6:12 pm #98792
Ginger Vazquez
ParticipantHow do I change the header background image that is currently black where the menu is to a different image in the Blog Pro?
May 30, 2019 at 2:37 am #98809wensolutions
KeymasterHello,
The option to change the banner image is available in the theme itself.
For this go to Admin Panel > Appearance > Customize > Banner Image for Inner pages and change the image as per your requirement.
Hope this helps.
let us know if you have any confusion further.
Thank you.
May 30, 2019 at 9:16 am #98829Ginger Vazquez
ParticipantI do have a graphic in this area but it does not change the actual banner image of the menu.
May 30, 2019 at 11:24 pm #98868wensolutions
KeymasterHello,
Can you please provide the screenshot of the section so that we can inspect further and help you?
Thank you.
June 6, 2019 at 11:23 am #99427Ginger Vazquez
ParticipantPlease find the image at the following link: https://www.dropbox.com/s/r9nenrrey884v1h/WFNO%20Menu%20Header%20Screenshot.docx?dl=0
June 7, 2019 at 12:10 am #99445wensolutions
KeymasterHello
The feature is not given by the theme itself to change the background image of the navigation menu.
However, as a work around, please add the below given CSS by going to Admin Panel > Appearance > Customize > Additional CSS
header#masthead.secondary-header { background-image: URL("https://wfnos.org/wp-content/uploads/2019/05/shutterstock_1125408311-1.jpg"); background-position: -147px 1049px; }
Hope this helps.
For any further query/confusion, feel free to write back to us.
Regards!
June 7, 2019 at 3:55 pm #99489Ginger Vazquez
ParticipantJune 7, 2019 at 6:34 pm #99498Ginger Vazquez
Participantsrc=”http://https://wfnos.org/wp-content/uploads/2019/06/WFNO-Screenshot-with-CSS.png” alt=”Screenshot” />
June 10, 2019 at 12:55 am #99598wensolutions
KeymasterHello,
Have you replaced the image URL with your image URL?
You have to place your image UL here. The URL can be found in the media section.
Screenshot:
Also, you can send the screenshot by using the tools like lightshot.
Hoping to hear from you soon.
Thank you.
June 10, 2019 at 9:40 am #99614Ginger Vazquez
ParticipantYes, I did.. please find what was inserted below (it was also in the previous screenshot I sent):
header#masthead.secondary-header {
background-image: URL(“https://wfnos.org/wp-content/uploads/2019/05/Wide-image-showing-flags-of-nations.jpg”);
background-position: -147px 1049px;
}June 11, 2019 at 12:06 am #99654wensolutions
KeymasterHello
First of all, we apologize for the inconvenience.
Please add the below given CSS in the additional CSS section.
header#masthead { background-color: none; background-image : URL("https://wfnos.org/wp-content/uploads/2019/05/Wide-image-showing-flags-of- nations.jpg") !important; background-position: center }
Also, since the flags image are with multiple colors, the text color is getting affected.
Screenshot : https://prnt.sc/o0902i
Please once verify the CSS and report us back if you want the changes in the existing font color.
For any further query/confusion, feel free to write back to us.
Best Regards!
June 11, 2019 at 9:35 am #99685Ginger Vazquez
ParticipantWhat size should the graphic be? We can resize it so that the image shows correctly?
June 12, 2019 at 12:46 am #99740wensolutions
KeymasterHello,
The area that is covered by the menu in the header is “1350X70 px“. So you can almost upload the image of the size as mentioned above.
Hope this helps.
Thank you.
-
AuthorPosts
- You must be logged in to reply to this topic.