mistojen: (Default)
mistojen ([personal profile] mistojen) wrote2016-09-22 11:23 pm

navigation: clean and simple

Clean and Simple Navigation

Tossed this together as a request (with a design reference from the requester), and hopefully some of you will get some use out of it. :) Enjoy!

ETA: It has been brought to my attention that this code doesn't play nice with journal layouts, which I...admittedly failed to test, since I typically work in entries that aren't set to match my journal layout. So, if you're running into this issue, use the second copy/paste code. Please note that this fix borks the code big time if you're looking at it in entry view and your journal is set not to use the journal's layout on entries. But...It works on the three journal layouts I tested it in, so...hopefully it will also work for you. Drop me a line if not.

'clean and simple' design by mistojen

fixed code for picky journal layouts:

color change:


  1. Replace the following:
    • MAINIMAGE with the url for the image as your base. In the example code above, this image is the plain one of Natasha Romanoff. This needs to be exactly 500x250 in size. You can change this, but if you do, then you also need to change all of the dimensions in the rest of the code to match whatever you change it to.
    • OVERLAY with the url of the image you're using for your overlay. This is either going to be a solid block of a dark color that'll completely cover the main image or, if you have some Photoshop skills, it'll be a low opacity dark layer over a transparent layer saved down as a .png. This will make it transparent so you get the effect in the sample code above. If you haven't got access to make an overlay image, you can simply change the code: where it says background-image: url('OVERLAY'); you'll want to change that to background-color: rgba(0,0,0,.66). the .66 in that can be adjusted lighter or darker by making the number lower or higher, respectively.
    • URLGOESHERE with the navigation links you'd like to insert
    • LINKTEXTGOESHERE with the link text for those links.
  2. Please do not remove credit.
  3. If you have any questions or run into hiccups, please feel free to comment below and I'll try to get back to you ASAP to help.
  4. Enjoy!
lovesherboys: (Default)

[personal profile] lovesherboys 2017-01-27 08:56 pm (UTC)(link)
Hi, It's Murgy. I can't figure out what I did here to make the overlay image sit lower in the box.
lovesherboys: (Default)

[personal profile] lovesherboys 2017-01-28 06:55 pm (UTC)(link)
quick question.... is there a way to put the links on either side of the Devil's Trap, and Center the name without completely borking the code? this is what mine looks like now.