To add an icon using only CSS (for example, before list items), use this code:
|
1 |
&:before { font: normal normal normal 14px/1 FontAwesome; content: '\f0a9'; margin-right:10px; |
Of course, you’ll need to have the FontAwesome font installed on your site.
Get the unicodes for icons here: http://fontawesome.io/cheatsheet/
If you are creating a child theme, you have two choices that load faster than using @import in your child style.css file.
1. You can add the parent style link to the child header.php, just above your normal css link.
|
1 2 3 4 |
// for the parent stylesheet <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>" media="screen" /> //for the child stylesheet <link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" media="screen" /> |
2. You can add this to your functions.php file.
|
1 2 3 4 5 6 |
add_action( 'wp_enqueue_scripts', 'my_parent_theme_css' ); function my_parent_theme_css() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) ); } |
If you’re using display:table, rather than a real table, for layout, this CSS will make it mobile responsive:
|
1 2 3 4 5 6 |
#div { display:table; vertical-align:top; table-layout:fixed; width:100%; } |
I wasn’t happy with the JS (or jQuery) mobile menu solutions I had been using. They always seemed to have some sort of a glitch.
My solution was to build a mobile nav which gets the menu items with wp_get_nav_menu_items() and then display them as a select drop-down. A little bit of CSS styling on the select box, and voila! A nav menu that works perfectly every time!
Here’s the navigation code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div id="navigation" role="navigation"> <?php wp_nav_menu( array( 'container' => 'ul' ) ); ?> </div> <div id="mobilenav"> <form class="mobilenav"> <select name="themenu" onchange="location = this.options[this.selectedIndex].value;"> <option value="" class="first">MENU</option> <?php $args = array( 'order' => 'ASC', 'orderby' => 'menu_order', 'post_type' => 'nav_menu_item', 'post_status' => 'publish', 'output_key' => 'menu_order', 'nopaging' => true ); $items = wp_get_nav_menu_items( 'main-menu', $args ); foreach ($items as $item) { echo '<option value="' .$item->url. '">' .$item->title. '</option>'; } ?> </select> </form> </div> |
And here’s the CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* mobilenav styling */ #mobilenav {text-align:center;} form.mobilenav {margin:.3em;} .mobilenav select { color:#444;padding:.5em;border:0;margin:.5em 0;text-align:center;border-radius:10px;-moz-border-radius:10px;} .mobilenav select option {padding:.2em 1em;} /* base CSS */ #navigation { display:none; } /* desktop CSS */ #navigation { display:block;} #mobilenav { display:none; } |
For those times when you want a nav menu centered in the container. Does not affect the alignment of the individual navigation links.
|
1 2 3 4 |
.nav-container { text-align: center;} .nav-container ul { display: inline-block;} |
