style_system | Entries tagged with navigation strip

Hiya! I'm a CSS noob and most of what I've learned thus far is trial and error attempts at implementing suggestions for custom CSS that I've seen in this community.

I'm playing around with Fluid Measure on my journal and have a couple of questions. Thank you for any help you can give!:

1) Is it possible to put the Navigation module in a header? Or do I need to pick a different style to do that? That's a dealbreaker for me.

(ETA: fixed! thanks to althea_valara) 2) The space (container? IDEK) around the modules is showing black on my desktop (but not on mobile). I can't figure out where to change that.

Tags:

the_wildlings

hello kind code-mages,

we are using the dark forest style for transmogrified. we have 2 questions.

1) is it possible to make the navigation strip display in custom colours, on a style where that is not an option on the customisation page (such as our current one)? both of the default colour gradients hurt our eyes.

2) is there a way to customise the colours of the text input box & dropdown menu box in the navigation strip (for the sitewide search function)? despite our accessibility settings, they are defaulting to a glaring white background with black text, which is painful for us.

we read through the ~color, page:navigation & navigation strip tags, and did not find these answers. could any generous wizards help us?

thankyou very much in advance.

Tags:

lynnenne

I have 7 menu items displayed in my "Navigation" menu but I only want the following 4:

My journal's home page (user.dreamwidth.org)
Archive
Reading page
Profile

The menu items I want to remove are Network, Tags and Memories. Is there a way to do this without hiding the whole Nav menu?

(Ideally, I would also like to hide the "Navigation" heading at the top of the menu, or at least change the text to something else.)

Thank you!

Tags:

nimueth

I'm using Dusty Foot theme and I noticed that the navigation strip gets cut at the page border (which I've left transparent). This is the first time in over a year that I visit DW from a PC, but I've had this theme for ages and I'm pretty sure the navbar used to stretch out on the entire screen. I would like to restore that look, if it's at all possible. Thanks!

Tags:

navigation strip

nimueth

I prefer smaller fonts to DW's defalt, but everytime I decrease the page size in the editor, the navigation strip becomes uncomfortable to read.

Is there a way to fix the navstrip's size with CSS, so that it remains unaffected?

Tags:

navigation strip

ari_linn

Hello people, I'm in the process of migrating to dreamwidth from livejournal and want to make my new blog look like the old one (I use Smooth Sailing theme with custom CSS there and have never waded into "creating new layers", "advanced customization" or whatever you call it). Can someone point me to a DW theme that has these two things:

1) a decent header with Title, Subtitle, Navigation bar and Current page title. I saw many themes with this kind of header but they all seem to have Navbar under Current page title. Are there any themes where Navbar is shown at the top of Current page title?
2) an ability to create multiple custom menu blocks (title + static html content, no more) without having to mess with advanced customization. I want to have a counter and an informer in my blog and don't want to place them in a sticky post or something.

If someone knows such theme please tell me its name. I know it's just waiting for me to use it on my journal.

Tags:

musyc

ANSWERED: Known bug, cannot be fixed without overrides/layer edits.

I was testing out layouts/themes earlier, and on several, the navstrip was coded to match the theme. This is not a choice I like, but different strokes. I figured I could just reset the strip to default.

However, when I attempted to change the setting in Customize -> Display, it didn't work. I changed the radio button to the light grey gradient, saved changes, and no change happened. Same when I switched back to the dark grey gradient. It's still showing as the theme colors. (I'm currently using Bolt for Corinthian on my testing journal, but it's happened on every theme I tried that had pre-selected custom navstrip colors.)

There's this line on the page - You can customize the color of the navigation strip on your journal. - but there is no option to stop the customized colors if they're embedded into the theme. At least, not one that I can locate.

Is this a bug or a feature? How can I tell the site to stop showing customized navstrip colors on the theme I choose? I only want the default dark grey navstrip, no matter what layout/theme I select.

Tags:

kvancelot

o/

So, I don't do a lot of layout coding, but I can generally work my way through the majority of issues. Unfortunately, I've hit a wall and I just can't seem to work out the fix.

My layout journal where I'm working on this is

wedidntstartthefire and the issue is all around the navigation footer, save for the entry footer issues. You can see what I'm referring to here.

1.) SOLVED! Navigation footer area thing coded with a background image. For the most part, it's worked out splendidly. Unfortunately, there's a one pixel area on the very bottom where the entries peek through when scrolling.

