How can I create this header section?
-
Hi,
I would like some advice on creating the header section illustrated in the image I linked to. It seems so simple, yet I’ve found it almost impossible to do.
It consists of just three elements: The page title, a header image and the site menu. The trick is 1) making all three fit together snugly, and 2) eliminating the huge margins that are often set by default.
I assume I’ll need to use a static image rather than a background image, so the menu will hug the bottom edge of the image regardless of the monitor width.
Also, I would like the header image to span the entire page in this example.
Anyway, I’m using the theme Twenty Twenty-One and am completely lost. If it can’t be done with this theme, can someone recommend another theme?
I should note that I have Elementor but haven’t tried it yet. I’m trying to get away from crutches like Elementor, though I might reconsider. It seems like WordPress is awfully hard to figure out without crutches sometimes. 😉
Thanks for any tips.
The page I need help with: [log in to see the link]
-
Like this? https://bertha.sterndata.com/
You’ll find the CSS for the header stuff here and below: https://github.com/sterndata/2021-child/blob/trunk/style.css#L28
To add or override CSS: use the “Additional CSS” option in the customizer. https://wordpress.org/support/article/appearance-customize-screen/
Learn to use the Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS.
Wow, that was fast. Thanks.
However, I think you misinterpreted my post.
The example you linked to adds a sidebar to the right side of the page. Want I want to do is move the header image (which displays below the site title and menu) between the site title and menu.
So the site title displays at the top of the page, with the header image below it, and the menu below the header image.
The topic ‘How can I create this header section?’ is closed to new replies.