[nourmoubayedParticipant]

Dear Support,

Im looking to add a secondary menu bar in the middle of my page that looks exactly like my main menu bar.
Same style, colors, highlight etc.

Here’s my site:

http://smokingcessationformula.com

Thanks.

[Nabeel AModerator]

Hi there,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

[nourmoubayedParticipant]

Hi Again,

Thanks for your reply.

Maybe i do not need to do that after all.
Here’s what im trying to accomplish:
http://www.omharmonics.com/products

On this page there is the main Nav menu on top, and there is another Secondary menu under the second section.

This second menu has links to different sections of the page.

This is excatly what im trying to accomplish.
Is there a way to do that ?

Thanks.

[JadeModerator]

HI there,

You may try the following:

#1 Create a sidebar in Appearance > Sidebar.
#2 Create a menu in Appearance > Menu.
#3 Go to Appearance > Widgets then add a Custom Menu widget to the sidebar you have created in step #1.
#4 Edit the page in Cornerstone and add a Widget Area element to a full width section.
#5 Select the sidebar widget you created in step #3.

Hope this helps.

[nourmoubayedParticipant]

Thanks for the help Jade.

I followed your instructions and this is how the menu is looking on the page now:

http://smokingcessationformula.com/testing-menu/

Is there a way to make the menu inline and style it so that it will have a full width as well as blue background ?

Thanks again

[JoaoModerator]

Hi There,

Please add the following code to Appereance > customizer > Custom > CSS

.widget_nav_menu ul>li {
    display: inline;
    width: 20%;
}

Hope it helps

Joao

[nourmoubayedParticipant]

Thats awesome Joao.

Really helpful.

One more thing please,
How do i Highlight an item when the page is scrolled to it ?

For example, in my test page:
http://smokingcessationformula.com/testing-menu/

when i click on FIRST, it scrolls down to the section but the Item in the menu isnt highlighted.

Many thanks.

[Nabeel AModerator]

Hi again,

Please add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.vc_wp_custommenu .menu-item a').click(function(){
		$('.vc_wp_custommenu .menu-item a').removeClass('highlight');
		$(this).addClass('highlight');
	});
});

Then add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.highlight {
  color: yellow !important;
  background: #37afce !important;

}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[nourmoubayedParticipant]

Hi Nabeel

Thank you for your reply.

I added the code above and cleared cache as your instructions.

Now the item gets highlighted when i click on it as it scrolls to the paragraph.
But It doesnt automatically highlight when i scroll to the paragraph without clicking it.

Please check it on this page:
http://smokingcessationformula.com/testing-menu/

Please let me know how to fix it.

Cheers !

[Paul RModerator]

Hi,

You can add this under Custom > Edit Global JS in the Customizer.

jQuery(function($) {
$(window).scroll(function() {
    var position = $(this).scrollTop();

    $('.page-id-10738 p > a').each(function() {
        var target = $(this).offset().top;
        var id = $(this).attr('id');

        if (position >= target) {
            $('.page-id-10738 ul.menu li a[href="#'+id+'"]').addClass('highlight');
        } else {
            $('.page-id-10738 ul.menu li a[href="#'+id+'"]').removeClass('highlight');
        }
    });
});
});

Hope that helps.

[nourmoubayedParticipant]

Hi Paul.
Thanks for the reply.

I tried what you requested.
At first, My #first and #second selectors where inserted in an RAW HTML element. (As screenshot attached)
The code you recommended didnt work. I was still able to click on the menu items and they would scroll. but they wouldnt highlight automatically when i scroll.

Then, i tried to remove the selectors and put them along with the text paragraph.
At that point, the auto highlight worked BUT when one item is highlighted, it wouldn’t get UN-highlighted when it left the screen.

That was odd.

Please let me know how to fix this.

Many thanks

PS: the current state of the page is the second scenario (my selectors are with the text element)
here’s the link: http://smokingcessationformula.com/testing-menu/

[RadModerator]

Hi there,

It’s because the applied condition is for anchor position only, and not by the whole section. If you’ll remove the highlight upon moving out, then it will work because those anchors have no dimension (eg. zero height ).

Let me explain it 🙂

1. User hover to the anchor and the highlight will be added since the scroll position is equal to the anchor.
2. Now, let’s remove the highlight when you move your mouse out. The problem is, the anchor has zero height which basically your mouse is already outside of it.

The time the highlight is added is also the time it’s removed.

The solution is, don’t use the anchor but use section’s ID. So when you’re staying within that section, the highlight will remain active. And when you move out of that section, the highlight will be removed. And by that, the code above should be improved. But make sure that your sections has required ID first.

Thanks!

[nourmoubayedParticipant]

Hi Rad,

Thanks for the explanation. Makes a lot of sense.

I will do as you requested.
Can you please send me the improved code as you mentioned ?

Thanks!

[RadModerator]

Hi there,

Sure, but you should add IDs to your sections first instead of the anchor.

jQuery(function($) {
$(window).scroll(function() {
    var position = $(this).scrollTop();

    $('.page-id-10738 .x-section').each(function() {
        
        var start_pos = $(this).offset().top;
        
        var end_pos = start_pos + $(this).height();
        
        var selector = '#' + $(this).attr('id');
        
        var matching_position = $( selector ).offset().top + $( selector ).height();

        if ( matching_position >= start_pos && matching_position <= end_pos) {
            $('.page-id-10738 ul.menu li a[href="'+ selector +'"]').addClass('highlight');
        } else {
            $('.page-id-10738 ul.menu li a[href="'+ selector +'"]').removeClass('highlight');
        }
    });
});
});

The ID of your section should match the href of your links.

Example, if the ID is helloworld, then href will be #helloworld

Hope this helps.

[nourmoubayedParticipant]

Hi Rad,

Thank you for your reply.
Ive been trying to add Row ID for my rows in Visual Composer but failing to do so.

Is there a way i can add the ID to a row so that i can create links that scrolls to it ?

Thank you.

[Author]

Posts