Transparent header over content

  • I am trying to make the header on my website transparent and have it overlay the content of my page using the Twenty-Three WordPress theme, but I am having some difficulties. It is not possible and i would like to do it without a plugin. Here is an example of a website with what i want https://www.bingingwithbabish.com/#top

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi @keremyapici it seems you are referring to having the logo, menu items and introductory text above a background image.

    That is possible using the cover block, this block allows you to add a background image and blocks on top. You can move your cover block from the body area to the header area, make the group block with the menu, and logo a child block of the cover block.

    It is better to do this in the list view, drag and drop to move around the blocks as shown in this short video.

    Thread Starter keremyapici

    (@keremyapici)

    Hi @thelmachido, thank you for the fast reply and tips for solving this issue. I have been thinking about this as a solution, but more is needed to solve the problem entirely. This would only be useful for the home page. However, I am interested in different covers for every page. How can i do this with this theme?

    This would only be useful for the home page. However, I am interested in different covers for every page. How can i do this with this theme?

    Hi @keremyapici you can have different headers with a different cover image using templates. You can create templates which you can assign to different pages. You can read more about templates below:

    https://www.ads-software.com/support/article/template-editor/

    Let me know if that helps!

    Thread Starter keremyapici

    (@keremyapici)

    Okay, what if i just want a transparent header? what is the solution for that?

    If you make the header template transparent it will show what you have set as the site’s background color. I am not sure if that is what you want exactly. Maybe you can try to move the Header lower such that it sits on top of your page content, you can do this using the CSS code below:

    header.wp-block-template-part
    {
    margin-bottom:-100px;
    }

    You can adjust the number to your liking but you will also need to add more padding to the top of your content to make more room for your header template. This is more of a hacky solution.

    You can access the CSS editor by adding this after your URL?/wp-admin/customize.php?and visiting the Additional CSS panel.

    You might need to remove all padding or margin from the group block inside your header template.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Transparent header over content’ is closed to new replies.