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

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

Home Forums Support Transparent header with Logo Menu Logo merged into page header

  • This topic has 11 replies, 3 voices, and was last updated 7 years ago by David.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #350631
    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?

    #350632
    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!

    #350707
    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!

    #350726
    Tom
    Lead Developer
    Lead Developer

    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>
    #352225
    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?

    #352232
    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.

    #352284
    Leo
    Staff
    Customer Support

    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?

    #352338
    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!

    #352402
    Leo
    Staff
    Customer Support

    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

    #352406
    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

    #352408
    Leo
    Staff
    Customer Support

    Sorry I meant hide-on-tablet.

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

    #353666
    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

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.