[Support request] Transparent header with Logo Menu Logo merged into page header

[David]

Hey,

How can I lift the primary navigation menu on this page so that it sits in between the silver bullet logo and the microsoft logo and simultaneously make the header transparent and merge it into the site header so that the background video goes up into the top bar?

[David]

Forgot to add…

Here is the screenshot: https://www.dropbox.com/s/zdtvrh5xl0rvqwl/Screenshot%202017-07-17%2010.55.57.png?dl=0

Here is the webpage: http://nvosystems.com/home-2/

Thank you!

[David]

I have updated the site so please refer to the screenshot above to understand what I meant when I wrote the question : )

If you look at this page: http://nvosystems.com/home-4/

You’ll see I’ve made progress. Now, I just want to add the microsoft logo to the right side of the header and center the nav between the two logos.

Looking forward to your guidance!

[Tom]

Try this CSS:

@media (min-width: 769px) {
    .inside-header {
        text-align: center;
    }

    .nav-float-right .inside-header .main-navigation {
        float: none;
        display: inline-block;
    }

    .site-logo {
        float: left;
    }

    .microsoft-logo {
        float: right;
    }
}

Then add your microsoft logo into the After Header Content hook in GP Hooks:

<div class="microsoft-logo">
    <img src="URL TO LOGO" alt="" />
</div>

[David]

Thanks for understanding what I was asking. Looks like it worked!

http://nvosystems.com/home-4/

Is there anything I should be aware of when using this approach? Any limitations? Any issues with responsiveness?

[David]

Also, how can I hide the microsoft logo on mobile?

And, would it be possible to insert the Microsoft logo as the last item in the primary nav menu? While this wouldn’t retain the 3 column look, it might be simpler.

Thank you.

[Leo]

Hi there,

The CSS only applies to desktop so it should be fine responsive wise.

To hide Microsoft logo on mobile:

<div class="microsoft-logo hide-on-mobile">
    <img src="URL TO LOGO" alt="" />
</div>

Are you looking to insert the logo into the navigation for logo only or desktop as well?

[David]

Thanks for the speedy response.

A few issues are happening with the first approach in terms of responsiveness:

1. at ~1206 pixels: https://www.dropbox.com/s/z2299gypojtn5c1/Screenshot%202017-07-20%2012.52.29.png?dl=0
2. at ~1193 pixels: https://www.dropbox.com/s/yaulkj9c159x4v8/Screenshot%202017-07-20%2012.54.54.png?dl=0
3. at ~763 pixels: https://www.dropbox.com/s/ziy84cjqkujgjwv/Screenshot%202017-07-20%2012.56.11.png?dl=0

Could you help me understand how to fix these? Thanks for your help!

[Leo]

Hmm if you hide-on-mobile class suggested above, the logo shouldn’t show up at 763.

You can also add hide-on-desktop too.

One other thing to try is to trigger mobile menu at an earlier width: https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

[David]

I’ll try that and see if it works. That said, hiding on desktop wouldn’t make sense because I want it to show up on desktop.

As a fall back, I’d like to know how to insert the microsoft logo as the last list element in the primary nav. Do you have instructions on how to do that?

Thank you

[Leo]

Sorry I meant hide-on-tablet.

You can use this hook: https://docs.generatepress.com/article/generate_inside_navigation/

[David]

Thank you.

How do I push the menu underneath the silver bullet logo (it’s sitting next to it right now) and center both?

This is what it looks like right now: https://www.dropbox.com/s/4ko7gyy5r4zseoh/Screenshot%202017-07-23%2016.39.54.png?dl=0

[Author]

Posts