[Resolved] Header Logo Nav Layout

[Alan]

Ok now just to try and make it a bit harder…

Can you please edit those two codes so that the left area is 60% and the right one is 40%

That would solve the image being in one and the text be in another.

How do I move the logo up to the top bar or what would be best for that?

[Leo]

For 60/40 split, replace:

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

With

.header-section .header-section-1 {
    width: 60%;
}
.header-section .header-section-2 {
    width: 40%;
}

Not sure what you mean by logo but have you tried the method suggested previously?
https://docs.generatepress.com/article/navigation-as-a-header/

[Alan]

Thanks

OK here goes. Im not sure Im in the correct area. Where do I paste the html and css? Do I paste the html here?

https://www.dropbox.com/s/51uufpyq1je3tkm/Hook1.PNG?dl=0″

Do I tick any boxes?

[Leo]

Can you try the header element (instead of hooks element showing in your screenshot) as suggested a couple times here?
https://generatepress.com/forums/topic/header-logo-nav-layout/#post-951526
https://generatepress.com/forums/topic/header-logo-nav-layout/#post-954478

Please do take a look at this article:
https://docs.generatepress.com/article/how-to-create-a-page-hero/

[Alan]

Whoops …

How about this?

https://www.dropbox.com/s/jgwk1t64tte7pkv/Header2.PNG?dl=0

[Leo]

Yup that looks good.

[Alan]

Ok I will have a go. Does the css just go in customise – css?

[Alan]

And once I’ve finished it how do I upload to it?

Do I just remove my existing image from the header widget and this overrides that widget?

[Leo]

You would use the display rule to display it:
https://docs.generatepress.com/article/header-element-overview/#display-rules

[Alan]

Ok I sort of have it working. How do I enter my text and do I remove my old background and somehow add it again?

[Alan]

Also how do I get it to appear differently on a mobile phone so that the van appears full width on the screen and the text area appears full width below the van?

[Leo]

Your text would replace the “text section” here:
https://generatepress.com/forums/topic/header-logo-nav-layout/#post-954501

Add background image:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-2-choose-a-background

Stack image and text section on mobile:

@media (max-width: 768px) {
    .header-section {
        flex-direction: columns;
    }
}

[Alan]

Ok getting there …

How do I now move the logo up into the top bar?

[Alan]

Also how do I create padding between the van and the text? The padding that I entered in the header settings seems to be for the entire header

[Alan]

I think that I moved the logo up to the top bar correctly.

[Author]

Posts