Navigation menu, remove item from desktop

Although this is not really a WordPress question, but the visibility property does not actually HIDE any element. It only fades it so you can’t see it, but it still reserves space for it. You need to use the display property:

.mobile-only {
        display:hidden;
    }
@media (min-width:992px) {
    .desktop-only {
        display:block !important;
    }
}

@media (max-width: 991px) {
    .mobile-only {
        display:block!important;
    }

    .desktop-only {
        display:hidden !important;
    }
}

You might want to change the block to inline-block or inline, depending on the original value of your menu’s item (which is usually inline-block).