[Support request] Custom Header with Logo and Menue

[Ulrike]

Hello everybody,

I would like to implement something, but do not know exactly how I should do that.

As in this https://generatepress.com/forums/topic/custom-header/ article, I would gladly change the header.

I want to change the header so.

On the left side a logobox in the size 450×150 will be created.
A logo of 380×60 is inserted there.
A menu on a color background is then to be included on the right side.

I hope this is understandable as I have described it :-).

Can you help me with that?

[Leo]

Hi Andreas,

Try uploading your logo to Customizer > Site Identity.

Then set your navigation location to float right: https://docs.generatepress.com/article/navigation-location/

That should get you close.

Let me know if this is what you wanted 🙂

[Ulrike]

Hi Leo,

thank you.

yes, thats about.
I have already been read this article.

However, my logo is transparent, and the background must be white, and the background menu must be orange.

Here is a screenshot for my site.

I hope this screenshot is understandable.

[Leo]

You should be able to set the background color for Header and Primary Navigation in the color panel: https://docs.generatepress.com/article/colors-overview/

[Ulrike]

The setting I have already made, but here I can only adjust the navigation in a color.

The logo is transparent.
On the left side a box is to be created which is a size of 450px – 150px and there the transparent logo should be inserted in the middle.
In addition, the navigation will then be integrated into Orange to the right edge.

Here is a page where you can see better

Custom Header Navigation

[Leo]

That case I think you can try removing the logo in Site Identity.

Then create your own logo block using the before header content hook:
http://demo.generatepress.com/hook-locations/
https://docs.generatepress.com/article/hooks-overview/

Something like this:

<div class="site-logo logo-block">
        <a href="URL TO YOUR WEBSITE" title="YOUR SITE NAME" rel="home">
            <img class="header-image" src="URL TO YOUR IMAGE" alt="YOUR SITE NAME" title="YOUR SITE NAME">
        </a>
</div>

Then you have to play around with some CSS:

.logo-block {
    background-color: transparent;
}

[Author]

Posts