- This topic has 13 replies, 4 voices, and was last updated 12 years, 6 months ago by
.
-
Posts
-
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.comYou 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.
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-teamThank you so much!
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
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/
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,
AlanFor 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' ),
) );`
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.
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.
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.
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.
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.