css

There are so many navigation menus that I absolutely love over here in Blogland. It’s a small part of a blog, but also one of the most important elements. There are a trillion options when it comes to customizing the ol’ navbar. These are a few neat ideas if you feel like fancying up (or fancying down) your navigation menu.

1. Make Your Navigation Menu Stick to the Top
Having sticky blog elements is all the rage right now and I’m all about it. When your navigation menu scrolls with the page, it keeps your readers focused on what categories you have to offer. I love the clean floating navigation bar on Honestly WTF. If you are a WordPress user, there are a several handy plugins that will help you create your sticky navigation bar. I currently use this plugin. If you’re a Blogger user, try following this tutorial.

2. Use Hover Effects
Going overboard on hover effects can be distracting, but I also get distracted when there aren’t any hover effects at all! The hover effect says, “Hey! This is a link. Click it.” I think it’s nice to at least have one tiny effect even if it’s just a slight color change. I’m a big fan of the pretty design over on The Nectar Collective. Learn how to style your links with easy CSS codes here.

3. Add Hand Drawn Elements
Using hand drawn elements in your header and/or navigation bar will give your blog that crafty DIY feel and make it more fitting to your unique style. Madalynne’s blog design is so dang cute. There are just enough doodles to keep the layout clean and the hand drawn elements are entirely relevant to her craft. With a little help from a tablet and some CSS coding, you can easily add crafty handmade drawings to your navigation menu. Alternatively, you can design your blog on Photoshop or a similar program and hand it over to a web developer to add all the magic codes.

4. Include a Drop Down Menu
Drop down menus are perfect for when you have such an abundance of categories, you can’t possibly fit them all neatly into a menu. If you have several topics, a good way to organize them is to choose 4-5 main categories. Then file your smaller categories into the larger ones. For example, on my blog I have many features related to style: dress up, window shopping, fictional style, gift guides, beauty, etc. Rather than listing all of these, I would file them under the broad category “style”. Here is a straightforward guide to drop down menus that even shows you how to customize your menu using CSS.

5. Keep it Simple
Sometimes less is definitely more. Fancy navigation menus are fun, but keeping things minimal creates an completely different vibe on your blog. Bekuh Browning’s site is designed so well. Her navigation bar is simple and to-the-point, yet I still want to click every button and read on forever.

Admiring any navigation bars (or blog designs) these days? I’d love to see them!

Over the past couple of years, I have grown to love CSS so much. It’s a very exciting feeling to completely style a website or blog only using codes. It’s like learning another language. A really nerdy (but fun) language. If you’re not too familiar with CSS yet, read on!

CSS? It’s like HTML right?
CSS and HTML are not the same thing, but they are definitely besties. HTML (Hyper-text Markup Language) is what creates the structure of a website while CSS is how we style the website. CSS stands for Cascading Style Sheet. The “cascading” part comes from the fact that you can build on your stylesheet and override old codes. HTML knowledge is valuable but isn’t enough when it comes to really customizing your blog or website. Adding CSS is wonderful because you can just add little codes to a stylesheet without messing up the framework of the site.

How do I add CSS to my blog?
CSS can be added to a blog a couple different ways. On Blogger, the “Add CSS” option is in the Template Designer under the Advanced tab. Many WordPress themes come with a Style Editor that lets you add CSS, or you can install Jetpack which gives you the option to add to the stylesheet. If you’re dealing with plain old HTML files, you have a few options. I recommend having an external style sheet because it keeps your codes more organized. You can learn more about that here.

What are selectors and how do I use them?
A selector refers to the element you are stylizing. Maybe it’s your entire header or just your navigation bar. A selector can be an id, a class, or a whole section of your page. An id always begins with a hashtag and a class begins with a period. The class selector styles many elements within that class while the id selector only styles one main element.

The cheat sheet above shows some properties you can use in your CSS to style your blog or website. Every property must be followed by a colon, a value, a semi-colon, and a closing bracket at the end of the last property. Here’s an example of what my CSS might look like if I were styling my navigation bar:

A few trickier properties defined + examples
Display – how the element is placed on the page (display:block; display:none;)
Float – allows elements to be placed side by side (float:left; float:right;)
Clear – decides where the element on the next row will be in relation to the previous row (clear:both; clear:left;)
Z-index – sets the order in which elements are layered/stacked (z-index:1; z-index:9999;)
Overflow – decides what will happen if the content overflows the element’s box (overflow:hidden; overflow:scroll;)
List-style-type – sets the marker at the front of each list item (list-style-type:none;)

There are so many more CSS properties that you can add to your stylesheet. These are just the ones I happen to use most often. Specific definitions of each CSS property can be found here.

Thank you for letting me be nerdy today. Happy coding!

5 Creative Ways to Customize Your Navigation Menu

Intro to CSS + Cheat Sheet