We have a plan for the home page navigation, we just need to get it done in code. Home page navigation, I say specifically, because this is likely only going to be used on the homepage. It would be a bit much to use on every internal page, the way it’s designed now. Point being, we can put this into our home.php template.<\/p>\n
We write a bit of simple semantic markup according to our design, and then begin to style it. Of course this is a perfect “module” so we can separate the SCSS into it’s own file. We use Compass for the CSS3 bits.<\/p>\n","protected":false},"excerpt":{"rendered":"
We have a plan for the home page navigation, we just need to get it done in code. Home page navigation, I say specifically, because this is likely only going to be used on the homepage. It would be a bit much to use on every internal page, the way it’s designed now. Point being, […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":19998,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"lodge-video.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":18125,"url":"https:\/\/css-tricks.com\/lodge\/v10\/013-cssing-the-navigation-structure\/","url_meta":{"origin":20286,"position":0},"title":"#013: CSSing the Navigation Structure","date":"September 9, 2012","format":false,"excerpt":"We using some positioning tricks to line up the left edge of the logo and the main content area, while still having the header touch the left edge of the page. The navigation blocks, at the widest width, are 1\/8 the width of nav parent. We set them to inline-block\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18132,"url":"https:\/\/css-tricks.com\/lodge\/v10\/015-adding-icons-to-the-navigation-with-an-icon-font\/","url_meta":{"origin":20286,"position":1},"title":"#015: Adding Icons to the Navigation with an Icon Font","date":"September 9, 2012","format":false,"excerpt":"We start by tweaking the logo type a bit, but then jump into adding icons into the main nav. When we were designing the navigation in Photoshop (Video #007) we used the icon font Entypo. Now we'll use it on the web as well. We run the font through Font\u2026","rel":"","context":"With 15 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20415,"url":"https:\/\/css-tricks.com\/lodge\/artists-website\/024-subpage-navigation\/","url_meta":{"origin":20286,"position":2},"title":"#024 – Subpage Navigation","date":"March 8, 2013","format":false,"excerpt":"The homepage navigation is meeting our needs well, but having that huge chunk of navigation on every page of the site isn't practical. We'll need something more understated for the sub pages of the site. In this screencast we create that subpage navigation, just a row of links we can\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4044,"url":"https:\/\/css-tricks.com\/snippets\/php\/quick-alphabetic-navigation\/","url_meta":{"origin":20286,"position":3},"title":"Quick Alphabetic Navigation","date":"September 13, 2009","format":false,"excerpt":"Could be useful for an address book style navigation.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18040,"url":"https:\/\/css-tricks.com\/lodge\/v10\/006-photoshopping-the-main-navigation\/","url_meta":{"origin":20286,"position":4},"title":"#006: Photoshopping the Main Navigation","date":"September 6, 2012","format":false,"excerpt":"We start designing the top level (main) navigation of the site. We're starting with the desktop size screen (at an admittedly arbitrary width) but we're not worried that the navigation will have any problem adapting to a small screen. We decide that icons are a pretty cool thing to use\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18360,"url":"https:\/\/css-tricks.com\/lodge\/v10\/054-tap-to-show-mobile-navigation\/","url_meta":{"origin":20286,"position":5},"title":"#054: Tap-to-Show Mobile Navigation","date":"September 18, 2012","format":false,"excerpt":"We have a good start on the responsive design. The menu at the smallest screen sizes breaks down into a 2x4 grid. It fits nicely on the screen, but between that and the the branding it takes up an awful lot of space. We open it up on the iOS\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/20286"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=20286"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/20286\/revisions"}],"predecessor-version":[{"id":20292,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/20286\/revisions\/20292"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/19998"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=20286"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=20286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}