How to move Twenty Seventeen logo to the Top menu

First set up a Child Theme: https://codex.www.ads-software.com/Child_Themes

I have created a child theme, activated it and I need further instructions on how to move the logo in the same line where the Top menu items are visualised.

In your Child Theme, create the following directory structure with the file:

/template-parts/navigation/navigation-top.php

Inside the Child Theme ‘navigation-top.php’, add all the code from this PasteBin page: https://pastebin.com/raw/UHgQiF9Y

Then, still within your Child Theme, create this directory structure with the file:

/template-parts/header/site-branding.php

Then edit the (Child Theme) ‘site-branding.php’ file and add all the code from this PasteBin page: https://pastebin.com/raw/iMCW6rw8

The next step is styling the logo and menu, for which you’ll need to show us your website.

I am using a vanilla WordPress 4.9.2 installation without additional extensions on a local hosting environment and testing with it to move the logo besides the Top menu items. There are no other modifications.

• This reply was modified 6 years, 10 months ago by svetlio81.

In your localhost application does this work but look unstyled?

I have tried to place a logo in the div above the menu, placing it with position in css, but I seem to have lost the javascript behaviour when looking at the page in a small window (and through the inspector console).

As an alternative, I tried to create a custom link in the main menu using a small logo (125 px wide). However, the logo becomess its own line in the top menu, still only its drawn size, but with great margins top and bottom.

If I use the custom link as an entry in a navigation widget with a custom menu set yo wutg small unages, it behaves very well. Is there something about the main top mennu which makes it act differently — perhaps something about the li and img in combination in the top menu?

Regards,
Stilman Davis

sorry, typo alert —
Should read “custom menu set up with small images” in the third paragraph.

@stilman-davis, Did you try the technique I’m suggesting? I’m waiting on feedback from the OP to see how it went.

Andrew, I had created a header.php in my child theme. The logo did appear on a large window and behaved well.

However, I may have made some fundamental css error becuase when going to a small window, the logo never shifted as I would have expected and disappeared. Plus that other problem described above.

I thought trying to use the methods already provided by WP could have been a much easier way of accomplishing this.

Would you by any chance be able to replicate all the CSS problems you faced, and link us your site with those issues active? I won’t be able to provide the full solution until then.

I have set a test WordPress installation (test website) and added your code to /template-parts/navigation/navigation-top.php and /template-parts/header/site-branding.php.

Please advise how to move the Wordpess logo on the Top menu line in front of the Home link.

• This reply was modified 6 years, 9 months ago by svetlio81.

Now in your Child Theme style.css file add this:

#masthead .wrap,
.navigation-top {
    position: static;
}

.site-branding {
    padding-right: 70px;
}

.site-navigation-logo {
    position: absolute;
    right: 0%;
    top: 10%;
    width: 60px;
}

@media screen and (min-width: 480px) {

    .site-navigation-logo {
        right: 10%;
        top: 40px;
        width: auto;
    }

}

@media screen and (min-width: 768px) {

    #masthead .wrap,
    .navigation-top {
        position: relative;
    }

    .site-branding {
        padding-right: 0;
    }

    .site-navigation-logo {
        position: static;
    }

    .site-navigation-logo,
    .site-navigation-menu {
        float: left;
    }

    .site-navigation-menu {
        /* 20px = half the height of the logo to vertically center text */
        margin-top: 20px;
    }
}

Some of this CSS will depend on the size of your logo, so it’s important to show the real logo that will be used on your site.

Thank you for the provided solution.

Thanks for your help, Andrew.

I am starting over again with a new child theme (amazing how prolific you can be with these children). I will let you know how I get on using your code above.

Regards,
Stilman

@stilman-davis, Sounds good, let me know how you get on. Would you be able to open a new thread about your progress if you have any issues? I’m subscribed to this theme’s forum so I will be notified.