Locking The Header

Is there a way to lock the header at a fixed distance from the edge of a phpbb2 forum? I need a way to keep the logo and navigation bar at a certain distance from the left side of the page but without the forum body being affected.

Please post your forum's link.

SLGray wrote:Please post your forum's link.

There's really no point in asking since they refuse to give it every time.

Using margin, @Zeta, can force an element to remain a distance away from another element. Try this.

Code:

.headerbar {
  margin-left: 20px;
}

You can change the "20px" to whatever number you wish. The higher the value, the more distance there is between.

Draxion wrote:

SLGray wrote:Please post your forum's link.

There's really no point in asking since they refuse to give it every time.

Using margin, @Zeta, can force an element to remain a distance away from another element. Try this.

Code:

.headerbar {
  margin-left: 20px;
}

You can change the "20px" to whatever number you wish. The higher the value, the more distance there is between.

That doesn't seem to be doing anything at all. Nothing I try to apply to ".headerbar" seems to do anything. I've tried "position: absolute" on the logo itself with the distance from set from top and left but then the logo ends up overlapping the forum so that's not an option either. I can use "position: absolute" the same way for "td.bodyline" and that does lock the logo and navigation bar so it is an option at least, but that also affects the forum itself, which I would prefer to avoid. So I still need a better solution than just locking the whole thing.

Do you mean the header or just the banner/logo?

SLGray wrote:Do you mean the header or just the banner/logo?

I'd like to lock the entire header. The logo and the navigation bar and nothing below that.

@Zeta, if you want them to be visible at all times, you should try

Code: position: fixed;

as this will keep the headerbar always shown no matter the scrolling a user does. Otherwise, if it's only for changing the left and right margin you should try this:

Code:

table[width="100%"]:first-child, table:nth-child(2) {
  margin-right: 10px;
  margin-left: 10px;
}

To change your header and your navigation bar you have to change these two elements:

• Code: table[width="100%"]:first-child { ... }

  affects your header containing the logo and
  

• Code: table:nth-child(2) { ... }

  affects your navigation bar only

These codes are only codes for #phpbb2 forums.

Regards.

TheCrow wrote:@Zeta, if you want them to be visible at all times, you should try

Code: position: fixed;

as this will keep the headerbar always shown no matter the scrolling a user does. Otherwise, if it's only for changing the left and right margin you should try this:

Code:

table[width="100%"]:first-child, table:nth-child(2) {
  margin-right: 10px;
  margin-left: 10px;
}

To change your header and your navigation bar you have to change these two elements:

• Code: table[width="100%"]:first-child { ... }

  affects your header containing the logo and
  

• Code: table:nth-child(2) { ... }

  affects your navigation bar only

These codes are only codes for #phpbb2 forums.

Regards.

I don't want to logo and navigation bar constantly on screen and overlapping the forum while scrolling like it would with "position: fixed", so "position: absolute" is the one to go with between those two.
That code did a lot more than just move the header and navigation bar. It sent my forum all over the place. Literally. Everything moved and things were overlapping and the wrong width. Changing the px values just made it worse and by the time I got the logo where it needed the be the rest of the page was a complete mess. It was startling and a little unsettling.
I assume that's not supposed to happen?

This is the problem when we can't see your forum to work on the codes for you.

I know you will not give your address so i will not ask for it.

TheCrow wrote:@Zeta, if you want them to be visible at all times, you should try position: fixed; as this will keep the headerbar always shown no matter the scrolling a user does. Otherwise, if it's only for changing the left and right margin you should try this:

Code:

table[width="100%"]:first-child, table:nth-child(2) {
  margin-right: 10px;
  margin-left: 10px;
}

In my suggestion for your fix above I never said that

Code: position: absolute;

will fix your issue. The only thing I suggested is that if you want the logo and the navigation bar constantly on the screen to use

Code: position: fixed;

otherwise, only the code provided above without any positioning will work. If not try applying

Code: !important

to the end of each line as below:

Code: margin-left: 10px!important;

Regards.

TheCrow wrote:

TheCrow wrote:@Zeta, if you want them to be visible at all times, you should try position: fixed; as this will keep the headerbar always shown no matter the scrolling a user does. Otherwise, if it's only for changing the left and right margin you should try this:

Code:

table[width="100%"]:first-child, table:nth-child(2) {
  margin-right: 10px;
  margin-left: 10px;
}

In my suggestion for your fix above I never said that

Code: position: absolute;

will fix your issue. The only thing I suggested is that if you want the logo and the navigation bar constantly on the screen to use

Code: position: fixed;

otherwise, only the code provided above without any positioning will work. If not try applying

Code: !important

to the end of each line as below:

Code: margin-left: 10px!important;

Regards.

I never said that you said that

Code:

position: absolute

will fix the issue. I was trying to explain that

Code:

position: fixed

is not what I'm looking for and that

Code:

position: absolute

is closer to what I want.
I added the

Code:

!important

to the margin code and it is still turning my whole forum into a chaotic mess...

@Zeta, does your header only contain the logo or text also?

If it doesn't contain anything else other than your logo (banner), then you can try this:
Add this javascript:

Code:

$(function(){
  $('a.mainmenu').closest('table').addClass('change');
});

and then add this CSS:

Code:

table.change, #i_logo {
  margin-left: 10px;
  margin-right: 10px;
}

This should only change your logo and the navigation bar to your forum.

Regards.

TheCrow wrote:@Zeta, does your header only contain the logo or text also?

If it doesn't contain anything else other than your logo (banner), then you can try this:
Add this javascript:

Code:

$(function(){
  $('a.mainmenu').closest('table').addClass('change');
});

and then add this CSS:

Code:

table.change, #i_logo {
  margin-left: 10px;
  margin-right: 10px;
}

This should only change your logo and the navigation bar to your forum.

Regards.

The reason I'm asking about this is because without any coding the logo and navigation bar want to shift further to the right or left on certain pages,like moving too far to the right on the login page or a little to the left when viewing a thread. This code isn't stopping that from happening.

Is this an issue on all devices and browsers?

SLGray wrote:Is this an issue on all devices and browsers?

All of the ones I have, at least. I can't speak for ones I don't have.