• lisid

    (@lisid)


    Hi. I am real amature and I am trying right now for few hours already figured out how to set up Dynamic One Page Navigation. I was using this tutorial

    https://premium.wpmudev.org/blog/twenty-seventeen-wordpress-theme/
    and then second part of the tutorial:
    https://premium.wpmudev.org/blog/five-hacks-twenty-seventeen/#dynamic

    So I created custom menu links using IDs. (“Služby” and “Nabízíme”).

    I download plugin “Custom Code CSS & JS” > “Add custom JS file” > I copy the code from tutorial:

    “/*
    One page nav code
    */

    jQuery( document ).ready(function(){
    /* Add padding and id’s to each front page section */
    jQuery( “h2.entry-title” ).each( function() {
    var panelId = jQuery( this ).html().toLowerCase().replace(/\s+/g, “-“);
    jQuery( this ).wrapInner(function() {
    return “<span style=’padding-top:96px;’ id='” + panelId + “‘></span>”;
    })
    })

    /* Remove navigation link highlighting */
    jQuery(‘#top-menu li’).removeClass(‘current-menu-item current_page_item ‘);

    /* Add highlighting on click */
    jQuery(‘#top-menu li a’).on(‘click’, function(event) {
    jQuery(this).parent().parent().find(‘li’).removeClass(‘current-menu-item’);
    jQuery(this).parent().addClass(‘current-menu-item’);
    });

    /* Check current URL and highlight nav for current page */
    jQuery(‘#top-menu li a’).each( function() {
    var pageUrl = jQuery( location ).attr( ‘href’ );
    var navUrl = jQuery( this ).attr( ‘href’ );
    if ( navUrl == pageUrl ) {
    jQuery( this ).parent().addClass(‘current-menu-item’);
    }
    })
    })”

    Did it installed to Child Theme I have? I hope so. I don’t know how to check that out. I need to have it in Child Theme in case of Themes updates. I dont want to lose it all.
    It start working, but its not scrolling to the part I need. It just jump there.

    In the tutorial they also say to download plugin “jQuery Smooth Scroll”. I did that and nothing change” I only got arrow at the bottom of the page to go back up.

    I am really sorry for my stupid questions, but I love how that page looks with “Dynamic One Page Navigation” and I would really like to learn how to do it myself. Thank you so much.

    • This topic was modified 6 years ago by lisid.
    • This topic was modified 6 years ago by lisid.

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 17 total)
  • juan2machado

    (@juan2machado)

    Hi, @lisid.

    First of all, your custom CSS and JS are saved through the plugin. This are not in your theme functions.php, so any updates will not delete your changes.

    Secondly, the ‘jQuery Smooth Scroll’ is working nicely. The cause of the ‘jumping’ issue is that you are using your element’s IDs with special characters. This is not supported.

    For example, in the Služby section, try assigning the <span> ID without the “ž” special character, or better said, sluzby (for reference). Then in your menu link, assign #sluzby.

    Hope that helps.

    P.S. Your questions are completely valid. Don’t feel discouraged for asking even the most simple question. We all started without any knowledge at all. In fact, we don’t know it all. Everyday we learn something new.

    Thread Starter lisid

    (@lisid)

    Hello. Thank you for your help. Unfortunately it didnt worked. I change my Menu Custom URL link from /#služby for /#sluzby and now its not even jumping to that part. It does nothing at all. What I am doing wrong? Thanks

    juan2machado

    (@juan2machado)

    Yes.

    You are almost there. You just need to replace the ID value from “služby” to “sluzby” so your menu link matches with the Služby section.

    Here is the element that needs to be modified:

    <span style=”padding-top:120px;” id=”služby”>Služby</span>

    Thread Starter lisid

    (@lisid)

    Where I can find it? Is it title name of the page?

    juan2machado

    (@juan2machado)

    It is the title of the section.

    Thread Starter lisid

    (@lisid)

    Like this?

    https://preview.ibb.co/nBVDnd/Screen_Shot_2018_05_31_at_1_32_50_PM.png

    Unfortunately not even this working. For sure I am doing some stupid mistake.

    • This reply was modified 6 years ago by lisid.
    juan2machado

    (@juan2machado)

    I see.

    On the title field, just input Sluzby (without the special character), just for a test.

    Thread Starter lisid

    (@lisid)

    You are the best my friend! Thank you so much. If you have a time I would really appreciate your help with this two problems I also have.

    https://wordpress.org/support/topic/removing-comment-option/#post-10343870
    https://wordpress.org/support/topic/fighting-with-font/#post-10345164

    Thank you so much for all your help!

    Thread Starter lisid

    (@lisid)

    Btw I just realize that my page “Služby” and “Nabízíme” is now only “Sluzby”/”Nabizime” and its not correct in my language so I dont know how to fix it to be able to keep this awesome future.

    • This reply was modified 6 years ago by lisid.
    juan2machado

    (@juan2machado)

    The code below will find the respective text in your homepage and replace it.

    Please, pay attention carefully to the following instructions:

    1) Copy the code and save it to a file called ‘title-text-fix.php’ (without quotes).
    2) Put that file inside a folder with the exact same name ‘title-text-fix’ (without quotes and without ‘.PHP’ at the end.
    3) Convert the folder into a ZIP file. It should be called ‘title-text-fix.zip’.
    4) Go to your WordPress Dashboard > Plugins and upload ‘title-text-fix.zip’ as any other plugin.
    5) Activate the plugin.

    That’s it. After activating the plugin it will replace the text with the corresponding text in your language.

    <?php
    /*
    Plugin Name: Title Text Fix
    Description: Fixes titles at Home
    Version: 0.1
    Author: Juan José Machado
    License:     GPL2 etc
    */
    
    function title_text_fix(){
    
    	echo '<script>
    
    				function title_text_fix(){
    	
    					document.getElementById("sluzby").innerHTML = "Služby";
    					document.getElementById("nabizime").innerHTML = "Nabízíme";
    	
    				}
    
    		  </script>
    	';
    
    }
    
    if( is_home() ){
    	add_action('wp_head','title_text_fix');
    }
    
    ?>

    NOTE: This code can be added to functions.php file, but in order to avoid potential data loss during a Theme Update, is preferable to implement as a plugin.

    Thread Starter lisid

    (@lisid)

    Thank you so much for your help, but it doesnt work.

    Screen_Shot_2018_05_31_at_2_53_11_PM

    juan2machado

    (@juan2machado)

    1) Clear your cache.
    2) In the code provided

    if( is_home() ){
    	add_action('wp_head','title_text_fix');
    }

    Remove the if( is_home() ){

    and the closing

    }

    and just leave it like this.

    
    	add_action('wp_head','title_text_fix');
    

    The other part leave it untouched.

    Thread Starter lisid

    (@lisid)

    Should I rename page back to original “Služby” or no? I tried with “Služby” and also “Sluzby” and it didn’t worked anyway. Thank you for trying. I appreciate it.

    juan2machado

    (@juan2machado)

    You should leave it like: Sluzby.

    Is weird that it isn’t working.

    1) Deactivate the plugin.
    2) In your theme’s function.php file, at the end of the file put the following code:

    function title_text_fix(){
    
    	echo '<script>
    
    				function title_text_fix(){
    	
    					document.getElementById("sluzby").innerHTML = "Služby";
    					document.getElementById("nabizime").innerHTML = "Nabízíme";
    	
    				}
    
    		  </script>
    	';
    
    }
    
    add_action('wp_head','title_text_fix');
    
    Thread Starter lisid

    (@lisid)

    What exactly are you trying to do with this code? Maybe I just dont get it 😀 .

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Dynamic One Page Navigation’ is closed to new replies.