[Support request] Header question: Different background image for non- home page

Home Forums Support Header question: Different background image for non- home page

  • This topic has 9 replies, 2 voices, and was last updated 5 months ago by Leo.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1416658
    mikeb82

    I built a site for a client with a Home page header image, and a different header image for all other pages. I was able to do this by using hook elements and simply loading images to fill the fixed header width. I did not use background images for this. Now the client has requested that I add a “DONATE NOW” button to the top right of the header. I figured I would use Customize to set the background image and Elements to add the button. The problem is that Customize only provides for one background image. I need a background image for the home page and another background image for all the other pages. The “DONATE NOW” button will go on all the pages.

    Also, which hook area should I use for the button?

    BTW, the site admin (not me) added those ugly buttons to the navigation menu. One of them will go away when I add the DONATE NOW button to the header. I will also make the revised header(s) and the navigation menu full width.

    #1416666
    Leo
    Staff
    Customer Support

    Hi there,

    We would need to use CSS for the home page to apply a background image.

    Are you referring to the header background image?

    Let me know πŸ™‚

    #1416685
    mikeb82

    At present, there is no header background image. It’s an image in the generate_header Hook that I added in Elements. I did this before the client decided they need a DONATE button in the header. I figured that I’ll need to abandon using the generate_header Hook and just use CSS for the background image. I’ll also need to add the DONATE NOW button to the header.

    Only the Home page has the large image in the header. All the other pages use a smaller (in height) image. They will also get the DONATE NOW button.

    #1416692
    Leo
    Staff
    Customer Support

    Have you considered using the header element module?

    #1416693
    Leo
    Staff
    Customer Support

    Have you considered using the header element module?

    #1416703
    mikeb82

    I’ll give that a try.

    #1416720
    Leo
    Staff
    Customer Support

    Sounds good. Let me know how it goes πŸ™‚

    #1416790
    mikeb82

    I tried setting up the Element as a Header. It partially worked but it reduced the height of the header to approx 200px. The header height on the home page should be 438px. Both the Container and Inner container are set to Contain. It looks like the background image is attempting to “cover” the full container but is being displayed with 200px height. The top 25% and bottom 25% is not being displayed.

    The other thing not right is that the navigation menu is now above the header image, even though it is configured to go below the header.

    I am getting the Donate Now button to display, but it’s being pushed down on the nav menu.

    Do the Header settings in Customize affect the Element header display?

    I have set the site back to it’s original settings while I figure it out.

    #1416799
    mikeb82

    Update: I reread the documentation on configuring the Header in Elements. It turns out that the padding settings affect how much of the background image is displayed when there is little content. I was able to position the DONATE NOW button in the desired position and get the background image full size by adding lots of padding.

    The navigation menu is still sitting above the header, even though it is configured to be positioned below the header. If I can get the nav menu where it belongs the client will have the page the way they want it.

    I did convince him t get rid of the ugly blue menu buttons in exchange for orange text.

    I left the website in its current state wit the nav menu above the header.

    #1416887
    Leo
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.