No announcement yet.

Any way to add a facebook icon in the nav bar?

  • Filter
  • Time
  • Show
Clear All
new posts

  • Any way to add a facebook icon in the nav bar?

    I'd like to put a facebook Icon in the nav bar to link to our facebook page. I found this old thread from VB4 which suggested you could do it by putting this code in the title, of the nav bar item, instead of text - but it doesn't seem to work:

    Instead of entering the text in the title box, you can enter

    <img src="images/facebook.png">
    Any way to do this in VB 5?

  • #2
    Add the Facebook link to the Navigation Bar or Sub-Navigation Bar.

    Search for "Facebook" in phrases in the Navigation Bar

    Edit the phrase replacement text with the link. i.e. <img src="images/misc/facebook.png">



    • Wayne Luke
      Wayne Luke commented
      Editing a comment
      Note that due to a bug, every time you change the Navigation Bar through Site Builder, the < and > will be replaced with &lt; and &gt; respectively. You'll have to edit and save the phrase (which is untouched by the bug) to restore proper HTML.

      A better solution is added below.

  • #3
    Just as an aside...with vB5, there is no point looking at anything for vB4, as the two products are completely different. Pretty much nothing from vB4 templates will work in vB5 templates.

    TalkNewsUK - My vBulletin 5.6.3 Demo
    AdminAmmo - My Cloud Demo


    • #4
      This could also be an option :
      Last edited by delicjous; Fri 14 Sep '18, 6:42am.


      • #5
        The recommended method of doing this would be to use Template Hooks.
        1. Log into the AdminCP.
        2. Go to Styles -> Style Manager.
        3. Select "Add New Template" from the All Style Options for your style.
        4. Name it "header_tabbar_facebook"
        5. Enter your code.
        6. Save the template.
        7. Go to Products & Hooks -> Manage Template Hooks.
        8. Click Add New Hook at the bottom.
        9. Set the hook location to header_tabbar.
        10. Set Active to "Yes"
        11. Give it a name like "Facebook Button"
        12. Enter the template name you created "header_tabbar_facebook"
        13. Save your new hook.

        Reload the front page and your button should be available in your current style. Add the template to every style you have available to your users.
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API - Full / Mobile
        Vote for your favorite feature requests and the bugs you want to see fixed.


        • #6
          Awesome! thank you for that!


          • #7
            It works great - just need to use some CSS and a little tweaking to position it correctly. What I used for the template code was (in order to make it a tab like everything else):

            <li class=" section-item js-shrink-event-child">
                <a class="h-left navbar_facebook" href="" target="_blank"><img src="/images/icons/facebook-20px.png"></a>
            And then in the CSS:

            /* facebook icon */
                padding:0px 12px 0px 12px !important;
            YouTube icon coming next!

            Click image for larger version  Name:	example.jpg Views:	1 Size:	97.0 KB ID:	4398485


            Related Topics