[Resolved] Header Logo Nav Layout

[Alan]

Hello

Im new to GeneratePress. Im trying to setup my header area so that I have an image on the right side of the header and text on the left hand side. Ive uploaded a photo and placed it in the header widget but I dont seem to be able to add text to the left of the photo.

Thanks very much

Alan

[Leo]

Hi there,

Currently this option is used so the default header is hidden:
https://docs.generatepress.com/article/navigation-as-a-header/

Do you have a quick example of what you are trying to achieve? It will help me visualize and provide the best suggestion possible.

Let me know 🙂

[Alan]

Hi Leo

Im also new to dropbox. Please let me know if this doesnt work 🙂

https://www.dropbox.com/s/1io0wunz6qc5rkj/Header%20Layout.png?dl=0″>

The image can either go left side or right side

Alan

[Leo]

To achieve that header/navigation layout:

– Uncheck this option:
https://docs.generatepress.com/article/navigation-as-a-header/

– Upload a logo here:
https://docs.generatepress.com/article/site-identity-overview/

– Add the phone number as the header widget:
https://docs.generatepress.com/article/header-widget/

– Set navigation location to below header:
https://docs.generatepress.com/article/navigation-location/

Let me know 🙂

[Alan]

Hi Leo

I think that I did that correctly. I still dont know how to put some text below the logo area. Id like to put a h3 heading, maybe about 4 lines of text below the heading and then a button below the text.

Regards

Alan

[Leo]

Maybe the header element add-on is what you are looking for?
https://docs.generatepress.com/article/page-hero-examples/
https://docs.generatepress.com/article/how-to-create-a-page-hero/
https://docs.generatepress.com/article/header-element-overview/

Let me know 🙂

[Alan]

Hi Leo

I had quite a few issues going on so Ive put temporarily put my old site back up. You can see what Im trying to achieve if you have a look at it now. Is it possible to have the logo, image, greeting text and phone number in these positions?

I think Im going to have to create a subdomain and load a separate copy of wordpress on it so I can build the theme in a more leisurely manner 🙂

Regards

Alan

[Leo]

You can create this section:
https://www.screencast.com/t/okaGfvAfnTDh

With the exact steps I provided here:
https://generatepress.com/forums/topic/header-logo-nav-layout/#post-951507

If that doesn’t work, can you link me to the site using GP after all the steps are completed?

Let me know if this is clear 🙂

[Alan]

Hi Leo

I got the site up and running today. I’ve got quite a bit of tidying up to do but I still haven’t managed to sort this header out.

Im trying to get the logo up the top left in the top bar. Im also trying to get some greeting text in the area to the left of the van and below where the logo currently is.
I want to put a H3 heading and then have 4 lines of text below the heading, and a button below that text.

Ive currently got the van, nav and phone number in the correct positions

I cant seem to do the rest

[Alan]

Hi Leo

I think what Im trying to do is get the logo up top left into the top bar and get a new widget to the left of the van.

Regards,

Alan

[David]

Hi there,

better method would be to use a Header Element to create the background image with you content and van:

https://docs.generatepress.com/article/header-element-overview/

Then use the header widget for your phone number so its inline with the site logo. Then put the nav below the header.

[Alan]

Hi David

Ok Im lost 🙂

I watched that video and it looks like what Im after but Im not confident.

Basically in my old theme I had a background image that Ive already uploaded. I had two widgets in the header. One for the left side and one for the right side. I put an image in the left side one and some text in the right side one. In this theme I have found a widget and placed an image in it ( but its on the right and Id prefer it on the left) but there doesnt seem to be another widget for the left side.

I think that you are talking about creating one but Im not sure.

This is what I had in the past but maybe you are suggesting something better.

https://www.dropbox.com/s/yyy77jtd8jpqxlx/Header.PNG?dl=0″

Thanks

[Leo]

The header element would be for creating the section highlighted in green:
https://www.screencast.com/t/bTQgYZyhUr

Here is a quick step by step guide:
https://docs.generatepress.com/article/how-to-create-a-page-hero/

And some examples:
https://docs.generatepress.com/article/page-hero-examples/

You will want to create two columns – one for the image and one for the text. This article provides an example of how to create 3 columns:
https://docs.generatepress.com/article/split-header-three-sections/

You can basically use the same HTML and CSS to get started.

[Alan]

Ok dont laugh 🙂 Would this code be correct?

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

    <div class="header-section-2">
        Header right content
    </div>
</div>

and css

.header-section {
    display: flex;
}

.header-section > div {
    width: 50%;
}

@media (max-width: 768px) {
    .header-section > div {
        width: 100%;
    }
}

If I just want to put html in each area do I need to add widgets. Im trying to minimise the number of plugins that I need.

[Leo]

That’s really good 🙂

Small edit in your HTML to make it easier:

<div class="header-section">
    <div class="header-section-1">
        <img src="https://Car-Image-URL-Here">
    </div>
    <div class="header-section-2">
        text section
    </div>
</div>

You can add that directly into the page hero content and just add your desired content:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-1-add-the-content

No extra plugins needed.

[Author]

Posts