0
Welcome Guest! Login
0 items Join Now

ROCKETTHEME IS CLOSING ON JUNE 30, 2025. As a thank-you to our community, enjoy 50% off all themes with the promo code THANKYOU before we shut down. Read our Farewell Blog Post for more details.

How to add active class to Gantry particle Icon Menu link?

Last Post
Search Topic

  • How to add active class to Gantry particle Icon Menu link?

    Posted 7 years 5 months ago
    • Hi, in gantry 5 there is a particle named Icon menu that I would like to use in the navigation menu (# g-navigation). I created this menu icon, also created the Hover effect above but the ACTIVE effect does not work when you click on the links. With Goole searches I discovered that the active class is added dynamically on each link to make the effect more consistent. With the default particle menu of gantry I do not have this problem because I see that this active class is added to each li menu dynamically. I tried code jquery and javascript but in vain it does not work. My site is local.
      I want to dynamically add the active class to a link like this :
      <a target="_parent" href="bessoul.dev/" title="Home" class=" active g-iconmenu-item">

      Here is the code generated by this particle menu icon.
      <div class="g-iconmenu ">
    <a target="_parent" href="bessoul.dev/" title="Home" class="g-iconmenu-item">
        <span class="g-iconmenu-icon fa fa-home"></span>
		<span class="g-iconmenu-text">Home</span>
	</a>
    <a target="_parent" href="bessoul.dev/about" title="About" class="g-iconmenu-item">
               <span class="g-iconmenu-icon fa fa-file-text-o"></span>
			   <span class="g-iconmenu-text">About</span>
	</a>
    <a target="_parent" href="bessoul.dev/create-an-account" title="Create an account" class="g-iconmenu-item">
               <span class="g-iconmenu-icon fa fa-pencil-square-o"></span>
			   <span class="g-iconmenu-text">Create an account</span>
	</a>
    <a target="_parent" href="bessoul.dev/login" title="Login" class="g-iconmenu-item">
               <span class="g-iconmenu-icon fa fa-lock"></span>
			   <span class="g-iconmenu-text">Login</span>
	</a>
    <a target="_parent" href="bessoul.dev/help" title="Help" class="g-iconmenu-item">
               <span class="g-iconmenu-icon fa fa-question-circle-o"></span>
			   <span class="g-iconmenu-text">Help</span>
			   </a>
</div>

      Thanks in advance for your help!

      Seydina
    #1372328
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: How to add active class to Gantry particle Icon Menu link?

    Posted 7 years 5 months ago
    • You can't the active class is added by Joomla - and it will only do this for the menu item you are actually using in conjunction with a proper menu item (i.e. not an alias, not an iconmenu particle, and not a simplemenu particle).

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1372334

Time to create page: 0.072 seconds