How to create a transparent menu with WordPress Full Site Editing

Transparent headers are very popular in websites. You get your Hero image, your site title, the logo, and the site navigation, all in one package.

Although it’s such a popular design, it’s not always intuitive, event if you have already a pattern that have done most of the design work for you.

Many themes, such as the Astra Theme, and many page builders such as Elementor, offer easier ways to build a transparent header, but with WordPress blocs, it’s not as intuitive. That’s why we are making this video.

In this video, we are working with the WordPress Twenty Twenty-Three Theme.

To do that, we go into

• Dashboard
• Editor
• Click on the home page so that it will expand
• Click on the List View to get a more clear picture on how the page is put together
• On the list view, click on Header
• Once you click on header click on the three buttons and chose “Replace Header”
• “Replace Header” will show you different patterns
• Chose the pattern “Header inside full-width background image”
• Once we have the header with the full-width background image, we want to replace the image
• Go to the list view under header and expand it until you see the icon “Cover”
• You should see a bar the option to replace the image.
• Simply click “Replace” and bring in image from your media library or download a new image
• To increase the height of the image find the handle bar at the button of the image and pull it down
• Of the menu looks lower that what you would like it to be, on the list view, expand on the Cover until you find “Spacer.”
• Expand the Spacer until you the menu being putshed up

Our transparent header is almost finished. The only thing lacking is that that the top of the page, there is an gap between your browser and the Hero image. To get rid of that gap, we:

• Go to the list view and click on Header
• Expand the header until you find the menu row
• Select the Menu row by clicking on it
• Then, on the upper right corner click on Styles
• Click on Layout
• Click on padding
• Click on the icon that allows you to change the setting of the padding
• You will see that the padding was set to 3, drag it down to zero.
• That’s it!!!

Previous Web Design posts

• How to create an accordion on WordPress
• How to create a menu with WordPress Full Site Editing
• How to design an About section on the home page with WordPress