[Support request] Large centered logo with navigation floting to right above it…

[steph.waszak@gmail.com]

Hiya,
I am trying to have my navigation float to the right, with my logo below it centered.

The logo is rather large, so when I just do a regular “float right” it pushes the logo off center to the left a little and when I add more than 2 menu items it pushes the menu under the logo (which does what I want, in theory just in under the logo opposed to above).

I’ve read up on your forums, but haven’t really found a correct way to “fix” this specific issue. I did find something about splitting the header using GP Hooks, but am not exactly sure how I’d do that for my actual situation because it seems I couldn’t find a post with the same situation.

You can view the site in question at http://stephwaszak.com/spiritlife/

A secondary question I have, is we want the websites navigation to be transparent but with the mobile menu enabled, it loads a light gray which doesn’t work since my menu is white. Is there a way to fix this using CSS? I couldn’t find anything within the customization to fix this.

Any help is appreciated! If you need login credentials, I can provide them by email 🙂 Thanks!

[Tom]

Hi there,

Do you have an example of the look you’re going for with the header and navigation possibly? Having trouble picturing it exactly.

As for the mobile menu, you would need to apply your colors using CSS as you’ve made it transparent. Something like:

@media (max-width: 768px) {
    .main-navigation, 
    .main-navigation ul ul {
        background: #222;
    }
}

[steph.waszak@gmail.com]

Hi Tom,
Thanks for the quick response. The CSS works great.

I guess something like this http://demo.generatepress.com/page-header/ in theory but we want the large logo (the spirit life with the bird) to be in the center and the menu to be on the top right (no top bar). I am not sure if this image of the mockup helps at all to visualize what I am thinking http://stephwaszak.com/spiritlife/wp-content/uploads/2017/02/FAQs.jpg

I tried to make it so that the logo is part of the background image, but then the container is too small.

In theory, I thought that making the primary navigation above the header and transparent would make it so the background iamge would pull up behind the navigation menu but that also seems to not be working.

Does this make more sense?

[Tom]

Hmm, you know what might work..

Try setting up your Blog Page Header: https://docs.generatepress.com/article/blog-page-header/

So you would remove your header background image, then upload it as the image in the Blog Page Header settings.

Then you would go into the Advanced settings and merge your blog page header with your regular header.

This would allow you to:

1. Set your navigation location to above header, and align right.
2. Set your navigation colors to whatever you want, as you can set them to be transparent in the blog page header settings.

Then, you can apply your blog page header to all pages with a snippet of PHP:

add_filter( 'generate_get_blog_page_header','__return_true' );

Slightly more complicated, but I think the result will be what you’re looking for.

Let me know if you need more info 🙂

[Author]

Posts