i am developing one wordpress responsive website. but now i am facing problem menu issue. please see the bellow image for my navigation. on top black bar **"Check our Town"** will have drop down menu and on blue bar **About Us** also have drop down menu

![enter image description here](https://i.stack.imgur.com/10jcy.jpg)

so i want when screen resolution bellow 800 then top menu and logo part will be different. i know one way like i can make separate header part then hide it via css and call it via css media query. for that i need to keep that code always in body. but i don't want it i want it will code will be in body only when it required. 

say if make top area separate html/php file if i can call it when screen resolution will 800/480 etc that would be work i guess. i can be possible thru php/js but i have no idea how.

see the image there is two part for navigation one is black area and another is blue area. when i will be bellow 800px it will be all menu in one drop down.

see bellow menu i want this type when screen resolution bellow 800px

![enter image description here](https://i.stack.imgur.com/SOelb.jpg)