AnsweredAssumed Answered

New UI custom menu icon spacing needed

Question asked by Canvas Support Admin USFCA on May 19, 2016
Latest reply on Jan 23, 2017 by Edward Dormady

New UI scripting question.

 

Hello, I've read a bunch of Kenneth Larson's posts which have been enormously helpful. I've been able to resolve almost all of my issues. But I'm not sure where the space between a menu icon and the menu icon text is controlled. I would like similar space as to the other icons. Anyone know where that might be controlled? Much appreciated.

 

I have this JS function working well,

 

//add to nav menu function

        function addMenuItem (linkText, linkhref, icon, target) { 

        'use strict'; 

        var iconHtml = '', 

            itemHtml, 

            linkId = linkText.split(' ').join('_'),

            newTab = ''; 

            if (typeof target !== 'undefined') { 

            newTab = 'target="' + target + '"'; 

        }             

        if (icon !== '') { 

            iconHtml = '<i class=" + icon + " style="display: block; width: 100%; height: 25px;"></i> '; 

        } 

        itemHtml = '<li class="ic-app-header__menu-list-item ">' + 

            '  <a id="global_nav_' + linkId + '" href="' + linkhref + '" target=' + target + '" class="ic-app-header__menu-list-link">' +

            '  <div class="menu-item__text">' + iconHtml + linkText + '</div>' +

            '  </a>' + 

            '</li>'; 

        $('#menu').append(itemHtml); 

    }     

 

--------------

Which I invoke like this:

 

addMenuItem('Survey', 'https://usfca.beta.instructure.com/users/6166514/external_tools/108863', 'icon-peer-review', '_blank');

 

---------------

And for which I have this CSS override (note that it includes the resources react tray icon, to which I have appended the peer review icon which I am using for a survey link.

 

#custom_nav .menu-item-icon-container {

    position: relative;

    left: -4px;

}

 

#custom_nav .menu-item__text {

    margin-top: 15px;

}

 

.icon-resources {

  position: relative;

  left: -2px;

}

 

.icon-resources:before {

  content: "\f13c";

}

 

.icon-resources[class*=icon-]:before, .icon-peer-review[class^=icon-]:before {

  font-size: 30px;

/*Set Hover Colors on Resource Link*/

a#global_nav_resources_link:hover {

    color: white;

}

 

.icon-peer-review {

  position: relative;

  left: -2px;

}

 

 

.icon-peer-review[class*=icon-]:before, .icon-peer-review[class^=icon-]:before {

  font-size: 30px;

Outcomes