Moving the navigation links below the header.

[nimueth]

Hello comm, I need your help!

Last night, as I was testing new styles, I made a rookie mistake and messed up my CSS so bad that it was easier to delete everything and start from scratch. I'm using Dusty Foot, but in the past, thanks to this community, I managed to make it look virtually identical to the Mixit based layout I was using on LJ for years.

I checked those entries again, and while I managed to fix most things, for this particular issue nothing seems to work this time.

This is what my header looks like right now with the navigation links.

This is what I'm trying to achieve.

Also, I managed to "detach" the header from the navbar with this code:

#canvas {
margin-top: 20px;
};

but I can't figure out how to do the same for the bottom of the canvas.

And lastly, how do I go about adding a 1px border around the entire canvas, like in that second screencap?

Comments

[momijizukamori]

I actually just wrote something for Tectonic that does more or less the same thing you want to do with the header:

#header {
position: relative;
}

#header .inner {
position: absolute;
width: 100%;
bottom: 0;
}

For the margin, margin-bottom: 20px seems like it might work? You may have to add !important. And you can just add a 1px border to that.


#canvas {
margin-top: 20px;
margin-bottom: 20px;
border: 1px solid #bbb;
};


[nimueth]

That second code worked like a charm, thank you!

The first code sort of worked, but it's obscuring part of the header. What value should I play with to bring it further down?

How do I go about centering the navigation links (as well as making them all lowercase and bold)?

[momijizukamori]

You have to make the header height taller - and you may want to attach the background image to the top center rather than the center - both of those are settings in the wizard, if you added the header that way.

header .module-navlinks .module-content {

text-align: center;
text-transform: lowercase;
font-weight: bold;

}

should do the tricker for that bit.

[nimueth]

Oooh right, I suddenly remember! I has to be 40px taller than the header, because that's the size of the strip with the navigation links. *slaps forehead* I'm way too rusty at this.

That second one worked as well, thank you very much for your time and patience!

[momijizukamori]

No problem! Honestly CSS is a nice change of pace from wrangling Java and Python for my day job :)

[nimueth]

In that case, I hope you don't mind if I shoot one last question at you! I didn't mention it in the post because people have asked about it before, so I thought I could solve it by following one of those threads.

How do I get rid of the "Tags" link in the navigation bar? Merely removing the text isn't a solution because it leaves a wider gap and I don't like that.

As suggested here, I tried this code:

.module-navlinks .module-list-item:nth-child(4) {display: none;}

but I replaced 4 with 5, since tag is fifth in the module list, but it did nothing.

[momijizukamori]

It actually did do something - it's hiding the memories link instead. Because you don't have a paid account, you don't have the Network nav item, so Tags is the 4th one!

[nimueth]

I deleted the code after I saw that it wasn't hiding anything, so when you looked it wasn't there. Memories would be "log files" and it's there. But I tried it again, this time with 4- still nothing.

[momijizukamori]

Hmm, it was hiding at least one element from me, but I'd have to double-check.

[nimueth]

Do you mean on your own layout when you tried it, or mine? If you mean mine that's weird, because I could see all of them.

I tried this today:

#header .tags {
display: none;
}

which worked, but there's a wide gap (looks the same as it does when i simply remove the text from the wizard).

Should I make a new entry, so maybe others can help too? I really don't want to keep bothering you about this, but I don't know if two entries in a row would be considered spamming. ^^;

[momijizukamori]

On yours, which yeah, weird. The reason the .tags/blank text thing doesn't work is that the parent list item is still there, and that's what got all the styling on it. Unfortunately CSS doesn't have a good way to select a parent by a given child, which is why targetting this is so hard. Firefox claims the CSS selector is div.module-content:nth-child(1) > ul:nth-child(1) > li:nth-child(4) though I think if you had more tags or links that code would probably select them too.

[momijizukamori]

also oops, I forgot that # is the header syntax for markdown and it autoformatted, lol. Sorry about that.