Modifying navbar into block-like design

Trombones13

Well-known member
As part of my upcoming site redesign, I want to change my navbar to make the Home/Forums/Members/etc. links look like blocks, all of which should be the same size. I made some sketches on my iPad (see attachments), but I'm not sure how to transfer that to code. I'll also need to move the profile links (inbox/alerts/log out) to the right side of where the logo is. I've seen that done on a few released styles--could someone explain how that's done as well? Thanks!

See attachments for some ideas I'm considering, several of which are explained above.
voice-redesign-sketch.webpvoice-redesign-sketch-2.webpvoice-redesign-sketch-3.webp

EDIT: Also, if it matters, I'm planning to use Jake's Nodes As Tabs add-on to link to a couple of forums.
 
Not absolutely certain but I think Syndol did an addon to move the right hand tabs up to the top on the right. Someone did it quite recently - sorry for vagueness but it's just to reassure it HAS been done.
 
As part of my upcoming site redesign, I want to change my navbar to make the Home/Forums/Members/etc. links look like blocks, all of which should be the same size. I made some sketches on my iPad (see attachments), but I'm not sure how to transfer that to code. I'll also need to move the profile links (inbox/alerts/log out) to the right side of where the logo is. I've seen that done on a few released styles--could someone explain how that's done as well? Thanks!

See attachments for some ideas I'm considering, several of which are explained above.
View attachment 28061View attachment 28062View attachment 28063

EDIT: Also, if it matters, I'm planning to use Jake's Nodes As Tabs add-on to link to a couple of forums.

By blocks, do you mean something like what I do with my Imperial Style (http://xenique.com/forums/misc/style?style_id=47)?

Your sketches aren't really informative for others, so giving an example (Whether it is wordpress or something) is best.
 
Thanks for the info, Morgain, and thanks again for the PC, Floris! (p.s. It's the Paper app for iPad, which is free with in-app payments: http://www.fiftythree.com/paper)

By blocks, do you mean something like what I do with my Imperial Style (http://xenique.com/forums/misc/style?style_id=47)?

Your sketches aren't really informative for others, so giving an example (Whether it is wordpress or something) is best.
Yeah; that's what I'm looking for (except that there'd be six to eight blocks and they'd stretch across the whole navbar). The way you do user info in the header is close to what I'm looking for as well (if the first sketch isn't informative enough on that, I can go into more detail). Also, If you have any suggestions on how to make those sketches more informative for future reference, feel free to let me know!
 
Thanks for the info, Morgain, and thanks again for the PC, Floris! (p.s. It's the Paper app for iPad, which is free with in-app payments: http://www.fiftythree.com/paper)


Yeah; that's what I'm looking for (except that there'd be six to eight blocks and they'd stretch across the whole navbar. The way you do user info in the header is close to what I'm looking for as well (if the first sketch isn't informative enough on that, I can go into more detail). Also, If you have any suggestions on how to make those sketches more informative for future reference, feel free to let me know!
Just cleaning up the lines and notations for something like that.
 
Yeah Paper, I got the name wrong. I meant that one. It's from the guys that also worked on the prototyping Courier for Microsoft or whatever.
It's pretty nice. I still prefer Sketchbook Pro - this is just for more simpler stuff, and it's better organized.
 
Thanks for the info, Morgain, and thanks again for the PC, Floris! (p.s. It's the Paper app for iPad, which is free with in-app payments: http://www.fiftythree.com/paper)


Yeah; that's what I'm looking for (except that there'd be six to eight blocks and they'd stretch across the whole navbar. The way you do user info in the header is close to what I'm looking for as well (if the first sketch isn't informative enough on that, I can go into more detail). Also, If you have any suggestions on how to make those sketches more informative for future reference, feel free to let me know!
To do what you want you're going to have to use a fixed width.
 
You could calculate the block width, minus the objects, the padding between them, and what space you have left, etc. And adjust. But .. it's a bit tricky and fixed width certainly helps.
 
Top Bottom