0

I am building a wordpress theme for personal use. I am facing a challenge for the first time and I really don't know how to achieve what I want. The website's header structure is: FIRST LINE: logo / SECOND LINE: custom jquery slider / THIRD LINE: navigation menu. What I want to do: When someone clicks the link to go to a page EXCEPT the homepage then I want the FIRST & SECOND LINE appear to the very top of the page out of the screen and the THIRD LINE will be displayed on the highest area of the screen. Anyone knows anything about how to achieve that?

Sorry for my bad english. Thanks in advance.

4
  • What have you tried? Besides, your explaination is quite confusing, why don't you attach some images to explain what you are trying to achieve? Commented Apr 5, 2013 at 17:32
  • The FIRST & SECOND LINE will be off screen at the top, and will be able to see them only if you scroll up. What I want is when the page loads, the browser jumps at #navigation.
    – ArgGeo
    Commented Apr 5, 2013 at 17:37
  • Adding #navigation at the end of your links absolutely does what you are looking for, given that your navigation menu has an id of navigation. Commented Apr 5, 2013 at 17:40
  • I've tried that and worked but the problem is that the menu will be set from "Custom Menus" by the admin where you simply select what pages you want the menu to include. It wont be with custom links. Is there any function that can do that automatically to all navigation's elements?
    – ArgGeo
    Commented Apr 5, 2013 at 17:45

1 Answer 1

1

To add a custom hash to the end of each URL added through the menu backend is easier said than done.

You could build a custom walker.

Or you could try to hook in the walker_nav_menu_start_el filter and edit just that, perhaps like so[nav-menu-template.php]:

add_filter( 'walker_nav_menu_start_el', 'my_skip_to_nav', 10, 4 );

function my_skip_to_nav( $item_output, $item, $depth, $args ){
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

    $class_names = $value = '';

    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $classes[] = 'menu-item-' . $item->ID;

    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
    $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

    $output .= $indent . '<li' . $id . $value . $class_names .'>';

    $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    // Here happens the magic!
    $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'#navigation"' : '';

    $item_output = $args->before;
    $item_output .= '<a'. $attributes .'>';
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    $item_output .= '</a>';
    $item_output .= $args->after;
    return $item_output;
}

Then again, you perhaps don't want something this complicated, and you can have much simpler solutions using Javascript/jQuery.

Javascript solution

Use jQuery to add your anchor to the navigation links

jQuery(document).ready(function($){

    $('#navigation a').each(function(){
       $(this).attr('href', $(this).attr('href') + '#navigation');
    });

});
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.