Docs

[PapertownDesign]

Hi guys! I was hoping you might be able to help me.

I have a menu item that acts as a toggle for the top widgetbar, where my contact form is situated. Its href is # and I’ve assigned it a class to act as a trigger. For this reason, the theme sees it as a broken link and highlights it with a red line (as shown in the “triggered” attachment).

I already have some CSS code that hides the standard navigational highlight (which would be pink, not red). You’ll see that “Home” is the active link, but does not have the pink vertical line. This is intended. (as shown in “not triggered” attachment)

I do not want the “get in touch” trigger to be highlighted as a broken link.

Is this something you could help me with?

Thanks in advance!

[PapertownDesign]

It would seem that the screenshots did not upload due to the max file size, so here’s an imgur link to them.

Widgetbar not triggered (http://i.imgur.com/b4xAidd.jpg)

Widgetbar triggered (http://i.imgur.com/pcn48LU.jpg) <– this one demonstrates the issue, next to the menu item “Get in Touch”

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[PapertownDesign]

Hi Joao! Thanks for getting back to me.

The URL for the website is http://www.thefatpiguk.com

I also seem to be having an issue with loading Cornerstone at the moment. It seems to be spinning infinitely without actually loading the builder. Is this a common issue?

All the best,
Sam

EDIT: Scratch that. It just took a really long time. Eventually loaded though.

[Rue Nel]

Hello There,

Thanks for updating in! To resolve your issue and make sure that the menu item is highlighted when you click on it, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $('#menu-item-96').on('click touchstart', function(){
    $('.menu-item').removeClass('current-menu-item').removeClass('current-page-item');
    $(this).addClass('current-menu-item');
  });
})(jQuery);

We would loved to know if this has work for you. Thank you.

[PapertownDesign]

Hi Rue Nel!

Thanks for getting back to me. I’m sorry to say that it didn’t work unfortunately. I’m not sure why.

By any chance, would making a chance to:

.current-menu-item a{
}

In the CSS be a route we could look at? It only seems to happen once the cursor leaves the activated menu item (after clicking the link) – this is most evident on the ‘Get In Touch’ menu item.

I’m relatively new to this still, so I’m merely guessing. Is there anything I can do on my side of things to help you guys figure it out?

P.S. The site is currently “under construction” so if you need to take another look at the page, just let me know and I’ll make it publicly visible.

All the best,
Sam

[Nabeel A]

Hi again,

Please make your site public for a while so we can take a closer look.

Thanks!

[PapertownDesign]

Hi Nabeel!

The site is publicly visble now. The URL is: http://www.thefatpiguk.com

Let me know if you need me to do anything for you.

All the best,
Sam

[Nabeel A]

Hey Sam,

Thank you for making the site public, please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-navbar-fixed-left .desktop .x-nav>li>a:focus, .x-navbar-fixed-left .desktop .x-nav>li>a:hover {
    box-shadow: none !important;
}

Let us know how this goes!

[PapertownDesign]

Hi Nabeel!

Thank you very much for getting back to me. That worked perfectly!

As always, thanks for the awesome support from you and the team 🙂

All the best,
Sam

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts