add logo to top right in navigation bar

Hello jackstar86,

It requires editing Core files. At the time of editing core file make sure you are using a Child Theme, so that all your changes remain safe even after update.

[ Moderator note: link redacted, please do not send people to your site that way. ]

You need to go to your Appearance > Editor > header.php and look for this code there:
<div id="top-bar">
Put the below code right after this code:

<div id="site-logo">
    <?php klopp_logo() ?>
</div>

Then you need to add this CSS in your Custom CSS for better result:

#top-bar #site-logo {
    padding: 0 85px;
}
@media screen and (max-width: 750px){
#top-bar #site-logo {
    display: block;
    text-align: center;
}}

Hope that helps.

Thank you.

• This reply was modified 8 years, 3 months ago by Jan Dembowski.

Hey thanks this is very helpful, I managed to get it going!

Only thing is not the logo and menu is positioned incorrectly in mobile view. I have tried various things like adding padding to #site-navigation but the custom css keeps rejecting it. Any ideas?

Hello jackstar86,

Can you elaborate what are you trying to achieve actually? So that we can help you better.

Looking forward for your reply.

Thank you.

Hi Sam

Sorry for not being speficic enough beofer. I managed to get the logo to sit above the header text (on all pages other than home) and now looks ok on mobile, my other issue is the mobile drop down menu. I have looked at adding padding-top to the CSS code, to drop the menu below the header (for all pages other than home) but my css style sheet wont accept it, putting #site-navigation in red, here is the code:

@media screen and (max-width: 767px)
#site-navigation .td_mobile_menu_wrap {
min-height: 42px;
padding: 20px;
padding-top: 110px;
margin-bottom: 0px;
position: relative;
min-width: 150px;
display: inline-block;
}

Is there somewhere else in the CSS that I should be editing to change the location of the mobile menu?

Hello,

You have made a syntax Error. You need to replace the above code with this:

@media screen and (max-width: 767px){
#site-navigation .td_mobile_menu_wrap {
min-height: 42px;
padding: 20px;
padding-top: 110px;
margin-bottom: 0px;
position: relative;
min-width: 150px;
display: inline-block;
}}

And for top padding you need only “padding-top: 110px;”. Other codes are just unused here.

Hope that helps.

Thank you.

Thank you so much!

Pleasure to help you. ??

Feel free to ask if you need any other help in future.