Not load all links in particular size of screen by javascript and advance java

Question

I am implementing two header menu in one .jspf file. One header menu for mobile screen and another one is desktop screen. But problem is that when load the page then all links load for small screen header menu and desktop screen header menu. When page is load in mobile screen then i don't want to load desktop header menu screen links.

1. Right now i am using media query for hide the header for small screen and desktop screen.

2. I have another idea for hide and display to the header ie javascript.

     $(document).ready(function () { var windowViewWidth = $(window).width(); if (windowViewWidth <= 767) { ......... ......... } }); 

   One mobile screen header menu screen shot:

   When i am see view page source code then load all links. I tried Java script width property and media queries. Still it is not working. When i see page source code for small screen then should not show desktop header menu screen links in source code.

Any one have some different idea please with with me.

Answer 1

Could you have the same css for your header (mobile and desktop) in a media query and the CSS used for the header changes depending on screen size? So the header css would be using the same attributes and html for both, but just changing at the time of the media query criteria being true?

 header{ height: 40px; width: 500px; background: gold; } @media screen and (max-width: 480px) { header { height: 300px; width: 100px; background: lightgreen; } } 

 <header> <header>