Mobile Responsive Header Top Bars

Website Templates
1

Hello All,

On this template - https://colorlib.com/preview/#webuilder
Or on this template - https://colorlib.com/preview/#unicat

How can I modify it to keep the “top black bar” or “top blue bar” area on the mobile responsive header?

Thanks in advance for any help!

  • Kevin
2

Hi there,
Thanks for reaching out.
In reference to your question here, please try adding this code to the responsive CSS file:

@media (max-width: 767px)
.header_top_area {
display: block !important;
}
}

I hope this helps.
Best Regards,
Support.

3

Hello,

That did not work… please see here… http://joinbigdwave.com/provider-template/

Also, in mobile mode the logo is running into the slideshow and below the menu icon.

Please help. Thanks.

Kevin

4

Hi there

top header is not optimized for mobile, it’s hidden because it’s not designed to show on mobile devices

if you want to have it as is try this CSS:

@media (max-width: 767px){
.header_top_area {
display: block !important;
}
}

5

Hello,

That is the same code you gave me before. It does not work.

Please help. I need the top bar to show up on mobile. If it does not then I cannot use this template.

6

HI

If you take a closer look its not the same :slight_smile:
add it as is and let me check it again, but please note, top header is not optimized for mobile, it will be displayed but not styled