0
Welcome Guest! Login
0 items Join Now

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 3 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 3 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.062 seconds