I have made 22 custom links in the WP toolbar for my site but when I reduce browser/screen width they are completely un-resposnive in terms of CSS and stack instead of simply not displaying links that do not fit.

Ie, I want to apply margin:center and overflow:hidden to all of them together so they are in the center of the toolbar and any that do not fit on different window sizes will be hidden.

Would be practically impossible to include all the code here but I hope these examples show what I have and havnt done.

I have tried both the class and ID CSS but nothing is effecting the links.

.quicklinksgroup {
    margin: auto !important;
    width: 1600px;
    overflow: hidden;

#classquicklinks {
    margin: auto !important;
    width: 1600px;
    overflow: hidden;

How I generate the group and parent nodes in the custom plugin I made. I have 22 of these looped to create the custom menus drop down. White each there is also child nodes but I didnt think you would need to see them as they are practically the same and working fine. As you can see I have also tried the CSS, that I think should be right, inline.

function add_nodes_and_groups_to_toolbar( $wp_admin_bar ) {

args = array(
        'id'    => 'quicklinksgroup',
'title' => '<div id="quicklinksgroupcontainer" style="margin:auto!important;
width: 1600px;
overflow: hidden;
padding-left: 100px;" ></div>',
'meta'   => array( 'class' => 'classquicklinksgroup' )

    $wp_admin_bar->add_group( $args );

    $args = array(
    'id'    => 'parent_node'.$Number.'',
    'title' => '<div id="linkbutton" style="margin-top:2px text-align:center;"><img src="http://example.com/'.$IMG.'" alt="'.$TEXT.'" style="width:40px;height:25px;"></div>',
            'href'  => '/page/'.$Live.'',
            //'meta'  => array( 'class' => 'OnlineQuickLinks' )
            'parent' => 'quicklinks'
        $wp_admin_bar->add_node( $args );

I know I am not an expert at asking questions here but if we find a solution will be very helpful to me and others as I really couldnt see anything on the search engines.


You need to add overflow: hidden; to your CSS for #wpadminbar.

Add this to your CSS:

#wpadminbar {
    overflow: hidden;
  • Thanks but wont that be for everything in the tool bar? There is also all the original Wordpress stuff in it. Like the WP logo etc. – Gary Carlyle Cook Jun 18 '15 at 17:16
  • Yes, but it should still work as expected. If you shrink your browser after applying this CSS you will see that anything that overflows on the right will be hidden. This will not clip anything of WordPress off and you should be fine. Feel free to try it out. – KingCodeFish Jun 18 '15 at 17:24
  • It's also good to note that if the page shrinks too much it will turn to a mobile version, thus never allowing it to clip any of the original links. So with this code you should be good to go. – KingCodeFish Jun 18 '15 at 17:43
  • 1
    Thanks. I have done this for now but it would of been nicer to group the custom links in question together in a div container that I can center and hidden the overflow of. – Gary Carlyle Cook Jun 18 '15 at 17:50
  • I'll see if I can work something out and edit this post if I find anything. But for the time being could you accept and vote up my post? – KingCodeFish Jun 18 '15 at 18:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.