Advertisement
robinbutton

lyle gomes sticky nav

Dec 13th, 2013
78
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.24 KB | None | 0 0
  1. /* *****Navigation. Moved from top to the bottom, styled to be sticky ***** **NOTE: the commented out code worked fine except it did not render responsively in tablets **/
  2.  
  3.  
  4. /*div#page .hfeed .site {
  5. width: 100%!important;
  6. height: 100%!important;
  7. position: relative!important;
  8.  
  9. }
  10.  
  11. #nav-container {
  12.  
  13. position: relative;
  14. min-height: 100%;
  15. width: 100%;
  16.  
  17. }
  18.  
  19.  
  20. .main-navigation {
  21.  
  22. background-color: #939274;
  23. padding-top: 20px;
  24. padding-bottom: 20px;
  25. position: absolute;
  26. bottom: 0;
  27. left: 0;
  28. width: 100%;
  29.  
  30. }
  31.  
  32. div.nav-menu > ul {
  33.  
  34. border-bottom: 0!important;
  35. border-top: 0!important;
  36. text-align: center!important;
  37.  
  38.  
  39. }
  40.  
  41. .current_page_item > a, .main-navigation .current_page_ancestor > a {
  42. color: #fff!important;
  43. font-weight: normal!important;
  44.  
  45. } */
  46.  
  47. html, body, #wrap {
  48. height:100%;
  49. }
  50. body > #wrap {
  51. height: auto;
  52. min-height: 100%;
  53. }
  54. #page {
  55. padding-bottom: 80px; /* same value as nav height */
  56. }
  57. #nav-container {
  58. margin: -80px auto 0; /* negative value of nav height */
  59. position: relative;
  60. height: 80px;
  61. clear: both;
  62. width: 100%;
  63. }
  64.  
  65. .main-navigation {
  66.  
  67. background-color: #939274;
  68. padding-top: 20px;
  69. padding-bottom: 20px;
  70. bottom: 0;
  71. left: 0;
  72. width: 100%;
  73.  
  74. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement