Centered Logo in Navigation

解決
Highlighted
常連投稿者

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/

 

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!

返信
0 いいね!
2件の承認済みベストアンサー

受理された解決策
Highlighted
Regular Contributor | Diamond Partner

Sure @jennysowyrda, Thankyou for directing me !

Highlighted
Regular Contributor | Diamond Partner

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
Code to add in navigation:
<img src="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 !


5件の返信
Highlighted
コミュニティーマネージャー

Hey @IAM,

 

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

 

@Designer_WOT@Kevin-C do you have any tips for @IAM?

 

Thanks,
Jenny


Did my post help answer your query? Help the Community by marking it as a solution
Highlighted
常連投稿者

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

 

Thanks!

Jenna

返信
0 いいね!
Highlighted
Regular Contributor | Diamond Partner

Sure @jennysowyrda, Thankyou for directing me !

Highlighted
Regular Contributor | Diamond Partner

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
Code to add in navigation:
<img src="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 !


Highlighted
常連投稿者

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/

返信
0 いいね!