one page scroller type menu in multipage site

Asked on July 3, 2015 in No Topic.
Answered

Dear

I am a Layer WP user. I love this theme very much because of its convenience and easy control. However, I met a problem.

My site has 4 pages, home, blog and two other pages. In home page, I build it as one page style, so I want to set an one page scroller type menu. After following the method in Layer community, I find that it is successful to scroll in home page but not acessible to the section of home page while I am in another page.

You could try the menu in my site.

http://qnqhq.com/

please help me deal with it.

thank you very much.

Lee

lin96108183 Layers User
Reply
  • Possible Answers to Your Question:

  • 2 Answer(s)
    Answered on August 24, 2015. Best answer

    Previous Answer: how to set One page scroller type menu in application theme
    Doc: How to Create a Single-Scrolling Page with Anchor Links

    You need to be sure that the URL you are entering for each anchor link is the full site url plus the anchor ID. Example:
    http://www.yoursite.com/#layers-widget-1

    This will not reload the page – anchor links simply scroll to the anchor. Note that anchor links should not really be used in combination with interior pages – ie they are meant for single-page navigation, so if you try to visit an anchor url from a different site, it will obviously reload the page like a normal link before jumping to the anchor.

    Vail Joy Layers Team
    Reply
    Answered on August 24, 2015.

    You can make a child theme, and create a simple logic on the Header to pick a menu on my onepage (home, in my case) and other menu on any other page… It worked quite well.

    As I’m using the standard menu layout, I’ve copied the file wp-content/themes/layerswp/partials/header-standard.php to wp-content/themes/mytheme/partials/header-standard.php and the I did the follow change in the code:

    <?php get_template_part( 'partials/header' , 'logo' ); ?>
    <nav class="nav nav-horizontal">
    
    <?php do_action( 'layers_before_header_nav' ); ?>
    <?php
    
    if (is_home() || is_front_page()):
    
    wp_nav_menu(
    
    array( 'theme_location' => LAYERS_THEME_SLUG . '-primary' ,
    
    'container' => FALSE,
    
    'fallback_cb' => 'layers_menu_fallback' )
    
    );
    
    else:
    
    // getting the 'Right Header Menu' as internal menu.
    
    wp_nav_menu(
    
    array( 'theme_location' => LAYERS_THEME_SLUG . '-primary-right' ,
    
    'container' => FALSE,
    
    'fallback_cb' => 'layers_menu_fallback' )
    
    );
    
    endif; ?>
    <?php get_template_part( 'partials/responsive' , 'nav-button' ); ?>
    <?php do_action( 'layers_after_header_nav' ); ?>
    
    </nav>
    

    As I was only using the primary menu, I’ve set the primary-right menu for the other pages menu.
    That way I’ve created a menu with #anchors for the onepage and make another menu with full url for any other one.
    ps.: reminding that in layerswp doc we have a lot of tutorials of how to create a child theme, if you don’t know how to, follow then, then after do this trick.
    I Hope I could help.

    Reply