kealan Posted June 2, 2015 Share Posted June 2, 2015 (edited) 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 Quote Link to comment Share on other sites More sharing options...
bsmither Posted June 2, 2015 Share Posted June 2, 2015 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. Quote Link to comment Share on other sites More sharing options...
kealan Posted June 4, 2015 Author Share Posted June 4, 2015 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} Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted June 4, 2015 Share Posted June 4, 2015 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. Quote Link to comment Share on other sites More sharing options...
kealan Posted June 4, 2015 Author Share Posted June 4, 2015 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. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted June 4, 2015 Share Posted June 4, 2015 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. Quote Link to comment Share on other sites More sharing options...
kealan Posted June 4, 2015 Author Share Posted June 4, 2015 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 Quote Link to comment Share on other sites More sharing options...
bsmither Posted June 4, 2015 Share Posted June 4, 2015 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. Quote Link to comment Share on other sites More sharing options...
kealan Posted June 5, 2015 Author Share Posted June 5, 2015 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 */} Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.