• Resolved boboberg

    (@boboberg)


    I want to have my menu at the top of each page, like in the Twenty Sixteen theme. How can I do this in GeneratePress?
    I have Menu Plus installed but could only see how to put a vertical menu in header widget region. I want a horizontal menu a the very top of each page.

Viewing 14 replies - 1 through 14 (of 14 total)
  • Theme Author Tom

    (@edge22)

    You should be able to use the Customizer for this: https://docs.generatepress.com/article/navigation-location/

    Also, if you have GP Premium, feel free to use the premium support forum: https://generatepress.com/support

    Thread Starter boboberg

    (@boboberg)

    Thank you! That was a big help, and with a little tweaking of colors I was able to come somewhat close to what I am looking for. But I don’t think I can quite get the effect I liked in the theme Twenty Sixteen. Here is a comparison:
    Customized using GP:
    https://www.mofsa.org/mockup2/
    Using Twenty Sixteen:
    https://www.mofsa.org/mockup/
    The latter puts the primary navigation in the header rather than above it. I simulated the effect somewhat in GP by hiding the site title and tagline.
    How could I get the GP version closer to Twenty Sixteen? In particular, make the menu item for the site at the left and the other menu items aligned right?

    Thank you for the link to the premium support forum. I will use it in the future!

    Theme Author Tom

    (@edge22)

    You could use the “Float Right” option for the Navigation location.

    Then display your site title/tagline and you’ll have the exact same look.

    Let me know ??

    Thread Starter boboberg

    (@boboberg)

    I had tried that before and it did not work!
    https://www.mofsa.org/mockup2/wp-content/uploads/2017/02/Menu-Navigation.jpg

    I did some more work on the site, and I really like the capabilities of the Customizer. Here is how it looks now:
    https://www.mofsa.org/mockup2/

    Theme Author Tom

    (@edge22)

    Huh, that doesn’t look right at all.

    Any chance you can set it to float right and let me know so I can see it live? Should be able to see what’s going on if I can inspect the code.

    Thanks!

    Thread Starter boboberg

    (@boboberg)

    Ok. I set navigation to float right and made site live. Here it is:
    https://www.mofsa.org/mockup2/

    Theme Author Tom

    (@edge22)

    It looks like the alignment is set to right, but the actual Navigation Location option is still set to Above Header.

    Thread Starter boboberg

    (@boboberg)

    No, alignment is set to right and location is set to Float Right
    https://www.mofsa.org/mockup2/wp-content/uploads/2017/02/Navigation-Options.jpg

    Theme Author Tom

    (@edge22)

    Ah sorry, browser cache.

    So what I would do in this case to mimic Twenty Sixteen is remove the logo from Customize > Site Identity.

    Then, using the GP Hooks add-on you can add the image into the “After Header Content” hook.

    If you don’t have/want the add-ons, you can use some PHP instead: https://docs.generatepress.com/article/generate_after_header_content/

    add_action( 'generate_after_header_content','tu_add_header_content' );  
    function tu_add_header_content() { ?> 
        <div class="site-logo">
            <img src="URL TO YOUR LOGO alt="" />
        </div>
    <?php }

    Adding PHP: https://docs.generatepress.com/article/adding-php/

    Thread Starter boboberg

    (@boboberg)

    Very nice. I activated GP Hooks and used this HTML in After Header Content hook:
    <div class=”site-logo”>

    </div>
    And removed logo from Customize > Site Identity.
    Then it did indeed mimic Twenty Sixteen.
    Unfortunately, though, when I did that it broke a behavior I could get from GP and not from Twenty Sixteen – namely to replace the site logo by a different image for the different pages chosen from the menu.
    So I have restored the way I previously had it. See
    See https://www.mofsa.org/mockup2/.
    When you click on the different menu items, the logo changes.
    (There is one slight difference. Now there is a gray band, presumably where the disabled hook was. Is there a way to remove this hook and not simply disable it?)

    This site is being looked at by other people, and I want to keep it stable for them while I experiment further myself. Is there an easy way to do this?

    Thread Starter boboberg

    (@boboberg)

    Sorry, some of my HTML got dropped when I submitted. Let me try using code

        <div class="site-logo">
            <img src="uploads/2017/02/Square-White-Angel.jpg" alt="" />
        </div>
    Theme Author Tom

    (@edge22)

    Ah, if you want to change the logo for each page, you can fully remove that code.

    Then, simply upload your images as featured images: https://docs.generatepress.com/article/adding-featured-images/

    Then each page will have a different featured image if you set one.

    Thread Starter boboberg

    (@boboberg)

    Thanks, Tom. You’ve given me enough to mull on now. I appreciate all your help. If I have other questions later, I will start a new thread!

    Theme Author Tom

    (@edge22)

    Sounds good! I’ll be here ??

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Locate menu at top of page in GeneratePress’ is closed to new replies.