How To Create a Tumblr Menu Navigation Bar


Since we received literally dozens of requests, here you have a tutorial to create a Tumblr Menu Navigation Bar.

By just pasting some code snippets, you will get to easily add custom links, as many as you want, on this simple yet useful link box.



Creating a Tumblr Menu Link Box


Tumblr Link Box

How The Tumblr Vertical Menu Should Look Like


  1. Paste the following Tumblr Menu Code structure within your layout. Customize Theme >> Edit HTML: (Important: You need to search and figure out the best spot within your theme, try to track some name or reference in your theme and then ctrl+f it in the html .YOU CANNOT PASTE THIS CODE IN THE DESCRIPTION BOX)

  2. <div id="navigation"><div class="button">
    <a href="/">home</a><a href="/archive">archive</a><a href="/ask">ask</a>{block:IfCustomLinkOneTitle}<a href="{text:Custom Link One}">{text:Custom Link One Title}</a>{/block:ifCustomLinkOneTitle}{block:ifCustomLinkTwoTitle}<a href="{text:Custom Link Two}">{text:Custom Link Two Title}</a>{/block:ifCustomLinkTwoTitle}{block:ifCustomLinkThreeTitle}<a href="{text:Custom Link Three}">{text:Custom Link Three Title}</a>{/block:ifCustomLinkThreeTitle}
    {block:ifCustomLinkFourTitle}<a href="{text:Custom Link Four}">{text:Custom Link Four Title}</a>{/block:ifCustomLinkFourTitle}
    </div></div>


  3. Now, the second code snippet, paste it right after the <head> tag

  4. <meta name="text:Custom Link One" content="" />
    <meta name="text:Custom Link One Title" content="" />
    <meta name="text:Custom Link Two" content="" />
    <meta name="text:Custom Link Two Title" content="" />
    <meta name="text:Custom Link Three" content="" />
    <meta name="text:Custom Link Three Title" content="" />
    <meta name="text:Custom Link Four" content="" />
    <meta name="text:Custom Link Four Title" content="" />


  5. The third batch now, paste it right after this tag <style type=”text/css”> (if you simply cannot find any tag similar to this one, then paste it in the html area where the CSS code is)

  6. #navigation{
    padding:3px;
    position:fixed;
    margin-top:8px;
    width:200px;
    background-color:#fff;
    border:1px solid #000000;
    margin-left:-4px;
    }
     
     
    div.button a{
    text-align: center;
    margin:2px;
    padding:3px 0px;
    color: {color:text};
    background-color:{color:button};
    margin-top:2px;
    position:relative;
    width: 196px;
    display: inline-block;
    }
    div.button a:hover{
    padding:3px 0;
    color:{color:text} ;
    background-color: {color:button hover};
    }


  7. Now, UPDATE PREVIEW, get out of the html edition and scroll down the customize sidebar until you find the Appereance options, there, you will be able to modify all COLORS for your Tumblr menu bar.

  8. Creating a Tumblr Menu Navigation Bar


  9. Adding Extra Links: Besides Home, Ask and Submit, you can add extra links to this tumblr navigation bar by Scrolling Down the customize section until you find the “Custom Links”, paste the full url path in any of those fields to make the url show up in the link box.


  10. Click on SAVE >> Close.

Visit our directory for more Tumblr Codes.

3 Responses to "How To Create a Tumblr Menu Navigation Bar"

Add Comment
  1. Marye

    July 25, 2012 at 9:34 pm

    Is there a way you can put this horizontally? I’d like to put a horizontal navigation bar underneath my description, which is centered.

    [Reply]

  2. LG

    September 22, 2012 at 1:31 am

    do you have the codes to create a horizontal navigation bar under a header image?

    [Reply]

  3. Fontcliché

    January 21, 2013 at 3:44 pm

    I’m sorry but I reckon you forgot a part at the meta name code because the only thing I can change outside of the html edit are the link names…

    [Reply]

Submit a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>