[Resolved] Logo In Navbar

[Matt Canning]

Is it possible to upload a logo in to the nav bar. Perhaps before the first page or even after the last page with an option to align?

[Tom]

It would involve some custom PHP code in order to do that – I’m away from the office so I can’t provide it – but if you’d like it I can provide once I get home on Monday.

You can also try setting the Navigation Position in “Customize > Layout” to float right.

Then you can remove the navigation background from the navigation and set up your header element with the same color.

That will achieve the same sort of look.

Let me know 🙂

[Matt Canning]

I would be forever in your debt 🙂 It would be fantastic if you could 🙂

I have also tried adding some custom CSS to try and get the space between the header and main content to 0 but I doesn’t seem to be working 🙁

[Dev]

I am interested in the same thing as well (ability to do logo in nav bar with align option and suppress rest of the header altogether). I am considering switching from a theme I purchased on themeforest because of your superior code quality and would gladly purchase every add on once I overcome some of these concerns.

[Tom]

Ok, here’s how we do this 🙂

First, we’ll add our custom CSS:

.main-navigation .site-logo {
    float: left;
    line-height: 60px; /* Adjust this to your menu item height */
    margin-right: 1.5em;
}

Now, let’s add our PHP – we can use this plugin to add the code: https://wordpress.org/plugins/code-snippets/

add_action('generate_inside_navigation','generate_navigation_logo');
function generate_navigation_logo()
{
?>
	<div class="site-logo">
		<img src="THE URL TO YOUR IMAGE" alt="" />
	</div>
<?php
}

A couple small adjustments may be needed – but that should be the bulk of it 🙂

[Matt Canning]

Good news. The code works.

Bad news. I cannot get the nav bar to be 100% width and even though the colour code is the same it looks different :/

[Matt Canning]

I’ve sorted it. Played around with the dimensions. Looks great!

There is a gap between the header and main content which is slightly too big. Is there a way to reduce this?

[Tom]

Do you have a link to your site so I can take a look?

[Matt Canning]

http://www.rhythmcontrol.co.uk

[Tom]

Nice site!

It looks like you already reduced the content top padding? You can reduce it more to make the gap smaller.

Let me know 🙂

[Jessica]

De Snippet plugin does not save my code. Whatever I do, nothing works to save the second code, de php. Any tips for this?

[Tom]

Have you tried contacting their support?

Another option is to create a plugin with your PHP using this plugin (yes, a plugin to create a plugin): https://wordpress.org/plugins/pluginception/

[Jessica]

The code does not work with the new generate press update. I get a white screen, it doenst show my website at all anymore.

[Jessica]

Sorry my mistake, i did something wrong 🙂 I works now

[Tom]

Cool 🙂

[Author]

Posts