Have both a text menu and an icon men in header

Hello

I’ve looked at this post but I’m trying to stick with just css for making this work. My colleague has added a WPML menu to the right of the icon, and I’ve tried some other css (see below), which sort of work but I’d like to apply links and use styling on some text items. Thank you in advance.. I’m using all 3 menus – main, secondary and WPML, so can I make a menu widget and then add it before the icon? I also would like to hide it on mobile, but once I now what to target I should be ok>

https://kriesi.at/support/topic/hamburger-menu-next-to-default-menu-in-enfold/

/* add text left of burger on desktop */

.av-burger-menu-main a::before {
    content: "Custom icon text";
    font-size: 24px;    
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1em;
    width: 500px !important;
}

.av-burger-menu-main.menu-item-avia-special:after  {
    content: 'Menu';
    font-size: 14px;
    top: -77px;
    position: relative;
    color: #fff;
    left: 66px;
}

li#menu-item-burger:before {
    content: 'Menu';
    position: absolute;
    top: 45px;
    right: 50px;
}