Top bar menu not visible in mobile

[cocothink]

Hello,

I’ve enabled the Top Bar using the Header Layout #1 and set two links there, one to login into the platform that turns into “my account” once the user has logged in and another link to a FAQ. It all works perfectly but this bar disappears if the website is seen on a mobile device. Is there any way to keep it visible? It’s very important for my website because it’s the only place where users can access to this information.

Thanks!

[Kyle – SUPPORT]

Hi

You can add this to your custom css:

.mhs-tablet-land #top-bar {
  display: block !important;
}

The problem is the mobile header is above the topbar, as that’s where it is in the code.

– Kyle

[cocothink]

Hi,

I’ve added the css code to the style.css but somehow it broke the style and gizmo/fontawesome icons are not showing.

How can I add a custom.css page to avoid breaking the style?

Thanks!

[cocothink]

Hi,

I just figured it out. I only had to add the custom css to the Custom CSS section in the Theme Options page. It worked perfectly!

Thank you!

[Kyle – SUPPORT]

No problem 🙂

[Nunes]

Hi, for my work in half, icons of social networks are down 🙁

See here: volla.com.br/blog

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
@Nunes – Please provide me login detail to check your website.
Thanks
Mohammad

[Nunes]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media only screen and (max-width: 1024px) {
#top-bar .container .tb-right{
width:150px !important;
float:right !important;
}

#top-bar .container .tb-left{
width:275px !important;
float:left !important;
}
}

Thanks
Mohammad

[Nunes]

Hi,

It works in parts. You look like the menu is broken into two lines. And now after update in the theme, there is a “html {margin-top: 32px” leaving a space above the web.

[Nunes]

Have you see??

[Mohammad – SUPPORT]

Hi,
Please attach marked screenshot to indicate the issue.
Thanks
Mohammad

[Nunes]

Here you can see the up space and de align of the bar in mobile:

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Try adding this to your custom css:

html {
  margin-top: 0!important;
}

– Kyle

[Nunes]

No, it does not work, and the bankruptcy of the menu text line?