Mobile Responsive Header Top Bars

Hello All,

On this template -
Or on this template -

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

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,


That did not work… please see here…

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

Please help. Thanks.


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;


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.


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