Top Bar Mobile Sizing

I’ve been asking a lot of questions lately, sorry! Thank you for all the help!

My site is,

https://triplumb.com/

If you visit there on a mobile the top bar is all messed up. I’ve tried all sorts of code to resize it so that the social icons don’t stack vertically etc. Also I cannot get the contact page to resize nicely in mobile. Can someone help me and give me some custom css to fix both these issues…

Here is the custom css I have already for the whole site in case an error there may be the cause.

#nav-main ul.sf-menu > li > a:hover {background: #72b33f; color: #fff;}

.main {
    width: 100%;
}
.topbarmenu ul li a {
color: #444d54;

}

.kad-sidebar {
    display: none;
}

.page-header {
display: none;
}

.topbarmenu ul li a {
    font-size: 25px;
}

}

.home-iconmenu a i {color:#ffffff;} /*icon color*/
.home-iconmenu a h4 {color:#ffffff;} /*text color*/
.home-iconmenu a {background:#444d54;} /*background color*/
.home-iconmenu a:hover {background:#72b33f;} /*background on hover color*/

@media (max-width: 768px){
.home-iconmenu {
width: 50%;
float: left;
}

}

.kad-topbar-right {
    width: 10%;
}
@media (min-width: 1200px) {
.topbar_social ul {
    float: right;
    }

.kad-topbar-left {
    width: 70%;
}

.kad-topbar-right {
    width: 30%;

}
@media (min-width: 992px) {
.topbar_social ul {
    float: right;
    }

.kad-topbar-left {
    width: 0%;
}

.kad-topbar-right {
    width: 100%;

}