Hello Tomek :),  
To do this, you need change a little the html structure of your code. You can use this as an example: https://pastebin.com/raw/H2d7R4Hd
Basically you need put the “header-right” inside the “logo-container”.
After go to your file (css/custom.css) and paste this css code:
@media (max-width: 767px) and (min-width: 485px) {
.header .header-right {
background: transparent !important;
float: right !important;
width: auto !important;
margin-top: 0 !important;
height: 56px !important;
margin-right: 50px;
}
.notifications {
margin: 16px 8px 0px 40px !important;
}
.userbox:after {
top: -23px !important;
}
.userbox .name, .userbox .role {
max-width: 94px;
}
.inner-wrapper {
margin-top: 56px;
}
}
@media (max-width: 485px) {
.header .header-right {
margin-top: 0 !important;
}
.userbox:after {
height: 60px !important;
top: -16px;
}
.inner-wrapper {
margin-top: 112px;
}
.sidebar-title {
margin-top: 56px;
}
.userbox .name, .userbox .role {
max-width: 94px;
}
}
Please, try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.