2 comments

1. Edit

   This would probably be a better way of doing it, since you would just be changing display of CSS instead of html… less loops too.

   JQuery

   $(document).ready(function() {
           $(".nav li a .fa").css("display", "none");
           $(".nav li").each(function() { 
               if(this.hasClass("home")) {
                   //add icons to your html so you can hide them
                   this.html("<a href='homeurl'><i class='fa fa-home'></i> <span class='text'>Home</span></a>");
               }
               else if(this.hasClass("next-unique-class")) {
                   this.html("some other icon");
               }
               //more else ifs for each nav icon you want to add
           }
   });
   
   $(window).scroll(function() {
       //Apply and remove the shrink class depending on if you're at the
       //top of the page or not. Not sure if you have this or not.
       if($(window).scrollTop() == 0) {
           $("your #header-id or .header-class").removeClass("shrink");
       }
       else {
           $("your #header-id or .header-class").addClass("shrink");
       }
   
       //Hide icon and display text or vice versa
       if(".header").hasClass("shrink") { 
           $(".nav li a .fa").css("display", "inline");
           $(".text").css("display", "none");
       }
       else {
           $(".nav li a .fa").css("display", "none");
           $(".text").css("display", "inline");
       }
   });
   

   Original Post

   This may be a bit of a stretch since I haven’t used WordPress much, but I believe (according to this source) that each li will have its own class. Using JQuery, you can apply a check when the user scrolls like this:

   JQuery

   $(window).scroll(function() {
       //Apply and remove the shrink class depending on if you're at the
       //top of the page or not. Not sure if you have this or not.
       if($(window).scrollTop() == 0) {
           $("your #header-id or .header-class").removeClass("shrink");
       }
       else {
           $("your #header-id or .header-class").addClass("shrink");
       }
   
       //Go through each li in the nav
       $(".nav li").each(function() { 
           //If header has shrink, replace this li's text with an icon
           //depending on its unique class
           if($("your #header-id or .header-class").hasClass("shrink") {
               if(this.hasClass("home")) {
                   //random icon
                   this.html("<a href='homeurl'><i class='fa fa-home'></i></a>");
               }
               else if(this.hasClass("next-unique-class")) {
                   this.html("some other icon");
               }
               //more else ifs for each nav icon you want to replace
           }
   
           else {
               //Check which li this is and put back original 
               //text if the header does not have shrink
               if(this.hasClass("home")) {
                   this.html("Original Home Link + text"); 
               }
               else if(this.hasClass("next-unique-class")) {
                   this.html("Original Link + text");
               }
               //more else ifs for each
           }
   
       });
   });
   

   This is really rough and I have no way of testing it at the moment, but hopefully it can help you in some way. I highly doubt it’s a 100% solution to your issue, it’ll probably need some tweaking even after you put in the right classes and ids. If you provide more information I can try to help more.

2. You can do that with just CSS. What you need are style rules that will be processed based on the existence of an element with the shrink class. If it exists in the header then the styles will set the links font-size property to zero to ‘hide’ the text and will use a ::before selector to set the icons in the content property and the font-size of the icons so they will not ‘hide’ with the previous set zero size.

   As you will have multiple links, you may need to use :nth-child to properly set each icon.

   See the example (here is the jsfiddle):

   CSS

   /* set the font size of the link to zero to 'hide' the text */
   .shrink a
   {
     font-size: 0px;
   }
   
   /* set the font size of the icons to override the 0px of the previous rule */
   .shrink a::before
   {
     font-size: 20px;
   }
   
   /* set the icon of the first menu entry */
   .shrink a:nth-child(1)::before
   {
     content: "@";
   }
   
   /* set the icon of the second menu entry */
   .shrink a:nth-child(2)::before
   {
     content: "#";
   }
   
   /* and so on... */
   

   This is a HTML sample that works well:

   HTML

   <!-- when you put the 'shrink' class here the magic occurs -->
   <div class="nav">
     <a href="#">Entry 1</a>
     <a href="#">Entry 2</a>
   </div>
   

   * * * EDIT * * *

   As the nth-child is a CSS3 selector and some old – but still active – browsers may not support it properly, you can check whether you are able to set the icon as a data attribute in each menu link so we can replace this selector with the following css rule:

   CSS

   /* set the font size of the link to zero to 'hide' the text */
   .shrink a
   {
     font-size: 0px;
   }
   
   /* set the icon and font size to override the 0px of the previous rule */
   .shrink a::before
   {
     font-size: 20px;
     content: attr(data-icon);
   }
   

   HTML

   <!-- when you put the 'shrink' class here the magic occurs -->
   <div class="nav">
     <a href="#" data-icon="@">Entry 1</a>
     <a href="#" data-icon="#">Entry 2</a>
   </div>
   

Comments are closed.