how to 'lock' main menu bar?

Where should we look for likely 'errors' in our coding/settings?
This topic is posted for Joanna and Holly (me).

We are a Ning 2.0 to JamRoom site, in development, and our main menu bar 'floats' instead of being locked.

When we zoom in or out our menu bar moves up or down... and so our white text on dark header bar becomes white menu bar on white background (obviously not acceptable). And sometimes it overlays other navigation tabs, so it's really hard for us to work!

In case this isn't clear, try Ctrl+ a few times (PC) or enlarge (Mac device) and watch the "Products | Pricing |Support |Blog |Search (and so on) that you see above you.
When you enlarge far enough, the same thing happens here!

On this page, I can shrink several times and not have an issue, but on our site, if I shrink 2 or 3 times (on my PC laptop or my iMac desktop) or if I enlarge (which I do because I am 61 and my eyes dislike small font and I love enlarging my screen views! LOL).

Here on JamRoom, I have to zoom to 250% before it's an issue. [So I had not noticed this as an issue until now when I tested it... I usually view at 150%.]

But on our site, the challenge arrives much sooner!

Please offer suggestions on how we might 'lock' that main menu bar on the header OR how we might have it so that we have the same 250% margin that this forum has.

I hope you understand what I'm asking, or that Joanna can articulate it in a better way when she logs on from Poland in a few hours.

Any help appreciated. As always, Thank you.
updated by @holly-dilatush: 12/27/16 01:05:34PM

Think you're talking about the header section being positioned 'fixed' to the page on the Ningja skin.

The CSS that controls that is found in:
/skins/jrNingja/css/header.css

On line 1, it looks like this:

To make that purpley-blue section scroll the same as the rest of the page change that to:


and change the spacer to have 0 too in the same file:

Probably best to clone your skin first though to save it getting over-written with skin updates.

Or you might be talking about the fixed height, in which case go to:
site.com/core/skin_admin/style/skin=jrNingja/file=header.css/section=advanced

and change the #header : height from 75px to 'auto'.

Hi Michael
In smaller devices the problem is that the tabs from the top 'menu' go down below our blueish header. When members will go for example to our Forum, tabs from header and tabs from Forum will be on each other. It's difficult to get the correct tab.
When I changed site.com/core/skin_admin/style/skin=jrNingja/file=header.css/section=advanced to "auto" then our blueish header went down. I see tabs from Menu, but I don's see tabs from Forum. And in many places, things which are at the top of a page will be hidden.
It's not a problem when your screen is quite big. But as you know, many people work on tablets, smartphones, and for them, it might be a challenge.

Is it a way to put all tabs from the header/menu in two lines but still at the header, not below it. If this is a code you added in the first part of your response, I'll try to do it soon and check.

Thanks for your help.

This is something that could be quite difficult to get right. Your talking about having a fixed header, but don't want to specify a height. If you decide on a height, then you can make the #wrapper element that same height from the top of the page so it starts where the top header finishes.

We're also not talking about the standard layout, we're talking about how a browser deals with increasing the size from the size decided by the skin designer, so that introduces a different element.

It would take a bit of playing around with Firebug and testing things to come up with a solution that works.

Thank you @Michael

I think that for a while the easiest solution will be to make a specific height of our header, and move top of the page.
Some members will see bigger header, but others will have a chance to get to needed tabs without problems.

Just want to mention: Some of my members used to complain of overlapping menus on their ipads, but they discovered if they simply witched orientation (vertical to horizontal or vice versa) the problems mostly were corrected. Maybe not a great solution, but it's something simple that many members wouldn't think of when using their tablets.
I also increased the height of my header colored banner, to accommodate things just a little.
Other things that helped this for me: not using any capital letters in the menu item names. And shortening the link text- for example changing "My Latest Forum Posts" to "my latest posts". Another thing to consider: perhaps not having main top menu links for 'everything'. For example, having just a top link for Forums...and when you click to it, there's a TAB there for your latest forum posts. OR, have the top link be just to Forums, but include a drop down sub menu that includes 'my latest forum posts'.
My own take- your top level menu links look quite cluttered and wordy, so it's wrapping a whole lot- think of ways to streamline that menu and it won't wrap so much.


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

Strumellia brings up a great point, If you make some of the menu items nested so they only show when you hover over the main item, that would give you more space, so the menu would need to be HUGE for it to be pushed down.

The other option is putting a background color behind the menu so even if it is pushed down, its still the same color:
CSS: