Float Logo Outside Container

[Reese]

Guys, Love the theme – my go to now for every site!

I’m wanting to build header with “logo outside the container” that would appear similar to this: https://clackamasfirehonorguard.com/, a site that I found via another GP support thread that references this article:
https://docs.generatepress.com/article/navigation-logo/#float-navigation-logo-outside-container

Trouble is, when I attempt to implement I have only limited success. Some confusion that I cannot make sense of, perhaps between a combination of the variety of settings for logo types, sticky headers, etc.

Wonder if there’s anything that you see jumping out in my Customizer settings or CSS?

Grateful for whatever assist you can lend!

Reese

[Leo]

Hi there,

Looks like it’s almost working.

Is the current issue that the logo is too far down from the navigation?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Reese]

Thank you Leo, yes – can quite figure the logo’s relationship to the header and the main navigation, I would like the logo aligned with the top of the header.

Almost working, but not sure where/how to best make this setting – in the CSS or within Customizer.

I realize this challenge is likely my own lack of CSS knowledge, Thanks again for whatever suggestions you can offer.

Reese

[David]

Hi there,

try editing this CSS to include the top: 0; property:

.navigation-branding img,
.site-logo.mobile-header-logo img {
    position: absolute;
    height: 225px;
    top: 0; /* add this property */
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Reese]

Excellent! Thank you David, that worked. Grateful for your assist!

Reese

[Reese]

.

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts