Static header and menu bar

[h4mmy]

HI,

Is there a way to keep the header and the menu bar static so it doesn't scroll with the page?

[Stinky666]

Apr 16, 2013 13:46:59 GMT -8 h4mmy said:

HI,

Is there a way to keep the header and the menu bar static so it doesn't scroll with the page?

By header do you mean the Banner? And menu bar, do you mean the nav bar (as in, where it shows the buttons - Home, Search, Admin etc) ?
If so, for both go to admin > themes > advanced styles & css > header (top)

In the be sure to set your nav bar + banner to whatever you prefer.

[h4mmy]

Yes, sorry that is what I meant, banner and nav bar.

Been in there, but not exactly sure how I make it static. When I scroll the screen - I want the banner and the nav bar to stay where they are instead of scrolling with page

[Stinky666]

Apr 16, 2013 14:59:36 GMT -8 h4mmy said:

Yes, sorry that is what I meant, banner and nav bar.

Been in there, but not exactly sure how I make it static. When I scroll the screen - I want the banner and the nav bar to stay where they are instead of scrolling with page

In Advanced Styles & CSS > Header

For banner, I see no background attachment, to set it to either scroll or be fixed, but for the nav bar, it says "background attachment" then has the two options.

[h4mmy]

I tried them (fixed/no scroll or something like that) and they did nothing - except remove the bar in which the nav menu items appear so the menu items sat on a transparent background!!

[Brian]

h4mmy, correct me if I'm wrong, but are you looking for something similar to how the pagination bar works in this thread? Where it's on the top of the page at all times?

[h4mmy]

Yes Brian.....thankyou, that's what I mean

Guess, I'm not good at explaining things clearly

[Brian]

First you'll want to visit Structure > Layout Templates > Forum Wrapper.

Find the opening <header> tag and the closing </header> tag. Copy these tags and everything in between them, erase them, then paste them on the line above <div id="wrapper">. All you're essentially doing is moving that entire section of code before the wrapper div.

After that, all you have to do is paste this at the bottom of Themes > Advanced Styles & CSS > Style Sheet.

header { position: fixed; top: 0px; width: 100%; z-index: 2000; }
#wrapper { margin-top: 150px; }

Adjust the number in red until you're satisfied with the distance between the banner/menu area and the rest of the forum.

[h4mmy]

Brilliant.... off to do that now.

Many thanks Brian

[Brian]

Let me know how it goes.

[Sunny]

Can I just make the menu bar static? I didn't realize the process above was also for the banner and it kind of messed things up. I put it back but I would really like the idea of having a static menu bar.

[Brian]

Apr 17, 2013 10:55:12 GMT -8 Sunny said:

Can I just make the menu bar static? I didn't realize the process above was also for the banner and it kind of messed things up. I put it back but I would really like the idea of having a static menu bar.

Yep!

Follow the same steps in this thread, but instead of moving <header>, move <div id="navigation-menu"> and everything between it and its closing </div> above the <div id="wrapper"> element.

Then add this to the bottom of your style sheet.

#navigation-menu { position: fixed; top: 0px; z-index: 2000; width: 100%; }
#welcome { padding-right: 15px; }
#wrapper { margin-top: 40px; }
#navigation-menu div.tip-holder { top: 0px; right: -3px; }

[Sunny]

Perfect! Now if I ever want to a a border-bottom to the whole thing would that go with #navigation-menu { position: fixed; top: 0px; z-index: 2000; width: 100%; } like this? #navigation-menu { position: fixed; top: 0px; z-index: 2000; width: 100%; border-bottom: #ffffff solid 2px; }

[Sunny]

Apparently so! XD

Thanks again ^^

[Brian]

Sure thing, yo.