Options to remove a gap

[Mixed]

Forum URL:  avatarascent.boards.net/

Hi again.

Now I'm not sure if this is a Template question or a Tech Support question but I'm feeling it's more the former than that latter.

Anyway, in fixing the Nav bar at the top so those links and buttons are accessible no matter how far you scroll down the page, I left a gap of 10px between the bar and the top of the window. This was done so that the notification bubbles that pop up on Profile, Messages, etc are fully visible rather than cutting off. However, it does not look so clean when the banner and boards can be seen scrolling passed it.

Therefore, I would like to some how remove or hide this gap.

The first option I thought would be to fill the gap space with a container or something that just has the background color so that it just looks like the forum boundary or something.

The second option I am considering is pushing the Nav bar to the very top again and then changing the bubbles so that they appear below rather than above.

Would either of these options be viable? I am open to other suggestions too.

Please and thank you!

Tagging Lynx since this is his forum too.

[Tumbleweed]

Nov 10, 2015 1:36:20 GMT -8 Mixed said:

Forum URL:  avatarascent.boards.net/

Hi again.
Now I'm not sure if this is a Template question or a Tech Support question but I'm feeling it's more the former than that latter.
Anyway, in fixing the Nav bar at the top so those links and buttons are accessible no matter how far you scroll down the page, I left a gap of 10px between the bar and the top of the window. This was done so that the notification bubbles that pop up on Profile, Messages, etc are fully visible rather than cutting off. However, it does not look so clean when the banner and boards can be seen scrolling passed it.

Therefore, I would like to some how remove or hide this gap.
The first option I thought would be to fill the gap space with a container or something that just has the background color so that it just looks like the forum boundary or something.
The second option I am considering is pushing the Nav bar to the very top again and then changing the bubbles so that they appear below rather than above.
Would either of these options be viable? I am open to other suggestions too.
Please and thank you!
Tagging Lynx since this is his forum too.

You know, you really wouldn't need to move your nav bar if you have the speech bubbles below if you make sure all the menu items that get a bubble are on the right. It looks fine overlapping the nav tree and doesn't interfere with the nav tree when using.

This is what I used to change my speech bubble so it is below: (use the bolded part to position if it is off a bit on your site and the red if you want to adjust the pointy thing but right now it is at the very edge of the left side. Going more left will mess it up as well as going up. Right is about your only option which would just be increasing the 4px to say 6px)

#navigation-menu div.tip-holder {
position: absolute;
top: 30px;
right:1px;
display: inline-block;
}
#navigation-menu div.tip-holder div.tip-number {
padding: 3px 7px 2px 7px;
background-color: #ffffff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font: 0.8em "Trebuchet MS",Verdana,Arial;
line-height: .8em;
text-shadow: none;
box-shadow: 2px 2px 2px #333333;
-moz-box-shadow: 2px 2px 2px #333333;
-webkit-box-shadow: 2px 2px 2px #333333;
height: .8em;
color: #000000;
}
#navigation-menu div.tip-holder span.tip {
border-top: 4px solid transparent;
border-left: 4px solid #ffffff;
border-right: 4px solid transparent;
position: absolute; top:-4px;
left:4px;
}

I think that might be your best option. Here's a screen cap of what it looks like:

[Mixed]

Nov 10, 2015 13:09:23 GMT -8 Tumbleweed said:

Nov 10, 2015 1:36:20 GMT -8 Mixed said:

Forum URL:  avatarascent.boards.net/

Hi again.
Now I'm not sure if this is a Template question or a Tech Support question but I'm feeling it's more the former than that latter.
Anyway, in fixing the Nav bar at the top so those links and buttons are accessible no matter how far you scroll down the page, I left a gap of 10px between the bar and the top of the window. This was done so that the notification bubbles that pop up on Profile, Messages, etc are fully visible rather than cutting off. However, it does not look so clean when the banner and boards can be seen scrolling passed it.

Therefore, I would like to some how remove or hide this gap.
The first option I thought would be to fill the gap space with a container or something that just has the background color so that it just looks like the forum boundary or something.
The second option I am considering is pushing the Nav bar to the very top again and then changing the bubbles so that they appear below rather than above.
Would either of these options be viable? I am open to other suggestions too.
Please and thank you!
Tagging Lynx since this is his forum too.

You know, you really wouldn't need to move your nav bar if you have the speech bubbles below if you make sure all the menu items that get a bubble are on the right. It looks fine overlapping the nav tree and doesn't interfere with the nav tree when using.

This is what I used to change my speech bubble so it is below: (use the bolded part to position if it is off a bit on your site and the red if you want to adjust the pointy thing but right now it is at the very edge of the left side. Going more left will mess it up as well as going up. Right is about your only option which would just be increasing the 4px to say 6px)

#navigation-menu div.tip-holder {
position: absolute;
top: 30px;
right:1px;
display: inline-block;
}
#navigation-menu div.tip-holder div.tip-number {
padding: 3px 7px 2px 7px;
background-color: #ffffff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font: 0.8em "Trebuchet MS",Verdana,Arial;
line-height: .8em;
text-shadow: none;
box-shadow: 2px 2px 2px #333333;
-moz-box-shadow: 2px 2px 2px #333333;
-webkit-box-shadow: 2px 2px 2px #333333;
height: .8em;
color: #000000;
}
#navigation-menu div.tip-holder span.tip {
border-top: 4px solid transparent;
border-left: 4px solid #ffffff;
border-right: 4px solid transparent;
position: absolute; top:-4px;
left:4px;
}

I think that might be your best option. Here's a screen cap of what it looks like:

Exactly! I was hoping this was a valid option. Thank you, Tumbleweed! Thank you again!

I need to go try this. I am supposing this is put in the Style Sheet. But what do you mean by "make sure all the menu items that get a bubble are on the right"? Do you mean the buttons have to be on the right of the Nav bar or that the bubbles need to be to the right of the respective button?

I'm going to go try this. Really wishing I hadn't been so busy today so I could have tried this earlier.


Edit: Worked like a charm. Thank you so much for making my second proposed option come to life.

[Tumbleweed]

Mixed,

I'm glad it worked out for you. What I meant by the right side thing was if the bubble to some of your menu links got in the way of the nav tree you could move them to the right so so all the bubbles would be far enough away from the nav tree so as not to cover anything. That's all.

[Mixed]

Ah! Now I get it. Thanks Tumbleweed.

And nope. The Nav bar isn't near the Nav tree so we're all good.