isopods | [01] - navigation; clean & simple

▶ LT. KIM KITSURAGI

img src: [ ryleisdead ]
CLEAN & SIMPLE

A simple, easily customizable navigation layout.

INSTRUCTIONS:

→ Ideal background size is 500 x 300 px.

→ If your link text does not fit within the bounds of the rectangle, just adjust the width of the div the link is contained within.

→ To add a row of links, first subtract 40px from the margin-top of the first row. Paste the following code after "END OF BOTTOM ROW OF LINKS" in the original code.

<!--NEW ROW--!>
<div id="nav-link-box"
  style="display: inline-block;
  width: 100%;
  height: 40px;
  margin-top: 5px;">

<!--START OF LINKS--!>
<div id="nav-link"
  style="display: inline-block;
  background-color: rgba(0,0,0,0.5);
  width: 100px;
  height: 30px;
  border-radius: 5px;
  padding-top: 10px;">
<a href="LINK HERE" style="font-family: 'MS Gothic'; color: white; font-size: 12px;">LINK</a>
</div>
<div id="nav-link"
  style="display: inline-block;
  background-color: rgba(0,0,0,0.5);
  width: 100px;
  height: 30px;
  border-radius: 5px;
  padding-top: 10px;">
<a href="LINK HERE" style="font-family: 'MS Gothic'; color: white; font-size: 12px;">LINK</a>
</div>
<div id="nav-link"
  style="display: inline-block;
  background-color: rgba(0,0,0,0.5);
  width: 100px;
  height: 30px;
  border-radius: 5px;
  padding-top: 10px;">
<a href="LINK HERE" style="font-family: 'MS Gothic'; color: white; font-size: 12px;">LINK</a>
</div>
<div id="nav-link"
  style="display: inline-block;
  background-color: rgba(0,0,0,0.5);
  width: 100px;
  height: 30px;
  border-radius: 5px;
  padding-top: 10px;">
<a href="LINK HERE" style="font-family: 'MS Gothic'; color: white; font-size: 12px;">LINK</a>
</div>
</div>
<!--END OF ROW OF LINKS--!>

→ To make this layout have only one row of links, find the bottom row of links and delete the code as commented. Change the margin-top of the remaining row to 190px.

→ To delete the title banner, delete from "START OF TITLE" to "END OF TITLE" and add 50 px to the current margin-top.

→ If you have any questions or troubleshooting issues, please feel free to comment.

CODE:

<raw-code>
<center>
<div id="navigation-box"
  style = "width:500px;
  height:300px;
  background-image: url('IMAGE URL');
  background-position: center;
  background-color: white;
  background-size: auto;
  display: block;
  border-radius: 15px;
  border-width: 1px;
  border-color: white;
  border-style: dotted;">

<!--START OF TITLE--!>
<div id="nav-title-bar"
  style="width: 100%;
  height: 30px;
  background-color: rgba(0,0,0,0.5);
  display: inline-block;
  margin-top: 10px;
  padding-top: 10px;">
<span id="nav-title"
  style="font-family: 'MS Gothic';
  color: white;
  font-size: 16px;">
TITLE HERE
</span>
</div>
<!--END OF TITLE--!>

<!--START OF LINK BOXES--!>
<!--TOP ROW--!>
<div id="nav-link-box"
  style="display: inline-block;
  width: 100%;
  height: 40px;
  margin-top: 145px;"> <!--ADJUST THIS MARGIN TO REPOSITION THE LINKS VERTICALLY--!>
<!--START OF ROW OF LINKS--!>
<a href="LINK HERE" style="font-family: 'MS Gothic'; color: white; font-size: 12px;">
<div id="nav-link"
  style="display: inline-block;
  background-color: rgba(0,0,0,0.5);
  width: 100px;
  height: 30px;
  border-radius: 5px;
  padding-top: 10px;">LINK</div></a>

</div>
<!--END OF TOP ROW OF LINKS--!>

<!--BOTTOM ROW. DELETE FROM HERE TO END OF BOTTOM ROW IF YOU ONLY WANT ONE ROW--!>
<div id="nav-link-box"
  style="display: inline-block;
  width: 100%;
  height: 40px;
  margin-top: 5px;">

<!--START OF A ROW OF LINKS--!>
<a href="LINK HERE" style="font-family: 'MS Gothic'; color: white; font-size: 12px;">
<div id="nav-link"
  style="display: inline-block;
  background-color: rgba(0,0,0,0.5);
  width: 100px;
  height: 30px;
  border-radius: 5px;
  padding-top: 10px;">LINK</div></a>

</div>
<!--END OF BOTTOM ROW OF LINKS--!>
<!--CODE CREDIT, DO NOT DELETE--!>
<div id="credit"
  style="font-size: 10px; width: 475px; text-align: right; padding-right: 10px; padding-bottom: 10px;"><a href="https://isopods.dreamwidth.org/429.html" style="color: white; font-family: MS Gothic;"><i>credit</i></a></div>
</div>
<!--END OF NAV BOX--!>
</center>
</raw-code>

Flat | Top-Level Comments Only

This is really nice!

Thank you!

This is a great looking nav! I'm trying to use it for this journal, but when I paste the HTML into a post, it shows the raw code rather than the nav box. Any clue as to what could be happening? I'm happy to share my code, if you like.

Oh, gosh, sorry for the late response! I swear I looked at this in my inbox and said to myself "Oh, I'll answer this later"...and never did. Oops.

Anyways, there a few things off the top of my head that I can think of. One, are you editing in the HTML editor as opposed to the rich text editor? Two, are you including the tags at the beginning and end of the template? If you could share the code that you copied, that would be great!

This is lovely! I'm going to try using it for this journal, although I'm a coding noob and have no idea how, once I've set this up, to make my other entries not appear on the main journal page.

I feel like this is a very basic thing that I should know, but I'd be obliged if you would help me out. Thanks!

Absolutely! This isn't so much a coding thing as it is a Dreamwidth thing. Let me outline the steps.

1. Navigate to your journal customization settings (link here).

2. Under the "Presentation" tab, change the number of journal entries to show on the Recent Entries page to "1".

3. Save your changes. Your journal should now just show the most recent entry--in this case, your navigation entry! This works as long as you set the date of the appropriate entry to be more recent than all your other entries. AKA, I usually just edit the date so that it's a few years in the future.

I hope this helped!

That was super helpful; thanks!

Using this one for this guy's Ryslig nav, thanks! :D

[01] - navigation; clean & simple

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject