Archived topic
Custom Header with Logo and Menue
5 replies · Started by Ulrike on June 5, 2017
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 450x150 will be created.
A logo of 380x60 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?
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 :)
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.

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/
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
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;
}