Home › Forums › Pro Themes › Blog Pro › Change Menu Header Image
- This topic has 12 replies, 2 voices, and was last updated 4 years, 7 months ago by wensolutions.
-
AuthorPosts
-
May 29, 2019 at 6:12 pm #98792Ginger VazquezParticipant
How 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 #98809wensolutionsKeymasterHello,
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 VazquezParticipantI 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 #98868wensolutionsKeymasterHello,
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 VazquezParticipantPlease 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 #99445wensolutionsKeymasterHello
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 VazquezParticipantJune 7, 2019 at 6:34 pm #99498Ginger VazquezParticipantsrc=”http://https://wfnos.org/wp-content/uploads/2019/06/WFNO-Screenshot-with-CSS.png” alt=”Screenshot” />
June 10, 2019 at 12:55 am #99598wensolutionsKeymasterHello,
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 VazquezParticipantYes, 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 #99654wensolutionsKeymasterHello
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 VazquezParticipantWhat size should the graphic be? We can resize it so that the image shows correctly?
June 12, 2019 at 12:46 am #99740wensolutionsKeymasterHello,
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.