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]

May I ask why you want to disable it completely? I don't use myself and strongly dislike it but it's really useful to some people and disabling is kinda frowned upon to say the least.

If you need to adjust your layouts depending on whether it's there you can use:

.has-navstrip
.no-navstrip

There are body classes.

Just mentioning it in case you didn't know.

[carisma_sensei]

I didn't know, thank you! Because I didn't know, I thought the only way was to have it or disable it, I didn't know I could customize things in case it was used or not.

lol I looked really irritated by the navstrip and really extremist right? xD But I'm glad to know we can edit it like this.

My problem is that it pushes the navigation in my layouts and I never know how to fix that. Now I'll be able to push the whole thing down when seeing it with a navstrip on, thank you again!

[ninetydegrees]

Oh I understand. Coming from LJ, removing it from my layouts was my default mode too but DW has all these shiny classes which give layouts a lot more flexibility. *g* BTW, you might find this page and in particular the High level layout ids and classes article useful. CSS can be a little different in Transmo but it's mostly the same as described there really.

[carisma_sensei]

Yes! It's just so annoying in livejournal D: I once made an Opal layout and got so mad at the navstrip, because it just wouldn't.go.away. djfhdfg.

Thank you, I shall have these pages open the next time I make a layout, sometimes I struggle to find what I need to modify haha! Not anymore!

[carisma_sensei]

Just one more question, how would I do it to push the layout down the same amount of pixels as the height of the navstrip, with these classes?

[ninetydegrees]

I think it's set to be 45px high but I'm not sure.

[carisma_sensei]

And what should I write in the coding to push the body down? I'm quite lost @_@

[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!

[timeasmymeasure]

And this just answered a question I was having with a layout, so thank you!