# Mobile Responsive Header Top Bars

**URL:** <https://colorlibsupport.com/t/mobile-responsive-header-top-bars/21844>\
**Category:** Website Templates\
**Created:** [July 20, 2018, 6:00pm UTC](https://colorlibsupport.com/t/mobile-responsive-header-top-bars/21844 "2018-07-20T18:00:30Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![krivas](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/k/b5e925/32.png) [@krivas](https://colorlibsupport.com/u/krivas)\
**Post date:** [July 20, 2018, 6:00pm UTC](https://colorlibsupport.com/t/mobile-responsive-header-top-bars/21844/1 "2018-07-20T18:00:30Z")

</div>

Hello All,

On this template - [https://colorlib.com/preview/#webuilder](https://colorlib.com/preview/#webuilder)  
Or on this template - [https://colorlib.com/preview/#unicat](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

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [July 21, 2018, 9:13pm UTC](https://colorlibsupport.com/t/mobile-responsive-header-top-bars/21844/2 "2018-07-21T21:13:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![krivas](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/k/b5e925/32.png) [@krivas](https://colorlibsupport.com/u/krivas)\
**Post date:** [July 23, 2018, 11:21pm UTC](https://colorlibsupport.com/t/mobile-responsive-header-top-bars/21844/3 "2018-07-23T23:21:11Z")

</div>

Hello,

That did not work… please see here… [http://joinbigdwave.com/provider-template/](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

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [July 24, 2018, 5:13am UTC](https://colorlibsupport.com/t/mobile-responsive-header-top-bars/21844/4 "2018-07-24T05:13:16Z")

</div>

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;  
}  
}

---

<div class="post-metadata">

**Author:** ![krivas](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/k/b5e925/32.png) [@krivas](https://colorlibsupport.com/u/krivas)\
**Post date:** [July 24, 2018, 3:36pm UTC](https://colorlibsupport.com/t/mobile-responsive-header-top-bars/21844/5 "2018-07-24T15:36:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [July 25, 2018, 6:07am UTC](https://colorlibsupport.com/t/mobile-responsive-header-top-bars/21844/6 "2018-07-25T06:07:25Z")

</div>

HI

If you take a closer look its not the same 🙂  
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