Removing navigation strip with CSS

[carisma_sensei]

I want to disable it through CSS in my layouts (mainly transmogrified), would anyone happen to know what is the code I would need to apply, and be so kind to let me know? I don't know what controls the navstrip so I can't do that myself. So thank you in advance!

Comments

[ninetydegrees]

Well, it depends on your layout and how you coded it. Do you have an example? Besides, the padding for the nav strip should already be there. It's included in a CSS file you can't modify.

[carisma_sensei]

The layout is the one I'm currently using. A user pointed out that the navstrip pushes the navigation down, and I would like to fix that by adding a margin top to the whole... body? Or, if there is another and better way to fix this, I would also like to know ^^'' (I'm no expert so, I really don't know but it's about time I learn).

[ninetydegrees]

Ok then maybe something like:

body.has-navstrip {
margin-top: 6%;
}

[carisma_sensei]

AHHH so that's how you do it :B! Thank you!

[facetofcathy]

Actually I think the existing margin-top at 8% is the problem not the navstrip. The navstrip is positioned absolutely, it's not moving anything anywhere.

I tried out your layout and what moves the navigation module down is having a wide screen. Margins in % are based on the width of the containing block, so, the wider the screen, the bigger that margin is. It looks okay at about 1200 px wide with or without navstrip. Anything bigger and the navigation module is lower than the image.

Instead, why not get rid of the margin-top on body, and put the margin-top on the actual .module-navlinks (in pixels) to the right amount to set it where you want it. This will work for a fairly big range of font sizes, like it does now.

[carisma_sensei]

Argh, thanks for pointing that out! So would I have to get rid of the has navstrip margin and the body margin? I'll go try that now!

[carisma_sensei]

I tried giving the content a margin-top and the module-navlinks, but when the navstrip isn't on, everything goes up, and I don't know what to do anymore xD You can see what I mean in my journal right now, where the content overlaps the background and the navigation is also pushed up.

[facetofcathy]

Alrighty! I have some answers. I turned off my navstrip and had a look at your journal. You are right, the navstip is causing a problem, and so am I the % margin is causing a similar problem!

So, what happens is that there is a padding-top on body of 45px that is only there when the navstrip is there. This is on the base Dreamwidth stylesheet that is not part of the layout or theme.

I would suggest you go back to your way of putting a margin on the body element since you know that works and just don't use a %. You can either do one for with navstrip and one without just like the suggestion above, or just set a padding-top of 45px that's there all the time and set one margin that works.

[carisma_sensei]

Ok I think I fixed it for good now! Only problem is that when the navstrip is on, the navigation stretches and fills the screen's width D: But I don't know how to fix that. Anyway, what I finally did was:

-Set the body margin-top to 80px instead of 8%.
-Add the body.has-navstrip margin-top: 45px to the CSS so when the navstrip is on, the navigation won't shift down.

And I think that's fixed it. If you could look at my source code and try it yourself (only if it's NOT a lot of hassle, I don't want you to waste your time with this honestly D:)...

Thank you so much for the help!