[Resolved] Logo over page header image

[Dave]

Hey guys, how would I do something like what I see on the below site with the logo hanging over the content below while keeping the mav menu height small like you see as well:

http://www.westpierce.org/

Thanks!

[Leo]

This should help: https://docs.generatepress.com/article/navigation-logo/#float-navigation-logo-outside-container

[Dave]

So I did that and got this:

https://clackamasfirehonorguard.com/

[Tom]

What are you wanting it to look like? I would assume the white area at the top shouldn’t be there and the navigation should be taller?

[Dave]

Yah I’d like it to look either like the example in the link Leo sent or the original website I mentioned in my first post. No white at all on top and the black nav section a little larger. I’d like the logo to hang over half and half each side.

[Leo]

The white space is from the CSS you’ve added:

@media (min-width: 769px) {
    .main-navigation {
        margin-top: 75px;
    }
}

Then you should be able to increase the navigation height:
https://docs.generatepress.com/article/menu-item-height-width/

[john770]

Hey Dave,

You might try adding the following CSS code to your custom CSS (via Customizr or via Tom’s Custom CSS plugin):

.main-navigation {
	margin-top: 0;
	padding: 15px;
}

.main-navigation .navigation-logo img {
	padding: 0px 10px 10px 10px;
	margin-top: -25px;
}

Disclaimer: I am a GP newbie and new to this forum, so I am not sure if other user comments are appreciated in here. If not, dear Tom and Leo, please excuse and just tell me to refrain. 🙂

HTH, John770

[Dave]

Awesome, thanks everyone! Got it figured out.

[Tom]

Awesome 🙂

[Author]

Posts