Custom Text Links on Admin Bar not appearing

Hi,

I've placed Custom Text Links on the Admin Bar using Ultimate Branding. Members will see them after they logged in.

The links appeared nicely on Laptops ( check attached screen shot ). However, the links did not appear on Mobile Devices.

What do I do as all of my members are using Mobile Devices?

  • Predrag Dubajic

    Hey @Azmanar,

    Hope you're doing well today :slight_smile:

    This bug is already reported to our developers to fix in the future updates.
    For now you can fix this by using this code:

    add_action( 'admin_bar_menu', 'my_custom_admin_css' );
    function my_custom_admin_css() {
    	?>
    	<style>
    		@media screen and (max-width: 782px){
    		/*@media only screen and (max-width: 782px) {*/
    
    		li#wp-admin-bar-ub_admin_bar_111 > a.ab-item:before {
    		    content: '\f107';
    		    display: block;
    		    text-indent: 0;
    		    font: 400 32px/1 dashicons;
    		    speak: none;
    		    top: 7px;
    		    width: 52px;
    		    text-align: center;
    		    -webkit-font-smoothing: antialiased;
    		    -moz-osx-font-smoothing: grayscale;
    		}
    
    		li#wp-admin-bar-ub_admin_bar_111 > a.ab-item {
    		    text-overflow: clip !important;
    		    white-space: nowrap;
    		    overflow: hidden;
    		}
    
    		li#wp-admin-bar-ub_admin_bar_111 {
    		    display: block !important;
    		    width: 52px;
    		}
    
    		}
    	</style>
    	<?php
    }

    You would need to make small change tho, in Chrome browser right click on your custom menu in admin bar and click on Inspect element and see the ID for your menu (see screenshot attached).
    Use the number from your ID to replace the 111 parts in the code above.

    You can add those codes in your functions.php in the theme, if you think your theme won’t be changed. Otherwise mu-plugins is the best solution. To use mu-plugins, go to /wp-content/ and find the folder with name 'mu-plugins'. If there is no folder in that name, then create a folder, name it 'mu-plugins', create a file inside that, give any name you like and paste the code in there. You don't need to activate that plugin. Mu-plugins means must use plugins, so it will be activated automatically always. If you use mu-plugins then add a php start tag at the beginning of the code.

    Let me know if you need more help with this.

    Best regards,
    Predrag

  • Azmanar

    Hi,

    Thanks for the tip.

    Right now, I'm seeing the error below in my dashboard. Never saw it before. I did not make any changes to the core files nor did I make any changes as suggested by you yet. This error appeared after I used the Custom Admin Bar in Ultimate Branding.

    Warning: Invalid argument supplied for foreach() in /home/kosains/public_html/wp-content/plugins/ultimate-branding/ultimate-branding-files/modules/custom-admin-bar-files/inc/UB_Admin_Bar.php on line 562

  • Predrag Dubajic

    Hi @Azmanar,

    The error seems to be with the menu bar reordering but it seems that all works without any issues, can try disabling wp_debug from your wp-config.php file and check if everything is ok after that?

    As for the admin bar menu, make sure that your new file has an .php extension and try replacing the entire code with this and let me know if it works:

    <?php
    add_action( 'admin_bar_menu', 'my_custom_admin_css' );
    function my_custom_admin_css() {
    	?>
    	<style>
    		@media screen and (max-width: 782px){
    
    		li#wp-admin-bar-ub_admin_bar_0 > a.ab-item:before {
    		    content: '\f107';
    		    display: block;
    		    text-indent: 0;
    		    font: 400 32px/1 dashicons;
    		    speak: none;
    		    top: 7px;
    		    width: 52px;
    		    text-align: center;
    		    -webkit-font-smoothing: antialiased;
    		    -moz-osx-font-smoothing: grayscale;
    		}
    
    		li#wp-admin-bar-ub_admin_bar_0 > a.ab-item {
    		    text-overflow: clip !important;
    		    white-space: nowrap;
    		    overflow: hidden;
    		}
    
    		li#wp-admin-bar-ub_admin_bar_0 {
    		    display: block !important;
    		    width: 52px;
    		}
    
    		}
    	</style>
    	<?php
    }

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi @Azmanar,

    Glad to hear it's working now :slight_smile:

    If you want to show the default Forum image simply try removing the first css selector from the code so you are left with this code:

    <?php
    add_action( 'admin_bar_menu', 'my_custom_admin_css' );
    function my_custom_admin_css() {
    	?>
    	<style>
    		@media screen and (max-width: 782px){
    
    		li#wp-admin-bar-ub_admin_bar_0 > a.ab-item {
    		    text-overflow: clip !important;
    		    white-space: nowrap;
    		    overflow: hidden;
    		}
    
    		li#wp-admin-bar-ub_admin_bar_0 {
    		    display: block !important;
    		    width: 52px;
    		}
    
    		}
    	</style>
    	<?php
    }

    Let me know how it goes.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.