php string to choose different navigation's classes by max width - php

Question

I have main navigation that change by max-width.
.main-navigation {
border-left: 1px solid #cccccc;
display: block;
float: right;
font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: bold;
max-width: 50%;
position: relative;
text-align: right;
text-transform: uppercase;
}
#media screen and (max-width: 885px) {
.main-navigation {
border: 0;
float: none;
max-width: 100%; }
as you can see, the second code is when the width is lower then 885px (like mobile).
I have tried many ways to give other style to each one with the css code but with no seceded.
So, i want to make another main navigation code for the smaller navigation and to call him main navigation2.
I need some php code to add to the original that take to navigation class by the width. is that possible?
this is the original code:
<nav id="site-navigation" class="main-navigation" role="navigation">
<h1 class="menu-toggle"><span class="screen-reader-text"><?php _e( 'Menu', 'pictorico' ); ?></span></h1>
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'pictorico' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

Answer 1

you can't get screen width using PHP unfortunately.
You could do it in javascript by obtaining the screen width and applying it to the nav tag by selecting it by ID
<script type='text/javascript'>
var screenWidth = window.screen.width;
var element = document.getElementById('site-navigation');
if (screenWidth < 885) {
element.className = navigation1;
}
else
{
element.className = navigation2;
}
</script>