Tessisamess

Previous | Next

Layout Add-on: Sticky Navs



LIVE PREVIEW

Information

Hey guys! Today's layout is actually a layout add-on. What?! I know! These four sticky navigations will fit into ANY layout you're using (both Generator and Complete Style) without editing needed! (There may be certain exceptions where the layout conflicts, but they'll only need minor edits if that's the case.)

These will most likely work on DW too with the same concept as the Complete Style instructions, but I have not tested them out, so if you use them on DW and experience issues just let me know and I'll add DW notes to this post!

The instructions for each of these are on the demo page, so the only editing info on this page will be the colors and a couple of small notes. Enjoy, and let me know if you would like to see more plug & play addons like these! ♥

Editing Guide

NAV #1 COLORS
#fff - Menu title and link color
255,255,255 - Link border (semi-tranparent rgba value)
#444 - Hidden menu background
#222 - Nav background

NAV #2 COLORS
#fff - Popup menu background
#eee - Link background
#ddd - Link hover background
#aaa - Menu title
#333 - Text/link color
0,0,0 - Popup overlay background (semi-tranparent rgba value)

*Change left:0;top:0; in #sticky-nav to reposition the menu icon for Nav #2.

NAV #3 COLORS
#fff - Dropdown background
#ddd - Borders and link hover background
#222 - Link color

*Change top:25px;right:25px; in #sticky-nav to reposition the dropdown for Nav #3.

NAV #4 COLORS
#fff - Link and dropdown text color
#bbb - Text color
0,0,0 - Menu and dropdown background (semi-tranparent rgba value)

*The font used in all the demos is Oswald. If you want to use this for your sticky nav, just declare the font in #sticky-nav with font-family:Oswald; and make sure you embed the font in your CSS from Google Fonts.

Terms of Use

♡ Do not remove credit.
♡ You may add this to your layouts with the intent to redistribute them as long as you leave my credit header in the CSS.
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!

Comments

(Anonymous)
Jan. 29th, 2018 07:07 pm (UTC)
Ahhhhh, STOP BEING SO WONDERFUL. :D This is fantastic.
Jan. 29th, 2018 10:24 pm (UTC)
AW, thank you so much! ♥ I had so much fun putting all these together!
(Anonymous)
Jan. 30th, 2018 12:39 am (UTC)
Amazing!!! Oh man. This will be so perfect for mod journals.
Jan. 30th, 2018 05:15 pm (UTC)
Eeee, thank you!! ♥ That was my thought too, yeah! Perfect for any account type (usually mods journals haha) that needs a LOT of links listed for people to navigate. :DDD
Jan. 30th, 2018 05:51 pm (UTC)
GURL. GURL. Damn. I mean, yeah I'm going to play with these.
Jan. 30th, 2018 05:58 pm (UTC)
GURL YA KNOW I WAS HYPE TO POST THESE LOL. I'm super excited about possibly posting a new plug & play "works in any layout" add-on every month or so, ngl.
Jan. 30th, 2018 06:02 pm (UTC)
Already thinking on how and which one to use these for ~epochcaps, ngl.

Doooooo it! I couldn't even begin to code up a layout, but your little codes and tutorials make me feel like I almost could.
Jan. 30th, 2018 06:07 pm (UTC)
Oooh yasss. Ngl, I think Nav #4 with solid backgrounds would be amazing for that with your current layout. You'd basically just wanna replace all on rgba(0,0,0,0.7) and then add some top margin to body to make room for it up top, and the rest would really just be filling it out, bing bang boom!
Jan. 30th, 2018 06:08 pm (UTC)
Ohhhhhhh yeah I could links tags! aakdjsldsjlds.
Jan. 30th, 2018 06:11 pm (UTC)
RIGHT!! Since it supports non-link text, links, and dropdowns with links, you can really mix and match anything you need up there (and obviously you can have multiple of any type, so if you wanted dropdowns for tag sections you could!.) I think the only thing to keep in mind is like if you have a ton of blocks along the top smaller screens will hate it, but yanno lmao.

On THAT note, you can edit this to make each block shorter to make room if you know you're going to need a lot of blocks up there:

.sticky-nav ul li{position:relative;margin:0;padding:0;width:120px;}
Jan. 30th, 2018 06:16 pm (UTC)
Thank you, thank you! I'll fiddle with it on a mock journal, and probably show off thangs ~soonish.
Jan. 30th, 2018 06:17 pm (UTC)
Yasss, I'm SO excited to see this plugged into journals tbh. ♥
Jan. 30th, 2018 07:20 pm (UTC)
The colors are a mess, but this is what I got so far.
Feb. 1st, 2018 01:10 am (UTC)
I really love the minimalist layout you created this navigation for as an example. Is that something you have code/a tutorial for?
Feb. 1st, 2018 01:17 am (UTC)
Actually, yes! I'll be making a free layout based on that design for February, so you'll be able to use something that looks like it very soon!
May. 30th, 2018 06:16 pm (UTC)
KINDA LATE LOL, but there is now a layout based on this demo page!
Mar. 16th, 2018 01:33 am (UTC)
Hiya! With you recently posting your tutorial on how to get S2 layouts from IJ onto DW, I've been going wild putting your layouts on a couple of my journals. However, I haven't been able to use this navigation add on at all, though it's possible I'm just messing up somewhere. I tried with two different layout codes, both with a sidebar, and with both I checked with Ctrl + F to make sure I didn't have module-customtext set to display: none. I pasted your CSS at the end of my layout CSS, and put the HTML under Text for the 'Custom Text' box. The two layouts I tried this with were Woodlands and Is This It?. I also tried each of the four nav codes in case one was being finicky or I had maybe copy/pasted one wrong, but none worked. Oh, and I changed the margin of the body, trying both margin-top:100px and margin:100px 0px 0px 0px to see if those would work. It's okay if there's no fix for it, but I just wanted to let you know my experience so far. Your layouts are beautiful with or without a nav section. :D
May. 28th, 2018 08:29 pm (UTC)
This might be a silly question, but what is the default layout you are using for this navigation bar on? It's really nice, simple, and just goes great with the navigation bar. I'd like to try something like this out on DW, but wasn't sure if this was a layout you designed previously or are simply utilizing IJ layouts with a simple background.
May. 28th, 2018 08:49 pm (UTC)
Aw, thank you! ♥ It's not actually a layout at all, sorry; just a simple HTML page! It would be super easy to make something like this as a layout, though! I could post up something like that soon if you like!
May. 28th, 2018 08:51 pm (UTC)
If that isn't a problem and you have the time, I'd absolutely love that! I just really love it and think it's simple and clean!
May. 30th, 2018 06:17 pm (UTC)
Heyo, just wanted to pop back over and let you know that there is now a layout based on this demo page! ♥
Jun. 13th, 2018 03:29 pm (UTC)
I just spent way too much time messing with these and combining a few different elements from different journal layouts.

Thank you so much for sharing! And I love add ons :)
Jun. 23rd, 2018 01:11 am (UTC)
I'm so sorry, but I cannot for the life of me work out which value to change to make more room for the nav :(
Jun. 23rd, 2018 01:46 am (UTC)
Could you please leave your previous comments intact when following up your help request? It makes it much harder to look into the issues you're having when previous comments get deleted since I have to go back and forth between the entry and my inbox. My work hours are listed in my contact; I'll get back to you on Monday!
Jun. 23rd, 2018 02:02 am (UTC)
Sure, sorry about that! I deleted the others because I changed the one I was using and the particular issue didn't apply anymore. I'll leave this one where it is.