{"id":176,"date":"2013-10-03T19:08:12","date_gmt":"2013-10-03T19:08:12","guid":{"rendered":"http:\/\/farmur.com\/journal\/?p=176"},"modified":"2014-08-30T18:40:53","modified_gmt":"2014-08-30T18:40:53","slug":"176","status":"publish","type":"post","link":"http:\/\/farmur.com\/journal\/176\/","title":{"rendered":"Responsive Web \u2013 Week 5 \u2013 Navigation, CallBacks & Centering"},"content":{"rendered":"

I spent a lot of this last week trying to get the navigation to update with an “active” class when the page is in view. \u00a0This class allows me to style the navigation differently than the rest when it is the focus. \u00a0The next thing I spent a bit of time on was absolute positioning and centering my content. \u00a0There are times when I will need items to “stick” to one area, while other times I will need items to adjust their size and position if the user adjusts the screen size. \u00a0I was able to accomplish centering by applying the utilizing the following CSS:<\/p>\n

.overlay-center {\r\n    position: absolute;\r\n    left: 50%;\r\n}\r\n.overlay-box {\r\n    background-color: rgba(255,255,255,.9);\r\n    padding: 2em;\r\n    margin: 2em;\r\n    border-radius: 3px;\r\n}\r\n#home div > .overlay-box {\r\n    position: relative;\r\n    left: -50%;\r\n    max-width: 350px;\r\n    min-width: 250px;\r\n    margin: 10px auto;\r\n    height: 25%;\r\n}<\/pre>\n
To this code:<\/p>\n
<section id=\"home\">\r\n   <div class=\"overlay-center\">\r\n     <div class=\"overlay-box\">\r\n       <h4>Overlay Box Heading<\/h4>\r\n       <h4 class=\"subheading\">Overlay Box Subheading<\/h4>\r\n       <p>This is some body text.<\/p>\r\n     <\/div>\r\n   <\/div>\r\n <\/section><\/pre>\n
One problem I haven’t been able to solve yet is updating the header with the “current page.” \u00a0I have the plugin set up, but I can’t make it function completely\u2014hopefully next week! \u00a0Here’s a live version of my progress:<\/p>\n
http:\/\/goo.gl\/rbK41q<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
I spent a lot of this last week trying to get the navigation to update with an “active” class when the page is in view. \u00a0This class allows me to style the navigation differently than the rest when it is the focus. \u00a0The next thing I spent a bit of time on was absolute positioning […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[8],"class_list":["post-176","post","type-post","status-publish","format-standard","hentry","category-responsive-web-1","tag-rweb"],"_links":{"self":[{"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/posts\/176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/comments?post=176"}],"version-history":[{"count":3,"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/posts\/176\/revisions"}],"predecessor-version":[{"id":237,"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/posts\/176\/revisions\/237"}],"wp:attachment":[{"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/media?parent=176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/categories?post=176"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/tags?post=176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}