Different header for desktop

Different header for desktop

Hi all,

Currently the header looks same for both desktop and mobile view, I would like to have a simple "jQuery" only menus for desktop. And I will have default jQM header for mobile, I will call these different headers using different classes (managing this using device size). Is there a way that I can achieve this?

  1. <div class="desktop-header">
        //desktop menus goes here
    </div>
    <div data-role="header" class="mobile-header">
        <a href="#" data-role="button" data-inline="true">Left button</a>
            <h1>Header</h1>
        <a href="#" data-role="button" data-inline="true">Right button</a>
    </div>








Thanks!!