# Toggle device toolbars

**URL:** <https://forum.codewithmosh.com/t/toggle-device-toolbars/16891>\
**Category:** HTML/CSS\
**Created:** [December 6, 2022, 10:11am UTC](https://forum.codewithmosh.com/t/toggle-device-toolbars/16891 "2022-12-06T10:11:06Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![YuriAmancio](https://avatars.discourse-cdn.com/v4/letter/y/e47c2d/32.png) [@YuriAmancio](https://forum.codewithmosh.com/u/YuriAmancio)\
**Post date:** [December 6, 2022, 10:11am UTC](https://forum.codewithmosh.com/t/toggle-device-toolbars/16891/1 "2022-12-06T10:11:07Z")

</div>

Dear all,  
anyone knows why my layout looks as I inted when I resize my viewport but when I used toggle device toolbars they don’t apply my code.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/1/13b5ea0249b82a4bd934fd6d972f4b68b001fd6f.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/f/f47cde6a929877817a7cd099ae924bcc57a894ef.jpeg)

The second image is my viewport resized and coded applied.

---

<div class="post-metadata">

**Author:** ![EpikNohVuh](https://avatars.discourse-cdn.com/v4/letter/e/c68b51/32.png) [@EpikNohVuh](https://forum.codewithmosh.com/u/EpikNohVuh)\
**Post date:** [December 7, 2022, 6:02pm UTC](https://forum.codewithmosh.com/t/toggle-device-toolbars/16891/2 "2022-12-07T18:02:32Z")

</div>

html code? css code?

---

<div class="post-metadata">

**Author:** ![YuriAmancio](https://avatars.discourse-cdn.com/v4/letter/y/e47c2d/32.png) [@YuriAmancio](https://forum.codewithmosh.com/u/YuriAmancio)\
**Post date:** [December 9, 2022, 11:25am UTC](https://forum.codewithmosh.com/t/toggle-device-toolbars/16891/3 "2022-12-09T11:25:29Z")

</div>

The code below is for the header, which will change according to the screen size.  
I made two headers…one for mobile, and one for tablet and desktop.  
When one header is showing, the other is hidden.

 ![header1](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/1/1bd7a96bac01282c8d96dd8ce377d1200c2eedca.png)

Here is the code for tablets and desktop:

 ![Design sem nome (4)](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/0/03160cbf67c31be8cba4556abdff5bde9fb209c2.jpeg)