Header Image

Hi,

For the Homepage I use one picture which is a different size than the header image for pages and blogs. If I use the slider it will add another header picture on top of the homepage slider. I do not want that. I want to be able to add a new header (slider, image etc wahetever you call it) to every page and blog page. 
I add here 2 screenshots. 1 is from home and 2 is from a page as how it looks now. Instead of the yellow background I want to add a picture on every page and blog. 
home.png
1892 x 863 - 873K
page.png
1885 x 865 - 80K

Comments

  • Hi, @volana

    Thanks for contacting us.

    Have you tried the Unique Headers plugin? Using this you can set different header images for different pages.

    Let me know is it the same as you need!
  • Hi Imraz, I didn't yet, but I will now. Thanks for the tip!
  • Hi Imraz, I still have an issue because it shows the yellow bar now. So either the bar becomes a tiny stripe, or the yellow bar is replaced by a header image. How do I do that? 
    http://i.prntscr.com/Z_sjOwccQSGWmQqF5c5jHw.png

    This is how I want it. 
  • Hi, @volana

    Please share your site URL.
  • edited August 2018
    I kinda managed to find a solution, but I actually wanted the navigation on the top and the page title is not showing now. Navigation needs work because it looks weird in the mous-over and also the wrapper is very big now in height. But it sort of looks more like how I want it. Can you help me out with moving the menu to the top, show page-title and make the wrapper a bit less high?

    I see now also that mouseover with the sidebar has same issues. 

    Thanks upfront


  • edited August 2018
    Hi, Volana

    I have seen your site and maybe you have made some changes, that's why now the breadcrumb section is not visible at all. Please revert the changes if any regarding this, so that I will able to give you the custom CSS to reduce the height of the yellow strip.

    Thanks
  • Okay, I did that now. 

  • Copy and Paste the below custom CSS in your theme's Additional CSS box:

    /*Page Title Section*/
    .page-title-section {
        padding: 0px 0 19px;
    }
    @media only screen and (max-width: 767px) and (min-width: 200px)
    .page-title-section {
        padding: 0px 0 24px;
    }
    /*Page Title Section*/

    This CSS reduce the height of your breadcrumb section. Reduce padding values to reduce the height more. You also query about to put the image as background in this section but it's not recommended. It's better to have custom header image at the top and also you can take advantage of using the popular plugins like Unique Header. And if needed only to remove Header image from specific pages like as earlier you told about from the Homepage it can also be removed via custom CSS

    Please let me know if this makes sense to you!

    Thanks
  • Thank you, it makes sense. But I want the menu above the header, so how do I do that? 
  • Hi, @volana

    It takes some time, however tomorrow you will get the custom code & CSS for this replacement of sections.

    Thanks
  • Awesome, thank you very much!

  • Thank you for your patience and understanding!

    For section replacement changes, you need to do changes in your parent theme folder (spicepress-pro) as well as needs to add some new files & folder in your child theme folder (spicepress-pro-child-theme). As I noticed you already running a child theme so you don't need to add any new one.

    First for parent theme changes:-
    Go into your spicepress-pro theme folder and then into css folder. Keep one backup copy of the file with name theme-menu.css, then edit it, and replace the whole code from this code. Backup copy bcoz in case if you want to revert back the changes.

    Second for child theme changes:-
    a) Add a new folder with name header in your child theme folder of named spicepress-pro-child-theme. Here in newly created folder add one new file with name header-navbar.php and edit it, and paste the code in it from this LINK

    b) Create a new file with name header.php in your child theme folder and just edit it, then paste the code in it from this LINK

    Check now the added changes, make sure the child theme should be your activated theme.

    If you feel hard to follow these changes, you can share your wp-admin details on my email address to add these changes.

    Email Id: er.imrajkhan@gmail.com

    Let me know did it work!
  • Yes that works! Super! Thank you so much, I am really happy with this :)
  • Glad to help you!

    You can rate us with your kind review if you like our Theme and Support.

    Thanks for contacting us :)
  • I will do that :)
  • Thank You!!!
This discussion has been closed.