Site logo

Archived topic

Custom Header with Logo and Menue

5 replies · Started by Ulrike on June 5, 2017

Viewing posts 1–6 of 6

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 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.

Menu

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

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;
}
This archived topic is closed to new replies.