- This topic has 9 replies, 2 voices, and was last updated 5 months ago by Leo.
August 24, 2020 at 12:51 pm #1416658mikeb82
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.August 24, 2020 at 12:57 pm #1416666LeoStaffCustomer SupportAugust 24, 2020 at 1:15 pm #1416685mikeb82
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.August 24, 2020 at 1:25 pm #1416692LeoStaffCustomer SupportAugust 24, 2020 at 1:25 pm #1416693LeoStaffCustomer SupportAugust 24, 2020 at 1:32 pm #1416703mikeb82
I’ll give that a try.August 24, 2020 at 2:05 pm #1416720LeoStaffCustomer SupportAugust 24, 2020 at 4:44 pm #1416790mikeb82
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.August 24, 2020 at 5:13 pm #1416799mikeb82
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.August 24, 2020 at 8:43 pm #1416887LeoStaffCustomer Support
Try this PHP snippet:
- You must be logged in to reply to this topic.