javascript - Overriding element.style -

I am trying to create a responsive web page eg, where the display changes with the screen size

I have the following HTML:

  & lt; Div class = "responsive_menu" id = "resp_Menu" onClick = "fnResponsiveMenu ()" & gt; & Lt; / Div & gt; & Lt; Div class = "nav_wrapper" & gt; & Lt; Div class = "navigation" id = "navMenu1" & gt; & Lt; A href = "Home.aspx" & gt; Contact us & lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "navigation" id = "navMenu2" & gt; & Lt; A href = "Home.aspx" & gt; Notification & lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "navigation" id = "navMenu3" & gt; & Lt; A href = "Home.aspx" & gt; Location details & lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "navigation" id = "navMenu4" & gt; & Lt; A href = "Home.aspx" & gt; Registration & amp; Payment & lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "navigation" id = "navMenu5" & gt; & Lt; A href = "Home.aspx" & gt; Agenda & lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "navigation" id = "navMenu6" & gt; & Lt; A href = "Home.aspx" & gt; Home & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

and the following in responsive.css:

 . Navigation {width: 100%; Background color: # 3171B7; Border bottom: 1px solid #ffffff; Margin: 0; Change text: uppercase; Font-size: 16px; Height: 40%; Cushion Top: 10px; display none; }  

and style.css are the following:

  .navigation {float: right; Margin: 30px 0px 1px 0px; Height: 25px; Width: 100px; Display area; }. Navigation A {font-family: Ariel, Helvetica, Sense-Serif; Font-size: 14px; Color: #FFFFFF; Text-decoration: None; Display area; Padding: 0 5px; Height: 30px; }  

and the following JavaScript:

  var oNavChecker = 0; Function fnResponsiveMenu () {if (oNavChecker == 0) {var oNav1 = document.getElementById ("navMenu1"); ONav1.setAttribute ('style', 'display: inline'); Var oNav2 = document.getElementById ("navMenu2"); ONav2.setAttribute ('style', 'display: inline'); Var oNav3 = document.getElementById ("navMenu3"); ONav3.setAttribute ('style', 'display: inline'); Var oNav4 = document.getElementById ("navMenu4"); ONav4.setAttribute ('style', 'display: inline'); Var oNav5 = document.getElementById ("navMenu5"); ONav5.setAttribute ('style', 'display: inline'); Var oNav6 = document.getElementById ("navMenu6"); ONav6.setAttribute ('style', 'display: inline'); ONavChecker = 1; Return; } If (onchachar == 1) {var oNav1 = document.getElementById ("navMenu1"); ONav1.setAttribute ('style', 'display: none'); Var oNav2 = document.getElementById ("navMenu2"); ONav2.setAttribute ('style', 'display: none'); Var oNav3 = document.getElementById ("navMenu3"); ONav3.setAttribute ('style', 'display: none'); Var oNav4 = document.getElementById ("navMenu4"); ONav4.setAttribute ('style', 'display: none'); Var oNav5 = document.getElementById ("navMenu5"); ONav5.setAttribute ('style', 'display: none'); Var oNav6 = document.getElementById ("navMenu6"); ONav6.setAttribute ('style', 'display: none'); Onchaker = 0; Return; }}  

All this works well and works as I want.

My problem is, after the screen is diminished, and then pressed the menu button like <

then pressed to show the menu for the first time

Then pressed again to remove it

Then return to the screen

Detailed resolution,

Nowmen will not show anymore.

I am sure that this is because CSS is being eliminated by javascript eg:

  ONav1.setAttribute ('style', 'display: none ');  

So how can I solve it and get the style. CSS to override changes implemented by JavaScript?

If this is not possible, then no alternative might be to get your purpose of making responsive menus?

I can not comment, enought is not representative, so I will ask it in reply ... < / P>

Have you read this?

Once you remove the inline style, the default from your CSS file will be applied again.