Help Sticky Secondary Navigation Blissful

Community Forums Forums Design Tips and Tricks Help Sticky Secondary Navigation Blissful

This topic is: not resolved

This topic contains 19 replies, has 3 voices, and was last updated by  pgapg2 4 months ago.

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #72550

    krystyn
    Participant
    Post count: 129

    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/
    #72594

    nutsandbolts
    Moderator
    Post count: 2603

    This tutorial has instructions for the secondary nav: http://sridharkatakam.com/how-to-set-up-sticky-header-or-navigation-in-genesis/


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I do Genesis tutorials, design and development, and other fun stuff • Find me on Twitter and Google+

    #72597

    krystyn
    Participant
    Post count: 129

    Thanks @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.

    #72634

    nutsandbolts
    Moderator
    Post count: 2603

    Hmm… 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, Nuts and Bolts Media
    I do Genesis tutorials, design and development, and other fun stuff • Find me on Twitter and Google+

    #72945

    krystyn
    Participant
    Post count: 129

    Yeah, 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.

    #72956

    krystyn
    Participant
    Post count: 129

    I’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();
    }
    });
    }

    });

    #72958

    nutsandbolts
    Moderator
    Post count: 2603

    Okay. 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, Nuts and Bolts Media
    I do Genesis tutorials, design and development, and other fun stuff • Find me on Twitter and Google+

    #72961

    krystyn
    Participant
    Post count: 129

    I 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)

    #72966

    nutsandbolts
    Moderator
    Post count: 2603

    I 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, Nuts and Bolts Media
    I do Genesis tutorials, design and development, and other fun stuff • Find me on Twitter and Google+

    #72967

    krystyn
    Participant
    Post count: 129

    That 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.

    #72969

    krystyn
    Participant
    Post count: 129

    Yep, changed them all to .subnav and no luck. (css and the js file)…guess I’l try .menu-bottom-navigation.

    #72970

    krystyn
    Participant
    Post count: 129

    No luck with .menu-bottom-navigation.

    Not sure what else to do/try.

    #72973

    nutsandbolts
    Moderator
    Post count: 2603

    I 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, Nuts and Bolts Media
    I do Genesis tutorials, design and development, and other fun stuff • Find me on Twitter and Google+

    #72974

    krystyn
    Participant
    Post count: 129

    No….yikes. I haven’t done that yet. I guess that’s on my list to try this afternoon. Thanks.

    #74328

    pgapg2
    Member
    Post count: 10

    These 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!!

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.