Topbar content doesn´t work on SM devices

[Creativecure]

Hello.

I added a topbar content:

<i class="x-icon x-icon-user" data-x-icon-s="" aria-hidden="true" style="color:#fff;"></i>&nbsp;<a href="#"> LOGIN</a>&nbsp;<a href="#"><img src="https://buciocarrilloypoo.com/wp-content/uploads/2020/03/flag-mx.png" ></a>&nbsp; <a href="#"><img src="https://buciocarrilloypoo.com/wp-content/uploads/2020/03/flag-us.png" ></a>&nbsp; <a href="#"><img src="https://buciocarrilloypoo.com/wp-content/uploads/2020/03/flag-cn.png" ></a>

The CSS code I’m using:

.x-topbar {
background-color: #303842 !important;
border-bottom: 1px solid #303842;
}
.x-topbar a {
color: #fff !important;
text-decoration: none;
}
.x-topbar a:hover {
color: #e69f12 !important;
}
.x-topbar .p-info {
float: right !important;
padding-left:2em;
padding-right:2em;
}
.x-topbar .p-info a {
border-bottom:none;
}
.x-topbar {
margin-right:1em;
}
@media (max-width: 767px) {
.x-topbar .p-info {
background-color: transparent;
float: none;
padding-bottom: 0;
}
.x-topbar {
height: auto;
}
}

On PC works fine:

But when you go to a SM device the code´s content gets inside a black box and stop working:

What I miss or did wrong.

The URL is: https://buciocarrilloypoo.com/inicio/

I’m using X.

Thank for any help.

[nabeel]

Hi @Creativecure,

Thank you for reaching out to us. This would require custom CSS as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it. To fix the issue, you can try adding the following code in the Theme Options > CSS:

@media screen and (max-width: 767px) {
    .x-topbar-inner {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    .x-topbar-inner .p-info, .x-topbar-inner .x-social-global {
        flex: 1;
    }
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Don’t forget to clear all caches including your browser’s cache after adding the code. Hope this helps!

[Creativecure]

Thanks, that worked.

Cheers!

[nabeel]

Glad we could help.

Cheers!