Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • October 15, 2013 at 3:58 am #175398
    kheong

    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

    October 15, 2013 at 7:06 am #175488
    Ismael

    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

    October 16, 2013 at 8:14 am #176254
    kheong

    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

    October 18, 2013 at 2:04 am #177245
    Devin

    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

    October 18, 2013 at 4:52 am #177266
    kheong

    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”.

    October 19, 2013 at 8:08 am #177772
    Ismael

    Hey!

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

    $(document).ready(function()
    {

    Cheers!
    Ismael

    October 19, 2013 at 10:20 am #177812
    kheong

    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

    October 21, 2013 at 2:20 pm #178408
    Yigit

    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 11 years, 2 months ago by Yigit.
    October 22, 2013 at 10:20 am #178953
    kheong

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

    October 22, 2013 at 1:04 pm #179035
    Yigit

    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

    October 23, 2013 at 5:10 am #179453
    kheong

    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

    October 23, 2013 at 6:58 am #179505
    Devin

    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

  • Author
    Posts
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.