Resolved - Down arrow on main cat nav

[kealan]

Hello All,

 

I have been scratching my head for a few hours on this one now, so any help would be fantastic! 

I want to be able to edit or remove the down arrows in the main category navigation bar ( cats with sub cats ) but cannot for love nor money find where or how they are being called. Please see attached screenshot.

K

Edited June 5, 2015 by Dirty Butter
wrong signature - now updated

[bsmither]

In the template, you may find something like: <i class="fa fa-caret-down"></i>

This is an "icon" tag (my name, as <i> is a deprecated italic tag) using the Font Awesome (fa) icon set. Change the name of the FA icon to show what you want.

[kealan]

Hi Brian, 

Thanks again for your assistance I would be lost without you!

I found the above but removing /modifying it didnt resolve the issue it turns out its not directly controlled by that icon tag as it stands. I have probably gone about this backwards but here is what I did to get control over that element.

Warning! this also modifies the arrows on the mobile navigation which was somewhat undesirable as they are all now down arrows not side arrows in mobile nav.

To get control of the dropdown arrow i removed the content attribute from the style  .top-bar-section .has-dropdown > a:after around line 2111 and .top-bar-section .has-dropdown > a:after { around line 1972 in foundation.css this removes the call for the dropdown arrow. then i rewrote the element.navigation_tree.php file like so  

 

{if isset($BRANCH.children)}

   <li class="has-dropdown">

 

   <a href="{$BRANCH.url}" title="{$BRANCH.name}">{$BRANCH.name} <i class="fa fa-caret-down"></i></a>

 

   <ul class="dropdown">

 

      <li><label>{$BRANCH.name}</label></li>

 

      {$BRANCH.children}

 

   </ul>

   </li>

   {else}

    <li class="has-dropdown">

 

   <a href="{$BRANCH.url}" title="{$BRANCH.name}">{$BRANCH.name} </a>

   </li>

 

   {/if}

[Dirty Butter]

So you are trying to stop the arrow from showing, but you still want the subcategories to open from the menu bar? Naming the caret to an invalid name should have taken care of it, and that wouldn't mess up the mobile code.

[kealan]

Hi DirtyButter,

Yes I believed giving it an invalid name, changing or removing would have had that effect, but apparently not ( cleared store + browser cache etc.) icon remained in place. I even went as far as deleting the code block associated with the fa fa-caret-down and it still remained. I also removed the Font Awesome, font / css / even the entire folder in its entirety which had all kind of ill effect on the site but still the icon remained! They think that cockroaches are the most resilient creature, they have never met fa fa-caret-down .....   

The logic as to the why seems to be a little over my head right now, but after I made the other changes, altering how the item was called, giving it an invalid name will have the expected effect. 

[Dirty Butter]

This HAS to be a cache issue. When you are editing the skin it's best to disable cache. Even if you use Maintenance to clear it, your browser has probably kept some info you no longer want. Try clearing from within CC and then from browser and reboot browser. Hopefully that will fix it.

[kealan]

Hi Dirty Butter, on closer examination of the font character set I believe this icon is fa-sort-desc which is being called in database.class.php will update with results as soon as

[bsmither]

In the file cubecart.default.css, add this rule:

.top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
  content: ""; /* "\00bb" hex code for fa icon - see cheat sheet */
}

This was found at line 2108 in the foundation.css file.

[kealan]

Hi Brian,

Thanks again for your response, appreciate your time. Interestingly after more head scratching we have found that this down arrow on the main parent categories is not an Icon. Its a styled border ... 

On the foundation css the line starting 1975 & 2114 contain border styling which when removed, remove the arrow. The desired icons can then be called in with the hex values! Hence my merciless removal of the font on associated style sheet left the icon in place. 

Also to note on the above code the font family must be specified in order to call the relevant icons I implemented the following during testing

.top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
    font-family: FontAwesome;
  content: "XXXX"; /* "\00bb" hex code for fa icon - see cheat sheet */
}