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