Community Forums › Forums › Archived Forums › Design Tips and Tricks › Help Sticky Secondary Navigation Blissful
Tagged: blissful, navigation, Sticky Navigation
- This topic has 19 replies, 3 voices, and was last updated 10 years, 4 months ago by pgapg2.
-
AuthorPosts
-
November 12, 2013 at 2:20 pm #72550krystynParticipant
I've followed this tutorial for a sticky navigation here: http://my.studiopress.com/tutorials/sticky-menu/
But, I want it to the be secondary navigation that is under the header on this site: http://www.rebeccakelsey.dreamhosters.com/
I know I'm missing something simple, so I'm hoping somebody can help out!
http://www.rebeccakelsey.dreamhosters.com/November 12, 2013 at 6:05 pm #72594nutsandboltsMemberThis tutorial has instructions for the secondary nav: http://sridharkatakam.com/how-to-set-up-sticky-header-or-navigation-in-genesis/
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 12, 2013 at 6:31 pm #72597krystynParticipantThanks @Nutandbolts. I actually did that tutorial as well and commented there too (in moderation) because it also wasn't working for me.
I'm not sure what I'm doing wrong.
I know my navigation is sub-nav instead of nav-secondary, so I replaced all of those occurrences, but it still wasn't sticky.
November 12, 2013 at 10:58 pm #72634nutsandboltsMemberHmm... Without being able to see your files I'm not sure what's wrong.
A slightly less elegant way to do it would be adding
position: fixed;
to both the header and subnav. You'd likely need some adjustments to make them look right (as soon as you add that rule, things will move and become wonky) but it should work if your main goal is to keep them at the top of the browser window at all times.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 14, 2013 at 9:48 am #72945krystynParticipantYeah, position fixed isn't really idea for the navigation under the header to be sticky only....I'd want it to scroll until it reaches the top of the page and then stop.
November 14, 2013 at 10:36 am #72956krystynParticipantI'm happy to post it all.... it's frustrating because it seems like it should be working!
/* Theme Name: Blissful Child Theme Theme URL: http://www.studiopress.com/themes/blissful Description: Blissful is a 2 or 3-column Widget-ready child theme created for the Genesis Framework. Author: StudioPress Author URI: http://www.studiopress.com/ Version: 1.0 Template: genesis Template Version: 1.6 License: GNU General Public License v2.0 License URI: http://www.opensource.org/licenses/gpl-license.php */ /* Table of Contents * Defaults * Body * Hyperlinks * Wrap * Header * Image Header - Partial Width * Image Header - Full Width * Navigation Constants * Header Right Navigation * Primary Navigation * Primary Navigation Extras * Secondary Navigation * Inner * Breadcrumb * Taxonomy Description * Content * Column Classes * Featured Post Grid * Headlines * Unordered / Ordered Lists * Post Info * Post Meta * Author Box * Sticky Posts * Archive Page * Post Icons * Images * Post Navigation * Primary / Secondary Sidebars * Dropdowns * Featured Page / Post * User Profile * Buttons * Search Form * eNews & Updates Widget * Calendar Widget * Footer * Footer Widgets * Comments * Gravity Forms */ /* Defaults ------------------------------------------------------------ */ body, h1, h2, h2 a, h2 a:visited, h3, h4, h5, h6, p, input, select, textarea { color: #000000; font-family: "Century Gothic", Georgia, Times, serif; font-size: 14px; font-weight: normal; line-height: 22px; margin: 0; padding: 0; text-decoration: none; } input, select, textarea { line-height: normal; } blockquote, input, select, textarea, .author-box, .breadcrumb, .sticky, .taxonomy-description, .wp-caption { background-color: #f5f5f5; border: 1px solid #ddd; } blockquote, .breadcrumb, .taxonomy-description { border: none; color: #555; font-family: "Century Gothic", Georgia, Times, serif; } ol, ol li, ul, ul li { list-style-type: none; margin: 0; padding: 0; } ol li { list-style-type: decimal; } ul li { list-style-type: square; } /* Body ------------------------------------------------------------ */ body { /*background: url(http://69.195.124.59/~domestq0/wp-content/uploads/2013/07/bkgd3.png);*/ } /* Hyperlinks ------------------------------------------------------------ */ a, a:visited { color: #d89ea2; text-decoration: none; } a:hover { text-decoration: underline; } a img { border: none; } /* Wrap ------------------------------------------------------------ */ #wrap { background-color: none; margin: 0 auto; /*Shadow wrap on site*/ width: 1204px; /*-moz-box-shadow: 0 4px 8px #666; -webkit-box-shadow: 0 4px 8px #666;*/ } /* Header ------------------------------------------------------------ */ #header { background: url(images/header.png) no-repeat; height: 215px; width: 1200px; border-top: 2px solid #d89ea2; border-right: 2px solid #d89ea2; border-left: 2px solid #d89ea2; } #title-area { float: left; overflow: hidden; padding: 53px 0 0; width: 500px; } #title { font-family: "Century Gothic", Georgia, Times, serif; font-size: 18px; padding: 0 0 0 25px; } #title a, #title a:hover { color: #888; text-decoration: none; } #title a:hover { color: #555; } #description { font-size: 12px; font-style: italic; letter-spacing: 1px; padding: 12px 0 0 50px; } #header .widget-area { float: right; padding: 5px 10px 0 0; text-align: right; width: 600px; } #header .widget-area img { margin: 0; } /* Image Header - Partial Width ------------------------------------------------------------ */ .header-image #title-area, .header-image #title, .header-image #title a { display: block; float: left; height: 200px; overflow: hidden; padding: 0; text-indent: -9999px; width: 550px; } .header-image #description { display: block; overflow: hidden; } /* Image Header - Full Width ------------------------------------------------------------ */ .header-full-width #title-area, .header-full-width #title, .header-full-width #title a { width: 480px; } /* Navigation Constants ------------------------------------------------------------ */ li:hover ul ul, li.sfHover ul ul { left: -9999px; } li:hover, li.sfHover { position: static; } /* Header Right Navigation ------------------------------------------------------------ */ #header ul.nav, #header ul.menu { float: right; } #header ul.nav ul, #header ul.menu ul { float: right; margin: 0; padding: 0; width: 100%; } #header ul.nav li, #header ul.menu li { background-color: #000000; float: left; list-style-type: none; text-transform: uppercase; } #header ul.nav li a, #header ul.menu li a { color: #fff; display: block; font-size: 12px; padding: 7px 10px 5px; position: relative; text-decoration: none; } #header ul.nav li a:hover, #header ul.nav li a:active, #header ul.nav .current_page_item a, #header ul.nav .current-cat a, #header ul.nav .current-menu-item a, #header ul.menu li a:hover, #header ul.menu li a:active, #header ul.menu .current_page_item a, #header ul.menu .current-cat a, #header ul.menu .current-menu-item a { background-color: #000; color: #fff; } #header ul.nav li a.sf-with-ul, #header ul.menu li a.sf-with-ul { padding-right: 25px; } #header ul.nav li a .sf-sub-indicator, #header ul.menu li a .sf-sub-indicator { background: url(images/arrow-down.png) no-repeat; display: block; height: 10px; overflow: hidden; position: absolute; right: 10px; text-indent: -9999px; top: 12px; width: 10px; } #header ul.nav li li a, #header ul.nav li li a:link, #header ul.nav li li a:visited, #header ul.menu li li a, #header ul.menu li li a:link, #header ul.menu li li a:visited { background-color: #000000; border: 1px solid #666; border-top-width: 0; color: #fff; font-size: 11px; padding: 5px 10px; position: relative; width: 158px; } #header ul.nav li li a:hover, #header ul.nav li li a:active, #header ul.menu li li a:hover, #header ul.menu li li a:active { background-color: #000; } #header ul.nav li li a .sf-sub-indicator, #header ul.menu li li a .sf-sub-indicator { background: url(images/arrow-right.png) no-repeat; top: 10px; } #header ul.nav li ul, #header ul.menu li ul { height: auto; left: -9999px; position: absolute; width: 180px; z-index: 9999; } #header ul.nav li ul a, #header ul.menu li ul a { width: 160px; } #header ul.nav li ul ul, #header ul.menu li ul ul { margin: -31px 0 0 179px; } #header ul.nav li:hover>ul, #header ul.nav li.sfHover ul, #header ul.menu li:hover>ul, #header ul.menu li.sfHover ul { left: auto; } /* Primary Navigation ------------------------------------------------------------ */ #nav { clear: both; color: #8f8f8f; font-family: "Century Gothic", Georgia, Times, serif; overflow: hidden; text-transform: uppercase; width: 1200px; background-color: #d89ea2; border-left: 2px solid #d89ea2; border-right: 2px solid #d89ea2; } #nav ul { float: left; padding: 0 0 0 10px; width: 990px; } #nav ul ul { padding: 0; width: 100%; } #nav li { float: left; list-style-type: none; } #nav li a { color: #8f8f8f; display: block; font-size: 17px; margin: 0; padding: 6px; position: relative; text-decoration: none; } #nav li a:hover, #nav li a:active, #nav .current_page_item a, #nav .current-cat a, #nav .current-menu-item a { color: #ffffff; } #nav li a .sf-sub-indicator { display: block; height: 10px; overflow: hidden; position: absolute; right: 10px; text-indent: -9999px; top: 12px; width: 10px; } #nav li li a, #nav li li a:link, #nav li li a:visited { background-color: #fff; border: 1px solid #888; border-top-width: 0; color: #555; font-size: 17px; padding: 5px 10px; position: relative; text-transform: lowercase; width: 138px; } #nav li li a:hover, #nav li li a:active { color: #d89ea2; } #nav li ul { height: auto; left: -9999px; position: absolute; width: 160px; z-index: 9999; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -33px 0 0 159px; } #nav li:hover ul, #nav li.sfHover ul { left: auto; } /* Primary Navigation Extras ------------------------------------------------------------ */ #nav li.right { float: right; padding: 10px; } #nav li.right a { background: none; border: none; color: #555; display: inline; text-decoration: none; } #nav li.right a:hover { color: #d89ea2; text-decoration: none; } #nav li.search { padding: 0px 10px 4px; } #nav li.rss a { background: url(images/rss.png) no-repeat center left; margin: 0 0 0 10px; padding: 10px 0 10px 16px; } #nav li.twitter a { background: url(images/twitter-nav.png) no-repeat center left; padding: 7px 0 5px 20px; } /* Secondary Navigation ------------------------------------------------------------ */ #subnav { background-color: #d89ea2; border-left: 2px solid #d89ea2; border-right: 2px solid #d89ea2; clear: both; color: #8f8f8f; font-family: "Century Gothic", Georgia, Times, serif; overflow: hidden; text-transform: uppercase; width: 1200px; padding-top: 6px; padding-bottom: 6px; } #subnav ul { float: left; padding: 0 0 0 5px; width: 1200px; } #subnav ul ul { padding: 0; width: 100%; } #subnav li { float: left; list-style-type: none; } #subnav li a { color: #8f8f8f; display: block; font-size: 17px; margin: 0; padding: 5px 10px; /*position: fixed;*/ position: relative; text-decoration: none; } #subnav li a:hover, #subnav li a:active, #subnav .current_page_item a, #subnav .current-cat a, #subnav .current-menu-item a { color: #ffffff; } #subnav li a .sf-sub-indicator { display: block; height: 10px; overflow: hidden; position: absolute; right: 10px; text-indent: -9999px; top: 12px; width: 10px; } #subnav li li a, #subnav li li a:link, /*#subnav li li a:visited { background-color: #fff; border: 1px solid #ffffff; border-top-width: 0; color: #8f8f8f; font-size: 17px; padding: 5px 10px; position: relative; text-transform: uppercase; width: 138px; }*/ #subnav li li a:hover, #subnav li li a:active { color: #d89ea2; } #subnav li ul { height: auto; left: -9999px; position: absolute; width: 160px; z-index: 9999; } #subnav li ul a { width: 140px; } #subnav li ul ul { margin: -33px 0 0 159px; } #subnav li:hover ul, #subnav li.sfHover ul { left: auto; } /* Inner ------------------------------------------------------------ */ #inner { overflow: hidden; padding: 20px 25px; /*width: 950px;*/ border-left: 2px solid #d89ea2; border-right: 2px solid #d89ea2; background: #ffffff; } /* Breadcrumb ------------------------------------------------------------ */ .breadcrumb { margin: 0 0 30px; padding: 5px 10px; } /* Taxonomy Description ------------------------------------------------------------ */ .taxonomy-description { margin: 0 0 30px; padding: 10px; } /* Content ------------------------------------------------------------ */ #content .widget-wrap { margin: 0 0 20px; overflow: hidden; } #content { float: left; width: 775px; } .sidebar-content #content { float: right; } .full-width-content #content { width: 1060px; } blockquote { margin: 5px 15px 15px; padding: 10px 20px 0 15px; } .post { margin: 0 0 40px; } .home .post { margin: 0 0 20px; } .entry-content { overflow: hidden; } .entry-content p { padding: 0 0 15px; } .clear { clear: both; } .clear-line { border-bottom: 1px solid #ddd; clear: both; margin: 0 0 15px; } /* Column Classes ------------------------------------------------------------ */ .five-sixths, .four-fifths, .four-sixths, .one-fifth, .one-fourth, .one-half, .one-sixth, .one-third, .three-fifths, .three-fourths, .three-sixths, .two-fifths, .two-fourths, .two-sixths, .two-thirds { float: left; margin: 0 0 20px; padding-left: 3%; } .one-half, .three-sixths, .two-fourths { width: 48%; } .one-third, .two-sixths { width: 31%; } .four-sixths, .two-thirds { width: 65%; } .one-fourth { width: 22.5%; } .three-fourths { width: 73.5%; } .one-fifth { width: 17.4%; } .two-fifths { width: 37.8%; } .three-fifths { width: 58.2%; } .four-fifths { width: 78.6%; } .one-sixth { width: 14%; } .five-sixths { width: 82%; } .first { clear: both; padding-left: 0; } /* Featured Post Grid ------------------------------------------------------------ */ .genesis-grid-even { float: right; padding: 0 0 15px; width: 48%; } .genesis-grid-odd { clear: both; float: left; padding: 0 0 15px; width: 48%; } .genesis-grid-even, .genesis-grid-odd { margin: 0 0 20px; } /* Headlines ------------------------------------------------------------ */ h1, h2, h2 a, h3, h4, h5, h6 { color: #d89ea2; font-family: "Century Gothic", Georgia, Times, serif; } h1, h2, h2 a, h2 a:visited { color: #d89ea2; font-size: 20px; } .page h1, .post h1, .archive h2 { /*font-family: 'Clicker Script', cursive;*/ font-size:24px; /*background: #dddddd url(images/headline-post.png) no-repeat left;*/ background: #fffffff; margin: 0 -30px 10px -30px; padding: 7px 0 7px 30px; } .sidebar-content .page h1, .sidebar-content .post h1 { margin: 0 -30px 10px 0; } .home #content h2 { /*font-family: 'Clicker Script', cursive;*/ font-size: 24px; /*background: #dddddd url(images/headline-post-1.png) no-repeat left;*/ background: #ffffff; /*height: 34px;*/ margin: 0 -30px 10px -30px; /*padding: 13px 0 0 20px;*/ padding: 7px 0 7px 30px; } .home.sidebar-content #content h2 { margin: 0 -30px 10px 0; } .home #content .category-category-1 h2 { /*background: #dddddd url(images/headline-post-1.png) no-repeat left;*/ background: #ffffff; } .home #content .category-category-2 h2 { /*background: #ffffff url(images/headline-post-2.png) no-repeat left;*/ background: #ffffff; } .home #content .category-category-3 h2 { /*background: #ffffff url(images/headline-post-3.png) no-repeat left;*/ background: #ffffff; } .home #content .category-category-4 h2 { /*background: #ffffff url(images/headline-post-4.png) no-repeat left;*/ background: #ffffff; } .home #content .category-category-5 h2 { /*background: #ffffff url(images/headline-post-5.png) no-repeat left;*/ background: #ffffff; } .home #content h2 a, .home #content h2 a:visited { /*font-family: 'Clicker Script', cursive;*/ font-size: 24px; color: #d89ea2; /*font-size: 20px; line-height: 24px;*/ } .home #content h2 a:hover { color: #d89ea2; } h2 a:hover, #footer-widgets .widget-area h2 a:hover { color: #888; text-decoration: none; } #footer-widgets .widget-area h2 a, #footer-widgets .widget-area h2 a:visited { color: #d89ea2; font-size: 16px; line-height: 24px; text-transform: uppercase; } h3 { font-size: 18px; } h4 { font-size: 16px; } .home #content h4 { margin: 0 0 10px; } .widget-area h4 { /*background-color: #f5f5f5;*/ color: #8f8f8f; font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: normal; margin: 0 0 10px; padding: 5px 5px 5px 10px; text-transform: uppercase; text-align: center; border-bottom: 1px solid #8f8f8f; } #footer-widgets .widget-area h4 { background: none; /*border-bottom: 1px solid #fff;*/ /*font-size: 20px;*/ /*font-weight: normal;*/ /*margin: 0 0 5px;*/ /*padding: 0 0 5px;*/ /*text-transform: none;*/ border-bottom: 1px solid #8f8f8f; color: #8f8f8f; font-size: 20px; font-weight: normal; margin: 0 0 10px; padding: 5px 5px 5px 10px; text-align: center; text-transform: uppercase; font-family: 'Oswald', sans-serif; } h5 { font-size: 14px; } h6 { font-size: 12px; } /* Unordered / Ordered Lists ------------------------------------------------------------ */ .entry-content ol, .entry-content ul { margin: 0; padding: 0 0 15px; } .entry-content ol { margin: 0 0 0 30px; } .archive-page ul li, .entry-content ul li { list-style-type: square; margin: 0 0 0 25px; padding: 0; } .entry-content .post ol li, .entry-content .page ol li { margin: 0 0 0 25px; } .archive-page ul li, .entry-content .post ul li, .entry-content .page ul li { list-style-type: square; } .archive-page ul ul, .entry-content ul ul, .entry-content ol ol { padding: 0; } /* Post Info ------------------------------------------------------------ */ .post-info { font-size: 11px; margin: 5px 0 10px; text-transform: uppercase; } .single .post-info { margin: 5px 0 15px; } /* Post Meta ------------------------------------------------------------ */ .post-meta { border-top: 1px solid #ddd; clear: both; font-size: 11px; padding: 5px 0 0; text-transform: uppercase; } /* Author Box ------------------------------------------------------------ */ .author-box { margin: 0 0 40px; padding: 10px; overflow: hidden; } /* Sticky Posts ------------------------------------------------------------ */ .sticky { margin: 0 0 40px; padding: 10px; } /* Archive Page ------------------------------------------------------------ */ .archive-page { float: left; padding: 20px 0; width: 50%; } /* Post Icons ------------------------------------------------------------ */ .post-comments, .tags { padding: 0 0 0 2px; } /* Images ------------------------------------------------------------ */ img { max-width: 100% } img.alignleft, img.alignright, .alignleft img, .alignright img { max-width: none; } .avatar, .featuredpage img, .featuredpost img, .post-image { background-color: #fff; border: 1px solid #ddd; padding: 4px; } #content .featuredpage img, #content .featuredpost img { padding: 9px; } #content .featuredpage a img:hover, #content .featuredpost a img:hover { background-color: #f5f5f5; } .author-box .avatar { float: left; margin: 0 10px 0 0; } .post-image { margin: 0 10px 10px 0; } .comment-list li .avatar { background-color: #fff; float: left; height: 35px; margin: 0 5px 0 0; padding: 4px; width: 35px; } img.centered, .aligncenter { display: block; margin: 0 auto 10px; } img.alignnone { display: inline; margin: 0 0 10px; } img.alignleft { display: inline; margin: 0 10px 10px 0; } img.alignright { display: inline; margin: 0 0 10px 10px; } .alignleft { /*float: left;*/ margin: 0 10px 0 0; } .alignright { float: right; margin: 0 0 0 10px; } .wp-caption { padding: 5px 0 0 1px; text-align: center; } p.wp-caption-text { font-size: 11px; line-height: 12px; padding: 5px 0; } .wp-smiley, .wp-wink { border: none; float: none; } /* Post Navigation ------------------------------------------------------------ */ .navigation { overflow: hidden; padding: 20px 0; width: 100%; } .navigation li { display: inline; } .navigation li a, .navigation li.disabled, .navigation li a:hover, .navigation li.active a { border: 1px solid #ddd; padding: 5px 8px; } .navigation li a:hover, .navigation li.active a { background-color: #f5f5f5; } /* Primary / Secondary Sidebars ------------------------------------------------------------ */ #sidebar { /*border-left: 2px solid #d89ea2;*/ background: #ffffff; display: inline; float: right; font-size: 13px; line-height: 20px; margin-right: -10px; /*padding-left: 10px;*/ width: 330px; } .sidebar-split-left { display: inline; float: left; width: 165px; } .sidebar-split-right { background: #ffffff; display: inline; float: right; width: 160px; } .sidebar-split-bottom { background: #ffffff; clear: both; width: 350px; } .sidebar-content #sidebar { background: #ffffff; float: left; } #sidebar .widget { margin: 0 0 20px; overflow: hidden; border: 1px solid #d89ea2; padding: 5px; background: #ffffff; } #sidebar img { margin: 0 0 8px; } #sidebar p { font-size: 12px; line-height: 20px; padding: 0; } .widget-area ol ol, .widget-area ul ul { margin: 0 0 0 15px; } .widget-area ul li { border-bottom: 1px solid #ddd; font-family: "Century Gothic", Georgia, Times, serif; list-style-type: none; margin: 0 0 6px 2px; padding: 0 0 6px; word-wrap: break-word; } .widget-area li a, .widget-area li a:visited { color: #d89ea2; text-decoration: none; } .widget-area li a:hover { color: #888; } /* Dropdowns ------------------------------------------------------------ */ #cat, .widget_archive select { display: inline; font-size: 12px; padding: 3px; width: 100%; } /* Featured Page / Post ------------------------------------------------------------ */ .featuredpage, .featuredpost { clear: both; margin: 0; overflow: hidden; } .featuredpage .page, .featuredpost .post { border-bottom: 1px solid #fff; margin: 0 0 5px; overflow: hidden; padding: 5px 0 0; } .home #content .featuredpage .page, .home #content .featuredpost .post { border-bottom: none; float: left; margin: 0 10px 0 0; padding: 0; } #sidebar .featuredpage .page, #sidebar .featuredpost .post { margin: 0; padding: 0; } .more-from-category { padding: 0 10px; } /* User Profile ------------------------------------------------------------ */ .user-profile { overflow: hidden; } .user-profile p { padding: 10px 10px 0; } .user-profile .posts_link { padding: 0 0 0 10px; } /* Buttons ------------------------------------------------------------ */ div.gform_footer input.button, .enews #subbutton, .reply a, .reply a:visited, .searchsubmit, #submit { background-color: #888; border: 1px solid #888; color: #fff; cursor: pointer; font-family: "Century Gothic", Georgia, Times, serif; font-size: 12px; font-weight: normal; padding: 4px 5px; text-decoration: none; text-transform: uppercase; } .reply a, .reply a:visited { padding: 3px 5px 2px; } div.gform_footer input.button:hover, .enews #subbutton:hover, .reply a:hover, .searchsubmit:hover, #submit:hover { border: 1px solid #555; background-color: #555; color: #fff; text-decoration: none; } /* Search Form ------------------------------------------------------------ */ #header .searchform { float: right; padding: 40px 0 0; } #nav .searchform { float: right; } .s { font-family: "Century Gothic", Georgia, Times, serif; font-size: 12px; margin: 5px 2px 0 0; padding: 5px 0 5px 5px; width: 220px; } #nav .s { margin: 5px -2px 0 0; } /* eNews and Update Widget ------------------------------------------------------------ */ .enews p { padding: 10px 10px 0; } .enews #subscribe { padding: 0 0 0 10px; } .enews #subbox { font-family: "Century Gothic", Georgia, Times, serif; font-size: 12px; margin: 5px 5px 0 0; padding: 4px 0 4px 5px; width: 230px; } /* Calendar Widget ------------------------------------------------------------ */ #wp-calendar { width: 100%; } #wp-calendar caption { font-size: 12px; font-style: italic; padding: 2px 5px 0 0; text-align: right; } #wp-calendar thead { background-color: #f5f5f5; font-weight: bold; margin: 10px 0 0; } #wp-calendar td { background-color: #f5f5f5; padding: 2px; text-align: center; } /* Footer Widgets ------------------------------------------------------------ */ #footer-widgets { background-color: #ffffff; border-left: 2px solid #d89ea2; border-right: 2px solid #d89ea2; clear: both; font-size: 18px; /*line-height: 20px;*/ overflow: hidden; padding: 15px 0 0; /*width: 1200px;*/ } #footer-widgets .wrap { margin: 0 auto; width: 1200px; border-top: 2px solid #d89ea2; border-bottom: 2px solid #d89ea2; padding-left: 15px; } #footer-widgets p { font-size: 12px; font-weight: normal; line-height: 20px; margin: 0; padding: 0 0 10px; } #footer-widgets a, #footer-widgets a:visited { color: #d89ea2; text-decoration: none; } #footer-widgets a:hover { color: #555; text-decoration: none; } #footer-widgets ul { list-style-type: none; margin: 0 0 15px; padding: 0; } #footer-widgets ul li { border-bottom: 1px solid #fff; background: none; list-style-type: none; margin: 0 0 5px; padding: 0 0 5px; } .footer-widgets-1, .footer-widgets-2 { width: 450px; float: left; margin: 0; padding: 0 0 10px; } .footer-widgets-2 { float: right; } .footer-widgets-3 { clear: both; padding: 5px 0 0; width: 1100px; } /* Footer ------------------------------------------------------------ */ #footer { background-color: #ffffff; border-bottom: 2px solid #d89ea2; border-left: 2px solid #d89ea2; border-right: 2px solid #d89ea2; clear: both; overflow: hidden; padding: 7px 0 5px; text-transform: lowercase; width: 1200px; } #footer p { color: #555; font-family: "Century Gothic", Georgia, Times, serif; font-size: 13px; } #footer a, #footer a:visited { color: #555; } #footer .gototop { float: left; padding: 0 0 0 12px; width: 200px; } #footer .creds { float: right; padding: 0 12px 0 0; text-align: right; width: 730px; } /* Comments ------------------------------------------------------------ */ #comments, #respond { margin: 0 0 20px; overflow: hidden; } #author, #comment, #email, #url { font-size: 12px; margin: 10px 5px 0 0; padding: 5px; width: 250px; } #comment { height: 150px; margin: 10px 0; width: 98%; } .ping-list { margin: 0 0 40px; } .comment-list ol, .ping-list ol { margin: 0; padding: 10px; } .comment-list li, .ping-list li { font-weight: bold; list-style: none; margin: 10px 0 0; padding: 10px; } .comment-list li ul li { list-style-type: none; } .comment-list p, .ping-list p { font-weight: normal; margin: 10px 5px 10px 0; padding: 0; text-transform: none; } .comment-list ul.children { margin-top: 20px; } .comment-list ul.children li.comment { background: #fff; } .comment-list cite, .ping-list cite { font-style: normal; font-weight: bold; } .commentmetadata { font-weight:normal; } .comment-author { background: #e5e5e5; font-size: 12px; font-weight: bold; padding: 8px 10px 0; } .comment-meta { background: #e5e5e5; font-size: 12px; padding: 0 10px 8px; } .nocomments { text-align: center; } #comments .navigation { display: block; padding: 0; } .thread-alt, .thread-even { background: #f5f5f5; } .alt, .depth-1, .even { border: 1px solid #ddd; } /* Gravity Forms ------------------------------------------------------------ */ div.gform_wrapper input, div.gform_wrapper select, div.gform_wrapper textarea { color: #000000; font-family: "Century Gothic", Georgia, Times, serif; font-size: 12px; padding: 4px 5px !important; } div.gform_footer input.button { color: #fff; } div.gform_wrapper .ginput_complex label { font-size: 12px; } div.gform_wrapper li, div.gform_wrapper form li { margin: 0 0 10px; } div.gform_wrapper .gform_footer { border: none; margin: 0; padding: 0; } /* Genesis Slider ------------------------------------------------------------ */ #genesis-slider { background-color: #fff; border: 2px solid #d89ea2; margin: 0 auto; padding: 5px; } .genesis-slider-wrap { clear: both; display: block; float: left; margin: 0; padding: 0; position: relative; z-index: 1; } #jFlowSlide { clear: both; display: inline-block; float: left; margin: 0; padding: 0; position: absolute; z-index: 1; } #jFlowSlide img { float: left; margin: 0; padding: 0; position: absolute; z-index: 1; } #slides { float: left; margin: 0; overflow: hidden; padding: 0; position: absolute; z-index: 1; } .slide-excerpt { background-color: #fff; filter: alpha(opacity=80); display: block; margin: 10px; opacity: 0.8; padding: 0; position: absolute; z-index: 8; } html > body .slide-excerpt-border { background: none; /*border: 1px solid #ddd;*/ display: inline; float: left; margin: 10px; padding: 14px; position: relative; z-index: 8; } .slider-next, .slider-previous { background: url(images/slider-previous.png); clear: both; cursor: pointer; display: block; height: 60px; margin: 0; overflow: hidden; position: absolute; width: 30px; z-index: 9; } .slider-next, .slider-next:hover { background: url(images/slider-next.png); right: 0; } .slider-previous, .slider-previous:hover { background: url(images/slider-previous.png); left: 0; } .slider-next:hover, .slider-previous:hover { background-position: -30px 0; } /* Sticky Secondary nav */ .nav-secondary.fix { position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; max-width: 100%; overflow: visible; /*background: rgba(255, 255, 255, 0.92);*/ } .admin-bar .nav-secondary.fix { top: 28px; }
<?php
/** Start the engine **/
require_once( TEMPLATEPATH . '/lib/init.php' );/** Child theme (do not remove) */
define( 'CHILD_THEME_NAME', 'Blissful Theme' );
define( 'CHILD_THEME_URL', 'http://www.studiopress.com/themes/blissful' );/** Add support for custom background */
add_custom_background();/** Add support for custom header */
add_theme_support( 'genesis-custom-header', array( 'width' => 1100, 'height' => 200 ) );/** Unregister 3-column site layouts */
genesis_unregister_layout( 'content-sidebar-sidebar' );
genesis_unregister_layout( 'sidebar-sidebar-content' );
genesis_unregister_layout( 'sidebar-content-sidebar' );/** Add support for 3-column footer widgets */
add_theme_support( 'genesis-footer-widgets', 3 );/** Add new image sizes */
add_image_size( 'mini-thumbnail', 75, 75, TRUE );
add_image_size( 'small-thumbnail', 110, 110, TRUE );
add_image_size( 'large-preview', 700, 350, TRUE );/** Reposition the Primary Navigation */
/**remove_action( 'genesis_after_header', 'genesis_do_nav' );*/
/**add_action( 'genesis_before_header', 'genesis_do_nav' );*/add_filter( 'genesis_post_info', 'blissful_post_info_filter' );
/**
* Customize the post info function
*/
function blissful_post_info_filter( $post_info ) {
return g_ent( '[post_date] by [post_author_posts_link] · [post_comments] [post_edit]' );
}add_filter( 'genesis_post_meta', 'blissful_post_meta_filter' );
/**
* Customize the post meta function
*/
function blissful_post_meta_filter($post_meta) {
return g_ent( '[post_categories] · [post_tags]' );
}add_filter( 'genesis_author_box_gravatar_size', 'blissful_gravatar_size' );
/**
* Modify the size of the Gravatar in the author box
*/
function blissful_gravatar_size( $size ) {
return 78;
}add_action( 'genesis_after_sidebar_widget_area', 'blissful_split_sidebars' );
/**
* Add split sidebars underneath the primary sidebar
*/
function blissful_split_sidebars() {
foreach ( array( 'sidebar-split-left', 'sidebar-split-right', 'sidebar-split-bottom' ) as $area ) {
echo '<div class="' . $area . '">';
dynamic_sidebar( $area );
echo '</div><!-- end #' . $area . '-->';
}
}add_filter( 'genesis_footer_backtotop_text', 'blissful_footer_backtotop_filter' );
/**
* Customizes go to top text
*/
function blissful_footer_backtotop_filter( $backtotop ) {
return '[footer_backtotop text="Top of Page"]';
}/** Register widget areas */
genesis_register_sidebar( array(
'id' => 'home-top',
'name' => __( 'Home Top', 'blissful' ),
'description' => __( 'This is the top section of the homepage', 'blissful' ),
) );
genesis_register_sidebar( array(
'id' => 'sidebar-split-left',
'name' => __( 'Sidebar Split Left', 'blissful' ),
'description' => __( 'This is the left side of the split sidebar', 'blissful' ),
) );
genesis_register_sidebar( array(
'id' => 'sidebar-split-right',
'name' => __( 'Sidebar Split Right', 'blissful' ),
'description' => __( 'This is the right side of the split sidebar', 'blissful' ),
) );
genesis_register_sidebar( array(
'id' => 'sidebar-split-bottom',
'name' => __( 'Sidebar Split Bottom', 'blissful' ),
'description' => __( 'This is the bottom of the split sidebar', 'blissful' ),
) );add_action( 'init' , 'as247_remove_slider_styles' , 15 );
function as247_remove_slider_styles() {
remove_action( 'wp_print_styles' , 'genesis_slider_styles' );
}/** Add after post ad section */
add_action( 'genesis_after_post_content', 'blissful_after_post_signature', 9 );
function blissful_after_post_signature() {
if ( is_single() ) {
echo '<div class="after-post-signature">';
echo '<p>'; '</p>';
echo '</div><!-- end .after-post-signature -->';
}
}//* Enqueue sticky menu script
add_action( 'wp_enqueue_scripts', 'custom_enqueue_script' );
function custom_enqueue_script() {
wp_enqueue_script( 'sticky-nav-sub', get_bloginfo( 'stylesheet_directory' ) . '/js/sticky-nav-sub.js', array( 'jquery' ), '', true );
}and this is in blissful/js/sticky-menu.js
jQuery(document).ready(function($) {
var $filter = $('.nav-secondary');
var $filterSpacer = $('<div />', {
"class": "filter-drop-spacer",
"height": $filter.outerHeight()
});if ($filter.size())
{
$(window).scroll(function ()
{
if (!$filter.hasClass('fix') && $(window).scrollTop() > $filter.offset().top)
{
$filter.before($filterSpacer);
$filter.addClass("fix");
}
else if ($filter.hasClass('fix') && $(window).scrollTop() < $filterSpacer.offset().top)
{
$filter.removeClass("fix");
$filterSpacer.remove();
}
});
}});
November 14, 2013 at 10:42 am #72958nutsandboltsMemberOkay. It looks like you've got a combination of the two tutorials going on. Your functions.php is calling /js/sticky-nav-sub.js but your file is js/sticky-menu.js - change one of those so they both match and I bet it will start working. (Hope so, anyway!)
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 14, 2013 at 10:52 am #72961krystynParticipantI fixed the name of the js file back to stick-nav-sub.js (don't how I missed that one!)...but bummer, it's still not working. Grr.
(So, I left functions.php calling /js/sticky-nav-sub.js)
November 14, 2013 at 11:09 am #72966nutsandboltsMemberI think the issue is the use of .nav-secondary since you aren't using that class anywhere on your menu. In the example Sridhar posted, he is using one of the newer HTML5 child themes that assigns a nav class to the menus. Since you're using an older XHTML theme, you don't have that class assigned.
I would try .subnav or maybe .menu-bottom-navigation to see if those work.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 14, 2013 at 11:12 am #72967krystynParticipantThat was the first thing I tried...swapping for .subnav....didn't try .menu-bottom-navigation, though, so I'll try those.
That was my first thought, though because I didn't have .nav-secondary anywhere in my theme that it wouldn't work.
November 14, 2013 at 11:26 am #72969krystynParticipantYep, changed them all to .subnav and no luck. (css and the js file)...guess I'l try .menu-bottom-navigation.
November 14, 2013 at 11:30 am #72970krystynParticipantNo luck with .menu-bottom-navigation.
Not sure what else to do/try.
November 14, 2013 at 11:39 am #72973nutsandboltsMemberI really think it's XHTML versus HTML5. I just looked at two sites where I'm using exactly what you are, but both of them are HTML5. Have you considered converting the theme? http://cobaltapps.com/genesis-xhtml-to-html5-css-converter/
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 14, 2013 at 11:40 am #72974krystynParticipantNo....yikes. I haven't done that yet. I guess that's on my list to try this afternoon. Thanks.
November 19, 2013 at 11:30 pm #74328pgapg2MemberThese tips have been great, but I was wondering what I could have done wrong (I also followed the SP tutorial but didn't see).
- Here's my CSS: http://therantinglatina.com/wp-content/themes/blissful/style.css >> I didn't make any changes to that yet b/c I wanted to see what it looked like first : ). (Should I edit some things first?)
- And both my .js and functions.php files/additions look exactly like what the tutorial recommended.Help, please? (I've only been on WP for about a month, so I apologize in advance if I haven't seen something that's practically staring at me.) Thanks in advance!!
November 19, 2013 at 11:32 pm #74330nutsandboltsMemberBlissful is an XHTML child theme - most of these tutorials are written for the newer HTML5 themes. That's probably why you're not having much luck following the tutorials.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 20, 2013 at 7:31 am #74355krystynParticipantI never got a clear answer re: XHTML vs HTML5 from Studiopress.
But, I was told about a plugin: http://wordpress.org/plugins/genesis-sticky-menu/ and it seems to be working for me.
November 22, 2013 at 6:15 pm #75104pgapg2MemberAhhh I see. Thanks, @nutsandbolts!! And I got that plugin, too, @krystyn, but it gets shifted to the very left of my blog and Idk how to fix that :/..
November 23, 2013 at 3:30 pm #75294December 15, 2013 at 1:48 pm #79270pgapg2MemberI'm back : ).. I had worked with those tutorials and the ones on http://sridharkatakam.com but to no avail. I reactivated my Genesis Sticky Header plugin, but although it does what it's supposed to, I'd ideally want it to be centered--or to at least not go all the way to the left.
Here's its file:
<?php
/*
Plugin Name: Genesis sticky menu
Plugin URI: http://iniyan.in/plugins/genesis-sticky-menu/
Description: This plugin adds a sticky menu to Genesis powered site. Requires the Genesis framework.
Version: 1.0.0
Author: Iniyan
Author URI: http://iniyan.in
*/
/** Define our constants */
define( 'GSM_SETTINGS_FIELD', 'gsm-settings' );
define( 'GSM_PLUGIN_DIR', dirname( __FILE__ ) );
register_activation_hook( __FILE__, 'gsm_activation' );/**
* This function runs on plugin activation. It checks to make sure Genesis
* or a Genesis child theme is active. If not, it deactivates itself.
*
* @since 0.1.0
*/
function gsm_activation() {if ( 'genesis' != basename( TEMPLATEPATH ) ) {
gsm_deactivate( '1.8.0', '3.3' );
}
}
/**
* Deactivate GS Design.
*
*
* @since 1.8.0.2
*/function gsm_deactivate( $genesis_version = '1.8.0', $wp_version = '3.3' ) {
deactivate_plugins( plugin_basename( __FILE__ ) );
wp_die( sprintf( __( 'Sorry, you cannot run Genesis Sticky Menu without WordPress %s and Genesis %s or greater.', 'gsdesign' ), $wp_version, 'http://mobiuztech.com/', $genesis_version ) );
}add_action( 'genesis_init', 'gsm_init', 20 );
/**
* Load admin menu and helper functions. Hooked to
genesis_init
.*
* @since 1.8.0
*/
function gsm_init() {
/** Deactivate if not running Genesis 1.8.0 or greater */if ( ! class_exists( 'Genesis_Admin_Boxes' ) )
add_action( 'admin_init', 'gsm_deactivate', 10, 0 );
/** Admin Menu */
if ( is_admin() )
require_once( GSM_PLUGIN_DIR . '/gsm-design.php' );
/** CSS generator function */
require_once( GSM_PLUGIN_DIR . '/gsm-style.php' );
}
//* enqueue script *//
add_action( 'wp_enqueue_scripts', 'gsm_enqueue_script' );function gsm_enqueue_script() {
wp_enqueue_script( 'sticky-menu', plugins_url( 'js/sticky-menu.js', __FILE__ ), array( 'jquery' ), '', true );
}//*Adding Sticky Menu
add_theme_support ( 'genesis-menus' , array ( 'primary' => 'Primary Navigation Menu' , 'secondary' => 'Secondary Navigation Menu' ,'stickymenu' => 'Genesis Sticky Menu' ) );// Add new navbar
add_action('genesis_before', 'stickymenu');function stickymenu() {
echo '<div id="subnav"><div class="wrap">';
wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_id' => '' , 'menu_class' => 'menu genesis-nav-menu menu-secondary', 'theme_location' => 'stickymenu') );
echo '</div></div>';
}..
How should I change it?? THANKS in advance!! -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.