Brian's Sticky Nav Bar Modification

Community Forums Forums Design Tips and Tricks Brian's Sticky Nav Bar Modification

This topic is: not resolved

Tagged: ,

This topic contains 13 replies, has 4 voices, and was last updated by  updatealan 1 year, 4 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #43140

    lvvvvvl
    Participant
    Post count: 19

    Hey community!,

    I stumbled across Brians Sticky Menu tutorial : http://www.briangardner.com/sticky-menu/ and was hoping to be able to modify it slightly. Instead of a menu, I want to position a subscribe box as well as a couple social buttons (twitter and facebook), something similar to hongkiat.com. I’m using Executive theme and mailchimp. How would I go about doing this?

    Thanks for your time,

    Matthew

    http://lonerwolf.com
    #43161

    updatealan
    Participant
    Post count: 47

    I’m curious to know, as well.

    #43173

    braddalton
    Participant
    Post count: 10217

    You can simply use CSS as well by using the position: fixed declaration:

    Change the nav-menu class to the class for whatever you want to apply a fixed position to.

    Code not displaying? Grab it on Github.


    #43258

    updatealan
    Participant
    Post count: 47

    While I’m interested in using the Sticky Nav Bar Modification for the same purpose as Matthew is looking to use it, I would, first, like to use it for the ‘Secondary Navigation’ Theme Location (above the header) of my AgentPress 2.0 Child Theme.

    I believed I’ve followed Brian’s instructions here: http://www.briangardner.com/sticky-menu, however, the (‘Secondary Navigation’) menu is not displaying. I did skip the step of creating this within a ‘genesis-sample’ theme folder, and just went ahead and created it in the main ‘genesis’ theme folder. The custom menu that I created for this purpose (as instructed) is displaying just fine in the ‘Primary Navigation’ Theme Location (below the header), so it leads me to believe that it’s nothing more than a formatting issue. Perhaps, it has something to do with the ‘CSS Classes option.’ I’m stumped. If you follow my link below, you will see what I’m talking about.

    Here is the link to this website which I’m developing for a client:

    http://www.dtconfidential.com/what-we-do/meet-the-team

    Thank you so much!

    #43264

    mmjaeger
    Participant
    Post count: 65
    This reply has been marked as private.
    #43284

    lvvvvvl
    Participant
    Post count: 19

    Hey Brad,

    Thanks for the assistance. Took me a while to work out where to insert the div calling that class (just after the opening <body>). The bar appears at the top, but it doesn’t seem to be using the jquery effect of FadeIn after 200 pixels. It shows as a static bar at the top.

    Also, do I have to use this part of the tutorial:

    `// Reposition the secondary navigation menu
    remove_action( ‘genesis_after_header’, ‘genesis_do_subnav’ );
    add_action( ‘genesis_before’, ‘genesis_do_subnav’ );
    `

    Seeing as I’m not going to to calling or removing any current navigation menus?

    Thanks

    #43288

    braddalton
    Participant
    Post count: 10217

    The way Brian created the sticky menu is one way to do it. The effect is really nice because he uses jQuery and the tutorial is written based on using one child theme. I haven’t used his code on other child themes and prefer to keep it simple using CSS which I have embedded above. I know you can also use this CSS with other elements.

    I did read a tutorial about how to do what you want recently and linked to it in another post.

    You’ll find this tutorial includes links to several others which use different methods to create the sticky sidebar effect which may help you. http://css-tricks.com/scrollfollow-sidebar/

    An easier way would be to simply install a plugin which makes a widget sticky http://wordpress.org/plugins/q2w3-fixed-widget/


    #43298

    updatealan
    Participant
    Post count: 47

    Hey Brad,

    Can you offer any insight on my situation? The AgentPress 2.0 Child Theme already has the Secondary Navigation code. Below is the code from my functions.php file.

    Best,
    Alan

    For some odd reason, this page is not allowing me to paste the beginning of the code inside of the ‘code’ tags. Here is the way it begins…

    (…and, it continues from there…)

    ` ‘Gray’, ‘agentpress-green’ => ‘Green’, ‘agentpress-red’ => ‘Red’, ‘agentpress-tan’ => ‘Tan’ ) );

    /** Child theme (do not remove) */

    define( ‘CHILD_THEME_NAME’, ‘AgentPress Theme’ );

    define( ‘CHILD_THEME_URL’, ‘http://www.studiopress.com/themes/agentpress’ );

    $content_width = apply_filters( ‘content_width’, 600, 430, 920 );

    /** Add new image sizes */

    add_image_size( ‘communities’, 125, 80, TRUE );

    add_image_size( ‘featured’, 100, 100, TRUE );

    add_image_size( ‘properties’, 280, 200, TRUE );

    add_image_size( ‘slider’, 590, 300, TRUE );

    /** Add support for structural wraps */

    add_theme_support( ‘genesis-structural-wraps’, array( ‘header’, ‘nav’, ‘subnav’, ‘inner’, ‘welcome’, ‘footer-widgets’, ‘footer’, ‘disclaimer’ ) );

    /** Add suport for custom background */

    add_custom_background();

    /** Add support for custom header */

    add_theme_support( ‘genesis-custom-header’, array( ‘width’ => 960, ‘height’ => 125, ‘textcolor’ => ’333′ ) );

    /** Enqueue sticky menu script */
    add_action( ‘wp_enqueue_scripts’, ‘custom_enqueue_script’ );
    function custom_enqueue_script() {
    wp_enqueue_script( ‘sticky-menu’, get_stylesheet_directory_uri() . ‘/js/sticky-menu.js’, array( ‘jquery’ ), ”, true );
    }

    /** Reposition the secondary navigation */

    remove_action( ‘genesis_after_header’, ‘genesis_do_subnav’ );

    add_action( ‘genesis_before_header’, ‘genesis_do_subnav’ );

    /** Add top search after header */

    add_action( ‘genesis_after_header’, ‘agentpress_top_search’ );

    /**

    * Add top search widget area on Genesis after header hook

    *

    */

    function agentpress_top_search() {

    if ( !is_front_page() && is_active_sidebar( ‘top-search’ ) ) {

    echo ”;

    dynamic_sidebar( ‘top-search’ );

    echo ‘‘;

    }

    }

    /** Add support for 4 footer widgets */

    add_theme_support( ‘genesis-footer-widgets’, 4 );

    /** Add disclaimer below footer */

    add_action( ‘genesis_after’, ‘agentpress_disclaimer’ );

    /**

    * Add disclaimer widget area on Genesis after hook

    *

    */

    function agentpress_disclaimer() {

    if ( is_active_sidebar( ‘disclaimer’ ) ) {

    echo ”;

    genesis_structural_wrap( ‘disclaimer’ );

    dynamic_sidebar( ‘disclaimer’ );

    genesis_structural_wrap( ‘disclaimer’, ‘close’ );

    echo ‘‘;

    }

    }

    add_filter( ‘agentpress_property_details’, ‘agentpress_property_details_filter’ );

    /**

    * Filter the property details array.

    *

    */

    function agentpress_property_details_filter( $details ) {

    $details['col1'] = array(

    __( ‘Price:’, ‘apl’ ) => ‘_listing_price’,

    __( ‘Address:’, ‘apl’ ) => ‘_listing_address’,

    __( ‘City:’, ‘apl’ ) => ‘_listing_city’,

    __( ‘State:’, ‘apl’ ) => ‘_listing_state’,

    __( ‘ZIP:’, ‘apl’ ) => ‘_listing_zip’

    );

    $details['col2'] = array(

    __( ‘MLS #:’, ‘apl’ ) => ‘_listing_mls’,

    __( ‘Square Feet:’, ‘apl’ ) => ‘_listing_sqft’,

    __( ‘Bedrooms:’, ‘apl’ ) => ‘_listing_bedrooms’,

    __( ‘Bathrooms:’, ‘apl’ ) => ‘_listing_bathrooms’,

    __( ‘Basement:’, ‘apl’ ) => ‘_listing_basement’

    );

    return $details;

    }

    add_filter( ‘agentpress_featured_listings_widget_loop’, ‘agentpress_featured_listings_widget_loop_filter’ );

    /**

    * Filter the loop output of the AgentPress Featured Listings Widget.

    *

    */

    function agentpress_featured_listings_widget_loop_filter( $loop ) {

    $loop = ”; /** initialze the $loop variable */

    $loop .= sprintf( ‘%s‘, get_permalink(), genesis_get_image( array( ‘size’ => ‘properties’ ) ) );

    $loop .= sprintf( ‘%s’, genesis_get_custom_field(‘_listing_price’) );

    $custom_text = genesis_get_custom_field( ‘_listing_text’ );

    if( strlen( $custom_text ) )

    $loop .= sprintf( ‘%s’, esc_html( $custom_text ) );

    $loop .= sprintf( ‘%s’, genesis_get_custom_field(‘_listing_address’) );

    $loop .= sprintf( ‘%s %s, %s’, genesis_get_custom_field(‘_listing_city’), genesis_get_custom_field(‘_listing_state’), genesis_get_custom_field(‘_listing_zip’) );

    $loop .= sprintf( ‘%s‘, get_permalink(), __( ‘View Listing’, ‘apl’ ) );

    return $loop;

    }

    /** Register widget areas */

    genesis_register_sidebar( array(

    ‘id’ => ‘top-search’,

    ‘name’ => __( ‘Top Search’, ‘agentpress’ ),

    ‘description’ => __( ‘This is the top search section.’, ‘agentpress’ ),

    ) );

    genesis_register_sidebar( array(

    ‘id’ => ‘slider’,

    ‘name’ => __( ‘Slider’, ‘agentpress’ ),

    ‘description’ => __( ‘This is the slider section.’, ‘agentpress’ ),

    ) );

    genesis_register_sidebar( array(

    ‘id’ => ‘property-search’,

    ‘name’ => __( ‘Property Search’, ‘agentpress’ ),

    ‘description’ => __( ‘This is the property search section.’, ‘agentpress’ ),

    ) );

    genesis_register_sidebar( array(

    ‘id’ => ‘welcome’,

    ‘name’ => __( ‘Welcome’, ‘agentpress’ ),

    ‘description’ => __( ‘This is the welcome section.’, ‘agentpress’ ),

    ) );

    genesis_register_sidebar( array(

    ‘id’ => ‘properties’,

    ‘name’ => __( ‘Properties’, ‘agentpress’ ),

    ‘description’ => __( ‘This is the properties section.’, ‘agentpress’ ),

    ) );

    genesis_register_sidebar( array(

    ‘id’ => ‘communities’,

    ‘name’ => __( ‘Communities’, ‘agentpress’ ),

    ‘description’ => __( ‘This is the communities section.’, ‘agentpress’ ),

    ) );

    genesis_register_sidebar( array(

    ‘id’ => ‘featured-bottom-left’,

    ‘name’ => __( ‘Featured Bottom Left’, ‘agentpress’ ),

    ‘description’ => __( ‘This is the featured bottom left section.’, ‘agentpress’ ),

    ) );

    genesis_register_sidebar( array(

    ‘id’ => ‘featured-bottom-right’,

    ‘name’ => __( ‘Featured Bottom Right’, ‘agentpress’ ),

    ‘description’ => __( ‘This is the featured bottom right section.’, ‘agentpress’ ),

    ) );

    genesis_register_sidebar( array(

    ‘id’ => ‘disclaimer’,

    ‘name’ => __( ‘Disclaimer’, ‘agentpress’ ),

    ‘description’ => __( ‘This is the disclaimer section.’, ‘agentpress’ ),

    ) );`

    • This reply was modified 1 year, 4 months ago by  updatealan.
    • This reply was modified 1 year, 4 months ago by  updatealan.
    • This reply was modified 1 year, 4 months ago by  updatealan.
    • This reply was modified 1 year, 4 months ago by  updatealan.
    • This reply was modified 1 year, 4 months ago by  updatealan.
    • This reply was modified 1 year, 4 months ago by  updatealan.
    • This reply was modified 1 year, 4 months ago by  updatealan.
    • This reply was modified 1 year, 4 months ago by  updatealan.
    • This reply was modified 1 year, 4 months ago by  updatealan.
    • This reply was modified 1 year, 4 months ago by  updatealan.
    • This reply was modified 1 year, 4 months ago by  updatealan.
    • This reply was modified 1 year, 4 months ago by  updatealan.
    #43306

    braddalton
    Participant
    Post count: 10217

    Sorry but that’s too much code for me to test locally using your theme.

    I can only provide the CSS code to create a sticky menu as another solution to using Brian Gardners method which I have not tested on different themes.


    #43317

    updatealan
    Participant
    Post count: 47

    Ok, thanks.

    #43322

    lvvvvvl
    Participant
    Post count: 19

    Hi Brad,

    Thanks for all this info. I’m trying to use your pure css method of adding the sticky bar at the top, but it seems everything I add (like this mailchimp form I got from the tutorial: http://www.studiosmithson.com/10-quick-and-easy-steps-design-inline-mail-chimp-super-slim-subcribe-form) seems to overlap and align to the left no matter what floating positions or height I give the bar.

    The Q2W3 plugin looks like a good concept, though I’ve unsuccessfully activated it and applied the Fixed setting to two widgets. I believe it might be because the Primary Sidebar of my child theme’s widgets have no id attributes according to this (http://wordpress.org/support/topic/not-working-hopefully-an-easy-fix?replies=4).

    In my functions, my child theme registers all the homepage sidebars:
    `genesis_register_sidebar( array(

    ‘id’ => ‘home-slider’,

    ‘name’ => __( ‘Home – Slider’, ‘executive’ ),

    ‘description’ => __( ‘This is the slider section on the home page.’, ‘executive’ ),

    ) );

    genesis_register_sidebar( array(

    ‘id’ => ‘home-top’,

    ‘name’ => __( ‘Home – Top’, ‘executive’ ),

    ‘description’ => __( ‘This is the top section of the home page.’, ‘executive’ ),

    ) );

    genesis_register_sidebar( array(

    ‘id’ => ‘home-cta’,

    ‘name’ => __( ‘Home – Call To Action’, ‘executive’ ),

    ‘description’ => __( ‘This is the call to action section on the home page.’, ‘executive’ ),

    ) );

    genesis_register_sidebar( array(

    ‘id’ => ‘home-middle’,

    ‘name’ => __( ‘Home – Middle’, ‘executive’ ),

    ‘description’ => __( ‘This is the middle section of the home page.’, ‘executive’ ),

    ) );`

    But there’s no ‘before_widget‘ parameter to change to :

  • Wouldn’t have thought adding a simple nice looking top sticky bar would be so complicated.

#43323

braddalton
Participant
Post count: 10217

You could use a plugin for the sticky bar like Hello Bar.


#43337

lvvvvvl
Participant
Post count: 19

I’ve contemplated that but most bars don’t allow the option of adding custom codes/html like the facebook like button or subscription forms, and the ones that do like HelloBar charge monthly fees for full features.

#43427

updatealan
Participant
Post count: 47

I was able to achieve a sticky menu with the ‘position: fixed’ class, as well as some other tweaks. Thanks for the tip!

http://www.dtconfidential.com/condominium-living/the-viridian

The Hello Bar hasn’t. yet, been tested with my theme.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.