2.) SOLVED! Navigation links. D: No matter what I try, I can seem to get them to move down. I'd like for them to line up with the bottom of 0615 on the image. Also to be black. For the life of me, I can't seem to make this happen.

3.) SOLVED! Entry links, for editing and stuff. I'd like them to be centered compared to the rest of the centered elements in the navigation footer.

Here's the (horribly botched, piecemeal) code:

body {padding: 0; margin: 0; text-align: center; color: #000000; background: #000000; background-attachment:fixed; font-family:Courier New; overflow-x:hidden; overflow-y:auto; } a, a:active {text-decoration: none; color: #a8c048; outline:0; font-weight:bold;} a:hover {color: #a8c048;} #title,#subtitle,#pagetitle {display: none;} #canvas {margin: 10px auto 3em auto; text-align: left; padding: 0;} #content {padding: 0 0 20px 0; margin: 0;} #primary {width: 663px; margin: 0; z-index: 0; padding: 0; background-color:transparent; background:url(http://i.imgur.com/6j1j2.png) } /*--- header + footer ---*/ #header {width: 663px; height: 224px; margin: 1em auto 0em auto; background-color:transparent; background:url(http://i.imgur.com/chASH.png)} #header>.inner {border-left: 0px solid #0d0b16; padding: 2em 0em;} #footer {display: float; clear: both; margin: 0 auto 0 auto; width: 90%;} .navigation {padding: 0px; text-align: center; color:#278faf; margin-bottom:20px;} .topnav {display:none!important;} li.page-back, li.page-forward, .page-top {list-style: none; padding: 0.1em; margin: 0 0 0 0; background: transparent; bottom: 3.5em; text-transform:uppercase; font-size: 0.665em; font-weight: bold; text-decoration:underline;} .page-top {position:fixed; right:46.5%;z-index: 5; display: none;} li.page-back {position: fixed; left: 0em; text-align:left; padding-left:5.25%; z-index: 5;} li.page-forward { position: fixed; right: 0em; text-align: right; padding-right:5.25%; z-index: 5;} li.page-separator {display: none;} div.navigation ul {display: inline; padding: 0; margin: 0 0 0 0; align: center;} /*--- header texts ---*/ div#header h1#title {font-weight: normal; text-transform: uppercase; letter-spacing: 0; padding: 0; margin: 0; color: #278faf; font-family: monospace; font-size: 0em;} div#header h2#subtitle {font-weight: normal; text-transform: lowercase; letter-spacing: 1px; padding: 0; margin: 0; color: #278faf; font-family: monospace; font-size: 0em;} div#header h2#pagetitle {font-weight: normal; text-transform: uppercase; letter-spacing: 1px; padding: 0; margin: 1em 0 0 0; color: #278faf; font-family: monospace; font-size: 0em;} /*--- navigation links ---*/ div.module-navlinks {position: fixed; bottom: 0; z-index: 4; padding-bottom: 0em; width: 663px; height: 88px; margin: 0 auto; left: 0; right: 0; background-color: transparent; background:url(http://i.imgur.com/0URFm.png); background-repeat:no-repeat; text-align:center; padding-top: 0em;} div.module-navlinks ul.module-list {display: inline; padding: 0; margin: 0 0 0 0; text-transform: lowercase; color:#000000!important; padding-right; 13px; padding-left: 13px;} div.module-navlinks ul.module-list li {display: inline; margin: 0 0 0 0; list-style: none; padding-right; 13px; padding-left: 13px; font-size: 0.665em; } /*--- modules ---*/ #secondary {width: 663px; margin: 0 auto; z-index: 0; padding: 0; background-color: #ffffff; display:none;} #secondary>.inner {border-left: none; padding: 4em 2em; display:none} #secondary .module {float: left; margin: 2em 1em;} #secondary .module-header, #secondary .module-header a {font-family: arial!important;color: #099aaf;} #secondary .separator-after {clear: both;} .module-tags_cloud {margin: 3em 0; width: 100%; float: none;} .module-tags_cloud .module-content {padding: 0 3em 1em 3em;} #secondary .module-content {text-align: left;} #secondary .module-content ul { list-style: outside; margin-left: 1em; padding-left: 0;} #secondary .module-content li {margin: .5em 0;} .module-photo .module-content {text-align: center;} .module-user-links .module-content {text-align: center;} ul.userlite-interaction-links {list-style: none; margin-left: 0; padding-left: 0;} ul.userlite-interaction-links li {display: inline; padding: 0 .20em;} .module-credit {font-family:arial!important;} .module-credit dt, .module-credit dd {display: inline; margin: 0; padding: 0;} .module-credit dt {font-weight: normal; margin-right: 0.5em;} /*--- entry ---*/ div.entry {padding-top: 5px; padding-left: 45px; padding-right: 25px; padding-bottom: 0px; margin: 0px 0 10px 0; border-left: 0px solid #F2EBD7; background-color:transparent;} div.entry-content {margin: 40px 0 0 0;padding-bottom: 5px; background-color: transparent; font-size: 0.82em; color:#000000;} .page-recent div.entry-content {margin: 25px 10px 0 0;} .entry-content img {max-width:90%;} .entry a:visited {color: #1a6884;} .entry a:hover, a:visited a:hover {color: #000000;} .entry a:active, a {color: #278faf;} div.header {background-color: transparent; padding: 0; margin: 10px 0px 10px auto; } h3.entry-title {border:.1em solid #000000; height: 20px; color: #000000; font-weight: normal; text-transform: none; letter-spacing: -1; padding-left: 5px; margin: 5px auto 10px auto; font-family:monospace; font-size: 1em; color: #000000; background-color: transparent; background:url(http://i.imgur.com/E40QE.png)} h3.entry-title a {color: #000000!important; background-color: transparent;font-family:verdana!important; font-weight: bold!important; text-transform: uppercase!important;} div.metatype {margin: 5px 0 20px 0; vertical-align:middle;} .datetime {font-size: 0.7em; font-weight: bold !important; text-transform: lowercase; letter-spacing: 1px; margin: 5px 0 20px 2px; color: #2d2925;background-color: transparent; vertical-align:middle;} .datetime a {color: #2d2925; background-color: transparent;} .entry .userpic {display: block; float: right; margin: -60px 0px 10px 10px; vertical-align:top; padding: 0;} .userpic img { max-width:100px;height: 100px; padding: 0; border: none;} .page-recent .entry .userpic {display: block; float: right; margin: -100px 0px 10px 10px; vertical-align:top; padding: 0;} .page-recent .entry .userpic img {max-width:80px; height:80px; } span.poster {font-size: 0.9em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; color: #2d2925; background-color: transparent; color: #aeaeae;} div.metadata {margin: .8em 0 0 0; background-color: transparent;} div.metadata ul {padding: 0; margin: 0;} div.metadata ul li {list-style: none; font-size: 0.7em; font-weight: bold!important; font-family:verdana!important; text-transform: uppercase; letter-spacing: 0; padding: 0; color: #2d2925;} span.metadata-label-location, span.metadata-label-mood {} span.metadata-label-music {display: none;} span.metadata-item-location {padding: 0; font-weight: normal!important; font-family:courier!important; text-transform: lowercase!important;} span.metadata-item-mood {padding: 0; font-weight: normal!important; font-family:courier!important; text-transform: lowercase!important;} span.metadata-item-music {padding: 0; font-weight: normal!important; font-family:courier!important; text-transform: lowercase!important; display: none;} span.tag-text {text-transform: lowercase; color: #2d2925; font-size:.7em;} div.tag ul {padding: 0; margin: 0; display: inline; background-color: transparent;} div.tag ul li {display: inline; list-style: none; font-size: 0.7em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; padding: 0; color: #c8c8c8;} ul.entry-management-links {text-align:center; padding-top: 0; padding-left: 0px!important; margin: .7em 0 0 0;} ul.entry-management-links li {display: inline; list-style: none; font-size: 0.7em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; padding: 0 0 0 0; color: #c8c8c8;} ul.entry-interaction-links {text-align: center;background-color: transparent;} ul.entry-interaction-links li {display: inline; list-style: none; font-size: 0.75em; font-weight: normal; text-transform: uppercase; letter-spacing: 0; color: #0D0B16; text-align: center; padding-right: 15px;} .entry-interaction-links a {padding-right: 15px;} .entry-content li, .comment-content li { list-style-position: inside; } /*--- comments ---*/ hr.above-entry-interaction-links, hr.below-reply-container {display: none;} input, textarea {background: #ffffff; margin-left: 2px; margin-right: 2px;border: 1px solid #aaaaaa; } textarea.textbox {width: 100% !important; border: 1px solid #aaaaaa; } .textbox {width: 100% !important; border: 1px solid #aaaaaa; } .comment {margin: 0 auto 0.1em auto; background: #ffffff; padding: 10px 20px 10px 20px; border-top: 0px solid #1a6884; font-size: 0.8em;} .comment-content img {max-width:90%;} .comment a:visited {color: #1a6884;} .comment a:hover, a:visited a:hover {color: #a8c048;} .comment a:active, a {color: #278faf;} .comment .userpic {display: block; float: right; margin: -36px 0px 10px 10px; vertical-align:top; padding: 0;} .comment .userpic img {max-width:80px; height:80px;} .comment .datetime {background-color:transparent;text-transform:lowercase; font-size: .7em;} .comment .poster {background-color:transparent;text-transform:lowercase; font-size: 1em; color: #aeaeae;} .comment .poster-ip {background-color:transparent;text-transform:lowercase; font-size: .625em; color: #aeaeae;} .comment-content {padding-top:25px;padding-bottom:15px; } .bottomcomment {display:none; margin: 0 auto 2em auto; padding: 0 2em 0 2em; border-left: 0px solid #0d0b16; background-color: #ffffff;} .comment-management-links, .comment-interaction-links {margin-top: 5px; padding-right: 15px;} .comment-management-links {text-align:right; padding-right: 15px;} .comment-interaction-links a {padding-right: 15px;} .comment-interaction-links {text-align:right; } .comment-management-links li, .comment-interaction-links li {display: inline; padding-right:15px;} .multiform-checkbox {display:none;padding-top:20px!important;text-align:right!important;} #qrform table {text-align: center;border: 0!important;} /*--- archive ---*/ li.active {list-style: none; display: inline; text-transform: uppercase; padding: 0; margin: 0; text-align: center; color: #278faf;} .month {margin: 1em auto 1em auto; padding: 2em 2em; background-color: #ffffff;} .month h3 {font-size: 1em; font-weight: normal; text-transform: none; letter-spacing: 1px; padding-right: 50px; margin: 0; text-align: right; color: #a8c048;} .page-archive div.navigation ul {display: inline; } .page-archive div.navigation li {display: inline; list-style: none; } .page-month div.navigation ul {display: inline; } .page-month div.navigation li {display: inline; list-style: none; } .page-archive div.navigation {background-color: #ffffff; padding: 20px 10px 20px 10px;} .page-month div.navigation {background-color: #ffffff; padding: 20px 10px 20px 10px;} .month th {font-size: 0.9em; font-weight: normal; text-transform: uppercase; padding: 5px; text-align: center; color: #a8c048; border: 1px solid #2d2925; background-color: #0d0b16; border: } .month table {width: auto; cellspacing: 0; margin: auto; } .month caption {display: none;} .month dt {font-weight: bold; width:300px; margin-bottom:15px; margin-left:30px;} .month dt a {font-weight:bold;} .month dd h3 {text-align:left;} .month dd .tag {display:none;} td.day-empty {border: 1px solid #2d2925;} td.day {height:50px;width:50px;padding: 0; spacing: 0; border: 1px solid #2d2925; background-color: transparent; vertical-align:top; text-align:center; font-weight:bold; font-family:arial; padding-top:5px;} .month .footer {text-align:center;} .day day-has-entries a {text-align:center;} /*--- tags ---*/ .tags-container h2 {font-size: 1.3em; font-weight: normal; text-transform: none; letter-spacing: 1px; padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; margin: 0; text-align: left; color: #1a6884;} .page-tags .tags-container {margin: 0; padding-left:40px; border-lbottom: 1px solid #000000; background-color: transparent; font-size: .82em; font-weight: normal; text-transform: lowercase; letter-spacing: 1px; padding-top: 5px; padding-left: 20px; padding-right: 20px; padding-bottom:10px; margin: 0; text-align: left; color: #0D0B16;}} .tags-container {line-height: 100%;margin-bottom: 2px;} .tags-container .manage-tags-link {margin-left: 20px; margin-bottom: 15px; padding-bottom: 25px; text-transform:none; font-weight:bold; font-size:1em;} .page-tags .tags-container ul {margin: .75em; padding: 0;} .page-tags .tags-container ul li {margin: 0 0 0 1em; padding: 0; list-style: none;} /*--- control strip ---*/ #lj_controlstrip {background:#0d0b16; color:#278FAF; } #lj_controlstrip_statustext {color:#278faf; font-weight:normal;} #lj_controlstrip a {color:#a8c048;} #lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_login td, #lj_controlstrip td td {border:none !important;} #lj_controlstrip input {background:#278faf !important;color:#ffffff !important; border:none;} #lj_controlstrip_search_submit, input#Logout, #lj_controlstrip input#search {background:#278faf !important;color:#ffffff !important; border: none;} #lj_controlstrip .ljuser a b {color:#278fsf;; text-decoration:none !important;} #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password {background: #278faf; color:#ffffff;} #lj_controlstrip input#xc_remember, #lj_controlstrip_search_input_text, #lj_controlstrip select {background:#2d2925; color:#ffffff; border:none;} /*---misc--*/ .empty-day {width: 15px!important; padding: 2px; text-align:center!important;} .entry-day {width: 15px!important; padding: 2px; text-align:center!important;} .module-calendar {font-family: arial!important;} .module-calendar th {width: 15px!important; padding: 2px; text-align:center!important;} .module-calendar td a {color: #333333;text-align:center!important;} .entry-permalink {display:none!important;} #postform {padding: 20px;margin-bottom: 20px;text-align: center;} .talkform {width: 90%!important;} #qrformdiv {border-top: 1px solid #eeeeee; padding: 15px;} .talkform td {text-align:left;} div.ContextualPopup div.Inner {background:transparent!important;color: #333029 !important;border:none;padding:10px;width: 245px;font-family:"arial", sans-serif;font-size: 8pt;} div.ContextualPopup .Content {padding:12px 15px;margin-right:80px;line-height: 1.4;background-color: #fff;} div.ContextualPopup .Userpic {padding:10px;margin:0px;background-color: #fff;} div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {text-decoration: none !important;font-weight: normal; font-family: arial;color: #777 !important;text-transform: uppercase;} div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:hover {text-decoration: none !important;font-weight: normal;color: #0085d2 !important;} div.ContextualPopup .Relation {letter-spacing:0px;border-bottom: 3px solid #000;margin-bottom:4px;padding-bottom:4px;} .manage-tags-link {margin-top: 20px;} .module-customtext .module-content {padding-left:30px;}

Any help would be greatly, greatly appreciated!

Current Mood: thankful

Tags:

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!

Tags:

twtd

I'm using blanket and I was wondering if there was a way to add the expand all cuts module to my navigation bar where it would be far more useful. I don't even have the first idea about where I would start to get it there. Thanks in advance.

Tags:

somnolentblue

I'm using Practicality for a comm I created,

fannish_library_fest, and I'd like the navbar to be the site default of light or dark grey instead of matching the comm's colors. I found the code related to the navbar (I think), but I don't know what I need to do to change it back to the default options. Can anyone help?

( Practicality navbar code )

Tags:

faevii

I'm trying to create a layout by adding custom CSS to the Tabula Rasa style.

Does anybody happen to know which element I need to remove the margin from in order to get rid of the gap between the navigation strip and the header? I've tried everything I could think of already ...

Tags:

pixiesandpotions

I imported Flexible Squares from LiveJournal and I'm using a theme by

refuted called Autumn. I'd really like the Navigation Strip at the top to show up, but I think there's something in the CSS hiding it. Anyone have a better idea than me why it might not be showing up?

Edit: Fixed! Now I just need to go back and mess with margins, since the fix messed them up.

Tags:

zvi

I have added custom CSS to get rid of the internal borders on the control strip to my style. The borders are back, and I can't figure out what to do to get rid of them. Any suggestions?

Tags:

Profile

Dreamwidth style system discussion

April 2025

S	M	T	W	T	F	S
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Syndicate

Page Summary

Style Credit

Style: Radiant Aqua for Venture by onlyembers

Expand Cut Tags

No cut tags

Page generated May. 29th, 2025 03:29 am

Dreamwidth style system discussion

Entries tagged with navigation strip

Fluid Measure: Nav Module

customising navigation strip colours in transmogrified

Help with Navigation Menu

Navigation strip cut at sides.

Navigation strip size.

Journal style advice

Navstrip default colors not defaulting

Entry Footer / Bottom Navigation

Removing navigation strip with CSS

expand cuts module

Practicality navigation strip

Quick Question

Question about a Flexible Squares layout

something I just noticed (perhaps code push related?)

Profile

April 2025

Links

Syndicate

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags