Navigation Bar Inside Banner

[Riley ♛]

Forum URL: sunstaystiltomorrow.boards.net/

This post has been resolved!

Hello! I'd like some quick help. I'm trying (failing) to move my navigation bar, with transparent background, into the banner itself. I would like the navigation links to appear in the bottom-right of the banner; I'll do with the styling at a later point, but I'm trying to build the foundation of the forum prior to doing any decorating. If there is any specific code required for this, or I'm simply placing it in incorrect places, any help would be greatly appreciated.

The navigation bar is currently directly beneath the banner; I know what I'm trying for is possible as I've seen it on a role-play forum before. The screenshot below shows what I'd like to do to this forum.

[Bob]

Apr 25, 2019 10:51:56 GMT -8 Riley ♛ said:

Forum URL: sunstaystiltomorrow.boards.net/

Hello! I'd like some quick help. I'm trying (failing) to move my navigation bar, with transparent background, into the banner itself. I would like the navigation links to appear in the bottom-right of the banner; I'll do with the styling at a later point, but I'm trying to build the foundation of the forum prior to doing any decorating. If there is any specific code required for this, or I'm simply placing it in incorrect places, any help would be greatly appreciated.

The navigation bar is currently directly beneath the banner; I know what I'm trying for is possible as I've seen it on a role-play forum before. The screenshot below shows what I'd like to do to this forum.

We can accomplish this with a little CSS, without restructuring any of your HTML. This is especially possible as your layout is fixed, and thus the positions of various elements is fairly consistent.

There are two elements of interest here:

1. Navigation Menu - this needs to come up
2. Welcome Menu - this also needs to come up

The CSS we're going to use is:
#navigation-menu {
text-align: left;
position: absolute;
bottom: 0px;
}

#welcome {
position: absolute;
right: 0;
bottom: -25px;
}

The first selector is for the menu itself. We're doing three things: aligning left, setting its position to absolute, and then telling it to rest at the bottom of its parent. By setting this element to be an absolutely positions we also remove it from the document flow, allowing content beneath it to rise up.

The next selector is your welcome bar, which contains the login and register links. Similar method here- by absolutely positioning it, it anchors, initially, to the nearest ancestor that is positioned (your header). We then right align it, by setting its right style to 0, and then pull it beneath your header a little with the bottom style. A negative value here, will pull it down.

Your navigation tree should naturally grow to 100% width once this is done. That's because these elements have been pulled from the document flow, and it effectively acts as though they were never there to begin with.

You can make adjustments to the final resting places by adjusting the bottom/right values. Giving either a positive bottom value will cause the element to rise; negative will push it down. And giving the right style a positive value will pull it left, while negative will push it right.

Your stylesheet already has rules in place for both of these selectors. If you're comfortable with it, you can merge these in. Otherwise, place this towards the bottom of your CSS, so as to not have these rules overwritten.

[Riley ♛]

Bob Thank you very much for your help! I haven't played with absolute elements often so it hadn't even crossed to mind to try that. Your CSS did exactly what I wanted for the forum. This post is solved.