News:

SMF 2.1.2 has been released! Take it for a spin! Read more.

Main Menu

[SMF Trick] Displaying a Statically Positioned Nav Bar

Started by ascaland, April 17, 2011, 03:56:05 PM

Previous topic - Next topic

ascaland

Im sure this has been posted before, but I thought I would post another version for SMF 2.0.

This SMF trick is relatively easy and just requires some CSS and index template changes. You will also need to download the tiny image file at the bottom of this tutorial if you choose to use a theme that matches the default (Core theme).

First off, in your theme's css directory, look for the index.css file. We need to make a quick edit to the forum wrapper so we can move everything down slightly. Search for,
/* This division wraps the entire forum when a forum width is set. */
div#wrapper


And within the curly braces add,
padding-top: 75px;

Next we are going to replace the CSS id of the menu bar, search for,
#main_menu

And replace that entire CSS id with,
#main_menu
{
position: fixed;
top: -5px;
padding: 0 0.5em;
/* Create z-index so this menu is above all (or most) other content */
z-index: 5;
background: url(../images/theme/nav_bottom_block.png) #fefefe repeat-x;
height: 30px;
width: 100%;
padding-top: 25px;
margin: 0 auto;
}


This will define our display properties.
Next, in your theme's index.template.php file, find,
// Show the menu here, according to the menu sub template.
template_menu();


And next we need to move that to the top of the function so the menu isnt stuck within the wrapper's width properties. Move it to below this line,
global $context, $settings, $options, $scripturl, $txt, $modSettings;

Therefore it should look something like,
function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

// Show the menu here, according to the menu sub template.
template_menu();


And finally, download the attatched image (nav_bottom_block.png) and upload it to your theme's images/theme directory.

What it looks like (ignore search bar):
http://img40.imageshack.us/i/unlfgdfgded.png/


Ercan.G


ascaland

Better? Remember to ignore the search bar, I just added that myself.


Robert.

Nice trick Anthony :) Any plans for packaging it to a mod?

ascaland

Quote from: [TheDj] on May 22, 2011, 02:45:16 AM
Nice trick Anthony :) Any plans for packaging it to a mod?

I did earlier, but if you want to package it as a mod go ahead. :)

6Scylla

Does anyone know how to move the links to the right? Instead of the Left?

The Craw

Very nice. I imagine this will come in handy for quite a few people. :D One suggestion though. If it were me, I'd have used margin instead of padding in the #wrapper rules. Not that it particularly matters.


margin: 75px auto 0 auto;


Quote from: 6Scylla on June 07, 2012, 09:34:05 AM
Does anyone know how to move the links to the right? Instead of the Left?

Yes, you can float the list items to the right instead of the left by finding this code:


.dropmenu li
{
float: left;


And replacing it with this:

.dropmenu li
{
float: right;



6Scylla

Does anyone know how I can add a image to the nav bar that redirects to another page?

Advertisement: