Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #175398

    I’d like to design a website with multiple pages but a homepage that has a long single page. It’ll need a top navigation menu that scrolls to bookmarks and highlights the section’s menu item when that section is at the top of the view port.

    Is it possible to do implement this type of navigation menu with the enfold?

    thanks very much!

    kheong

    #175488

    Hey kheong!

    You can follow these steps. You can add this on js > avia.js.

    $('#avia-menu li a').click(function(event) {
        
    		$('#avia-menu li a').click(function(){
    			 $('#avia-menu li a').removeClass('active');
    			 $(this).addClass('active');
    		});
    		
    	});

    Then add this on your custom.css or Quick CSS;

    #avia-menu li a:hover, #avia-menu li a.active { background: #ff0; color: red !important; }

    You can try the effect by creating a page with 3 Color Sections. Set an id on “For Developers: Section ID” field. Name the sections 1, 2 and 3 respectively. Go to Appearance > Menus, create a new menu. Add custom links with URL like #1, #2 and #3.

    Regards,
    Ismael

    #176254

    Ismael, thanks for the prompt and helpful reply!

    I tried what you suggested at this mockup website:
    http://wp.atrico.com.au

    The smooth scrolling works, but I’m having a few problems:
    1) When I manually scroll to a section, the section’s navigation menu item is not highlighted. This is the case even if the menu contains only hashtag labeled sections.
    2) If I add links to another page in the top menu, the “Section 1” menu item remains highlighted all the time. I did a search and found it might be related to the same problem discussed here.

    thanks,

    kheong

    #177245

    Hello!

    1) As far as I know the theme doesn’t actually have a function to highlight active anchors. Ismaels code above I believe is trying to achieve that but it doesn’t look like its working.

    2) I’m not getting that behavior when view any other page on your site right now. Can you add one to your menu so we can test it out.

    Regards,
    Devin

    #177266

    Thanks.. re: 2, you should be able to see the problem on site when you looked. It still exists. Section 1 menu item is always highlighted. This happens if I include the full URL for a menu entry, e.g. “http://wp.atrico.com.au/#section3” instead of “#section3”.

    #177772

    Hey!

    It works on my end. Please move the jQuery code on avia.js below this code:

    $(document).ready(function()
        {
    

    Cheers!
    Ismael

    #177812

    Thanks again..

    I’ve done that but I still have the same problems:

    1) Section 1 menu item is always underlined with red.
    2) The menu items do not highlight in yellow when I scroll to them in the viewport.

    Am I doing something wrong? Are you seeing these problems too?

    thanks,

    kheong

    #178408

    Hey!

    1) Please add following code to Quick CSS in Enfold theme options

    .current-menu-item>a>.avia-menu-fx { display: none!important; }

    2) Devin answered it here https://kriesi.at/support/topic/navigation-menu-for-long-single-page-website-with-enfold/#post-177245

    Regards,
    Yigit

    • This reply was modified 10 years, 5 months ago by Yigit.
    #178953

    Thanks.. I’ve done that (in my case, Quick CSS in the Enfold Child theme) but it’s still the same..

    #179035

    Hey!

    I updated the code in my previous post. Please try adding it then flush browser cache and refresh your page a few times. You can try adding the code to Custom.css in Enfold/css folder as well

    Cheers!
    Yigit

    #179453

    Thanks–it works now!

    I want to make it easy to keep up with future theme updates. Would you please let me know what’s needed if I want to make all these js and css changes to the child theme instead of the parent theme?

    thanks,

    kheong

    #179505

    Hey!

    Unfortunately this isn’t easily added into a child theme. Your best route would be to keep a backup of your changes locally and re-apply them after an update.

    Best regards,
    Devin

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Navigation menu for long single page website with Enfold’ is closed to new replies.