HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Creating a Static (Fixed) Top Menu Bar

edited July 2014 in General Banter

This is pure css and html addition to create a static (Fixed) menu bar at the top of every page.

If you improve it please share it with us

you could duplicate your style or embed & add the changes to your current style (hopefully there will be no conflict with the css classes)

There is no limit to the styling you could apply to this menu bar (font face, bgcolor, borders, etc) just modify the css code.

1- Copy "default.master.tpl" from "vanillaforum/applications/dashboard/views/" to

yourtheme/view/ (create folder if not presence)

2- Download custom.css file and place it in
yourtheme/design/ (create folder if not presence)

3- Download 253.png and place it in

4- Open (or download attached file) and
<body id="{$BodyID}" class="{$BodyClass}">

<!-- Start Drop Menu-->
<div class="header">
    <ul id="nav">
        <li><a href="#" title="Return home">Home</a> </li>
        <li><a href="#" title="About the company">About</a>
            <li><a href="#">The product</a></li>
            <li><a href="#">Meet the team</a></li>
        <li><a href="#" title="The services we offer">Services</a>
            <li><a href="#">Sevice one</a></li>
            <li><a href="#">Sevice two</a></li>
            <li><a href="#">Sevice three</a></li>
            <li><a href="#">Sevice four</a></li>
        <li><a href="#" title="Our product range">Product</a>
            <li><a href="#">Small product (one)</a></li>
            <li><a href="#">Small product (two)</a></li>
            <li><a href="#">Small product (three)</a></li>
            <li><a href="#">Small product (four)</a></li>
            <li><a href="#">Big product (five)</a></li>
            <li><a href="#">Big product (six)</a></li>
            <li><a href="#">Big product (seven)</a></li>
            <li><a href="#">Big product (eight)</a></li>
            <li><a href="#">Enourmous product (nine)</a></li>
            <li><a href="#">Enourmous product (ten)</a></li>
            <li><a href="#">Enourmous product (eleven)</a></li>
        <li><a href="#" title="Get in touch with us">Contact</a>
            <li><a href="#">Out-of-hours</a></li>
            <li><a href="#">Directions</a></li>
<br />
<br />
<!-- End Drop Menu-->


Change the links to the ones you need to add.
to add a dropdown just add a ul tag into an li tag.

Special thanks to
Helping Develop (click here)


  • Options

    Sample on a site I'm working on.. (with rtl tweaks) Click Here

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    great idea, there is a plugin that does something like that, it adds the dropdown to the menu http://vanillaforums.org/addon/index-plugin the benefit is that you can use it with any theme without the need to add code to the master. this plugin works by using css

    also there is http://vanillaforums.org/addon/categoriesdropdown-plugin if you want your categories in a dropdown on the menu, this plugin is a combination of javascript and css, the javascript to work the dropdown works on any links that the html represents a drop down

    for example:


    or php links for a default.master.php , constructed like this example where Menu is the parent link of the drop down .

    $this->Menu->AddLink('Menu', T('Menu'),'#');
    $this->Menu->AddLink('Menu', T('Dashboard'), '/dashboard/settings', array('Garden.Settings.Manage'));
    $this->Menu->AddLink('Menu', T('Edit Profile'),'/profile/edit',array('Garden.SignIn.Allow'),array('title'=>'Edit Your profile'));
    $this->Menu->AddLink('Menu', T('Home'),'/');
    $this->Menu->AddLink('Menu', T('Activity'), '/activity',array('Garden.SignIn.Allow'));
    $this->Menu->AddLink('Menu',T('New Discussion'), 'post/discussion',array('Garden.SignIn.Allow'));
Sign In or Register to comment.