# Centered Logo in Navigation

**URL:** <https://community.hubspot.com/t/centered-logo-in-navigation/10639>\
**Category:** CMS Development\
**Created:** [October 18, 2018, 7:07pm UTC](https://community.hubspot.com/t/centered-logo-in-navigation/10639 "2018-10-18T19:07:09Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![IAM](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/iam/32/98997_2.png) [@IAM](https://community.hubspot.com/u/IAM)\
**Post date:** [October 18, 2018, 7:07pm UTC](https://community.hubspot.com/t/centered-logo-in-navigation/10639/1 "2018-10-18T19:07:09Z")

</div>

I’m trying to split the navigation bar in between the logo so 3 pages are on the left and 3 on the right with the logo centered and breaking the plane coming down. Here is an example of a site I found online where the logo comes down off the header. [http://tweedbarbers.com/](http://tweedbarbers.com/)

I can’t seem to find any examples of this achieved in Hubspot templates in marketplace. Anyone know the best way to acheive this?

Thank you!

---

<div class="post-metadata">

**Author:** ![Jenny](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jenny/32/24_2.png) [@Jenny](https://community.hubspot.com/u/Jenny)\
**Post date:** [October 29, 2018, 1:59pm UTC](https://community.hubspot.com/t/centered-logo-in-navigation/10639/2 "2018-10-29T13:59:43Z")

</div>

Hey @IAM,

Can you share a link to your page so we can see what you are working with at the moment?

[@Designer\_WOT](https://community.hubspot.com/t5/user/viewprofilepage/user-id/74284), @Kevin-C do you have any tips for @IAM?

Thanks,  
Jenny

---

<div class="post-metadata">

**Author:** ![IAM](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/iam/32/98997_2.png) [@IAM](https://community.hubspot.com/u/IAM)\
**Post date:** [October 29, 2018, 2:29pm UTC](https://community.hubspot.com/t/centered-logo-in-navigation/10639/3 "2018-10-29T14:29:51Z")

</div>

Sure! Here is the link: [http://didsolutions-4954262.hs-sites.com/](http://didsolutions-4954262.hs-sites.com/)

Thanks!

Jenna

---

<div class="post-metadata">

**Author:** ![Designer\_WOT](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/designer_wot/32/43472_2.png) [@Designer\_WOT](https://community.hubspot.com/u/Designer_WOT)\
**Post date:** [October 30, 2018, 11:50am UTC](https://community.hubspot.com/t/centered-logo-in-navigation/10639/4 "2018-10-30T11:50:20Z")

</div>

Sure [@jennysowyrda](https://community.hubspot.com/t5/user/viewprofilepage/user-id/3685), Thankyou for directing me !

---

<div class="post-metadata">

**Author:** ![Designer\_WOT](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/designer_wot/32/43472_2.png) [@Designer\_WOT](https://community.hubspot.com/u/Designer_WOT)\
**Post date:** [October 30, 2018, 12:08pm UTC](https://community.hubspot.com/t/centered-logo-in-navigation/10639/5 "2018-10-30T12:08:46Z")

</div>

Hello @IAM,  
There are two ways to get this First one is to do it from backend and second one is to do it using code. both have its advantages and disadvantages

Method 1. Add the image from advanced menu using custom code like in below screenshot

 ![add-logo-in-navigation.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/b/5bdfecf0d23cccb08a483161fb366845090f11f3.png)

Code to add in navigation:  
\<img src=“[https://cdn2.hubspot.net/hub/4954262/hubfs/ATS%20Shield%20Logo-01.png](https://cdn2.hubspot.net/hub/4954262/hubfs/ATS%20Shield%20Logo-01.png)” alt=“ **Company Name Goes Here** ” width=“200”\>  
Method 2: **Just add below code** in **Additional \<head\> markup** [will be at right sidebar] in template.  
\<script\>  
$(document).ready(function(){  
$(‘.logo span.hs\_cos\_wrapper’).wrap(‘\<li class=“hs-menu-depth-1 hs-menu-item logoInside”\>\</li\>’).parent().insertAfter(‘.custom-menu-primary .hs-menu-depth-1:eq(2)’)  
});  
\</script\>  
Kindly mark this as accepted solution if it helps.  
Thanks !

---

<div class="post-metadata">

**Author:** ![IAM](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/iam/32/98997_2.png) [@IAM](https://community.hubspot.com/u/IAM)\
**Post date:** [November 5, 2018, 3:38pm UTC](https://community.hubspot.com/t/centered-logo-in-navigation/10639/6 "2018-11-05T15:38:41Z")

</div>

Thank you! That worked. Do you know why there is a white box around the logo image and how I can remove it? [http://didsolutions-4954262.hs-sites.com/](http://didsolutions-4954262.hs-sites.com/)

---

<div class="post-metadata">

**Author:** ![Jvizcuna](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jvizcuna/32/7413_2.png) [@Jvizcuna](https://community.hubspot.com/u/Jvizcuna)\
**Post date:** [May 17, 2023, 2:48pm UTC](https://community.hubspot.com/t/centered-logo-in-navigation/10639/7 "2023-05-17T14:48:53Z")

</div>

I’m trying to apply this solution to my website but sadly isn’t working, can you please provide more details about how to add a custom code to te navigation bar?  
Thank you