I'm in the process of transferring an HTML/CSS/jquery mockup of a website into a wordpress theme. The site runs perfectly as an HTML site and all of the css rules are selecting the correct html elements.
However, when I enqueue the scripts to Wordpress and look at the site, only certain rules are being applied, resulting in the website having a broken look. I know the css is being correctly enqueued since I can see it showing up in the page source for the website. When I look at specific elements with web inspector it shows that only certain rules are being implemented but not others. Why would transferring my css to Wordpress change how the css rules apply to almost identical HTML?
Below the code for how I'm enqueuing scripts. Note the dependency on normalize:
<?php
//
function theme_styles() {
wp_enqueue_style( 'normalize', get_template_directory_uri() . '/normalize.css' );
wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css', array( 'normalize' ) );
}
// Load the theme JS
function theme_js() {
wp_register_script('stickynav',get_template_directory_uri() . '/js/stickynav.js', array('jquery'), '', true);
wp_register_script('nouislider',get_template_directory_uri() . '/js/nouislider.js', array('jquery'), '', true);
wp_register_script('bootstrap2',get_template_directory_uri() . '/js/bootstrap2.js', array('jquery'), '', true);
wp_register_script('foundation',get_template_directory_uri() . '/js/foundation.js', array('jquery'), '', true);
wp_register_script('orbit',get_template_directory_uri() . '/js/foundation.orbit.js', array('jquery'), '', true);
wp_register_script('modernizr',get_template_directory_uri() . '/js/modernizr.custom.49510.js', array('jquery'), '', true);
wp_enqueue_script('stickynav');
wp_enqueue_script('nouislider');
wp_enqueue_script('bootstrap2');
wp_enqueue_script('modernizr');
wp_enqueue_script('theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery'), '', true);
if (is_home() && !is_paged() ) {
wp_enqueue_script('foundation');
wp_enqueue_script('orbit');
}
}
add_action( 'wp_enqueue_scripts', 'theme_js');
add_action('wp_enqueue_scripts','theme_styles');
// Enable custom menus
add_theme_support ('menus');
?>
This is the html/php I have in header.php:
<!DOCTYPE html>
<html>
<head>
<title>
<?php
wp_title( '-', true, 'right' );
bloginfo('name');
?>
</title>
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<?php wp_head(); ?>
</head>
<body>
<div id="header_top_wrapper">
<!-- header and subheader -->
<div class="row" id="header-top">
<div class="large-12 columns" id="my_logo">
<?php bloginfo( 'name'); ?>
</div>
<div class="large-6 columns large-uncentered" id="subheader">
<h4><?php bloginfo( 'description'); ?></h4>
</div>
</div>
<!-- sticky navigation bar -->
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="navigation_items">
<li class="nav-left">HOUSEPLANS.INFO</li>
<li class="nav-left">SEARCH PLANS</li>
<li class="nav-left">MOST VIEWED</li>
<li class="nav-right">ABOUT</li>
<li class="nav-right" id="site-search">
<form action="/search" method="get">
<input type="text" name="s" data-provide="typeahead" autocomplete="off" placeholder="Search";>
<i class="icon-search"></i>
</form>
</li>
</div>
</div>
</div>
</div><!-- end #header_top_wrapper -->
As an example of the selective application, these are the rules that are being applied to a link nested inside of an list item li on the HTML mockup
#sticky_navigation ul li a {
float: left;
margin: 0 0 0 5px;
height: 36px;
padding: 0;
line-height: 36px;
font-size: 12px;
font-weight: normal;
color: white;
}
#sticky_navigation ul {
list-style: none;
}
body {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-style: normal;
}
And this is what is being applied to the same link in the Wordpress version of the same HTML and CSS
a {
color: inherit;
text-decoration: none;
line-height: inherit;
}
li {
text-align: -webkit-match-parent;
}
body {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
font-style: normal;
}
Below is the CSS style for the area in question:
/* Logo and subheader */
#my_logo {
font:45px Georgia, Times, serif;
padding-left: 8px;
}
#subheader h4{
margin: 6px 0 0 0;
}
/* our menu styles */
#sticky_navigation_wrapper {
width:100%;
height:36px;
}
#sticky_navigation {
width:100%;
height:36px;
/* background: rgba(65, 105,255,.4); */
background: black;
z-index: 1030;
}
.navigation_items {
width:960px;
margin:0 auto;
}
.navigation_items ul{
padding-left: 0;
}
.navigation_items ul.pull-left:after {
clear: both;
}
#sticky_navigation ul {
list-style:none;
margin: 0;
/* padding:0; */
}
#sticky_navigation ul li{
margin:0;
display:inline-block;
}
#sticky_navigation ul li a{
/* float:left; */
/*margin:0 0 0 5px;*/
height:36px;
/* padding: 0; */
line-height:36px;
font-size:12px;
font-weight:normal;
color:white;
}
.nav-left{
padding-left: 10px;
padding-right: 20px;
}
.nav-right {
float: right !important;
padding-right: 10px;
padding-left: 20px;
}
What is going on here? I've been up all night trying to figure this out.
I'm enqueuing correctly, and according to the page source the exact same css is in the header as in my non-Wordpress version.
You have:
add_action('wp_enqueue_scripts','theme_styles');
But probably you should change it to:
add_action('wp_enqueue_style','theme_styles');
Ref: http://codex.wordpress.org/Function_Reference/wp_enqueue_style
Change
add_action('wp_enqueue_scripts','theme_styles');
to
add_action('wp_enqueue_style','theme_styles');
Also please remember that if you change or edit the css, you need to delete your cache and your visitors also needs to delete their browser's cache. But of course there's a better way to do it. Just fill in the "version" arguments on the wp_enqueue_style.
Do it like this:
add_action('wp_enqueue_style','theme_styles', array(), '1.0.0');
Every time you edit your css. Just change the version to '1.0.1' or '1.0.2' and so on. This will force your visitor's browser to get the latest version of the css.
Figured it out...
UL tags were missing for the li's - somehow deleted while inserting PHP.
DOH!
Related
I'm just starting with HTML and PHP and I ran into the following problem:
When having a PHP command the webpage shows wrong colors!
With PHP command (<?php phpinfo( ); ?>)
Without PHP command:
It's pretty clear to see that the navbar elements change color, depending on the command, but why?
I can't get this fixed, no matter what I do. Here's my other code:
PHP-Source-File:
<!DOCTYPE HTML>
<html>
<head>
<title>PHP-Info</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/index.css" type="text/css" media="all">
</head>
<body>
<ul class="navbar">
<li class="navbar"><a class="navbar" href="index.php">Home</a></li>
<div style="float: right;">
<li class="navbar"><a class="navbar" href="">Server-Info</a></li>
<li class="navbar"><a class="navbar active" href="phpinfo.php">PHP-Info</a></li>
</div>
</ul>
<div>
<?php phpinfo( ); ?>
</div>
</body>
</html>
Stylesheet:
* {
margin: 0;
padding: 0;
font-family: Tahoma, sans-serif;
font-size: 100%;
}
body {
margin-top: 55px;
}
ul.navbar {
position: fixed;
top: 0;
width: 100%;
height: 5.4%;
list-style-type: none;
overflow: hidden;
background-color: rgba(33, 33, 33, 0.35);
}
li.navbar {
float: left;
}
li a.navbar {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover.navbar {
border-bottom: 4px solid dodgerblue;
}
li a.active.navbar {
background-color: #666666;
border-bottom: 4px solid #666666;
}
In your CSS stylesheet I see you have :hover and :active before your classes. Try switching them around, like this:
li a.navbar:hover {
border-bottom: 4px solid DodgerBlue;
}
li a.navbar:active {
background-color: #666666;
border-bottom: 4px solid #666666;
}
EDIT: Plus you had a period . instead of a colon : before active.
It is also a good idea to capitalize your color names. DodgerBlue instead of dodgerblue. Some browsers are strict about this.
How would I be able to load all my login/profile.php files into one specific div without affecting or reloading the rest of my website? I have thought of using $_GET variables to keep the parent url the same and I have used this same tactic for my navigation menu where all my pages load in my #back_drop div.
Below I put together a very basic version of what my site looks like and as you can see the #side_panel is where I would like all my login/profile files to load into while the nav, content, and footer is unaffected by what the #side_panel does. I want to be able to login, logout, get errors, reset password, etc inside this div without it reloading the main portion of my site.
I have an index.php file which is my main index with includes for my header, aside, content, and footer and then I have an entire folder for my php files relating to my login form and other files that will load into my main content page. I didn't want to separate each include so I have them below with comments before each include noting that they are separate so you can see what I am working with.
I am currently loading my login files using an iframe because it is the simplest way to get what I am looking for but have found it very irritating at times especially when I logout and pages requiring to be logged in are still present unless the page is refreshed which seems to be a major security issue.
I have tried to use an include function into my #side_panel but if I attempt to login in, it either won't connect or will end up logging in through the parent url depending on how I edit my login.php file. I am thinking of using $_GET variables but am not sure if that would be a security issue if the variables are in the url but cannot think of any other way
index.php <-- My main index page
<?php
$page = $_GET['page'];
if (!$page) {
$page = 'Home';
}
include('includes/header.php');
echo "<div id='back_drop'><div id='content'>";
include('php/'.strtolower($page).'.php');
echo "</div></div>";
include('includes/footer.php');
?>
aside.php <-- where my login/profile files are included from
<iframe src="php/index.php" height="500px" width="100%" style="position: relative; border:none;"></iframe>
$(document).ready(function(){
$("#show_login").click(function(){
$("#side_panel").toggle("slide");
$("#side_panel").toggleClass("slide");
$(this).find('img').toggle();
if ($("#side_panel").hasClass("slide")) {
$("#back_drop").animate({'padding-left': '0'}, 300);
} else {
$("#back_drop").animate({'padding-left': '230px'}, 300);
}
});
});
* {
margin: 0;
padding: 0;
}
a {
outline: 0;
}
body {
width: 100%;
-webkit-box-pack: center;
background-color: #CCC;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
header, nav, section, aside, footer, article {
display: block;
}
#big_wrapper {
text-align: left;
width: 100%;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header {
position: fixed;
width: 100%;
text-align: left;
padding-top: 4px;
padding-bottom: 2px;
padding-left: 4px;
border-bottom: 2px solid #262626;
border-radius: 3px 3px 0 0;
background-color: #404040;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2), 2px 0 2px 2px rgba(0, 0, 0, 0.19);
z-index: 9999;
}
#back_drop {
background-color: #CCC;
padding-top: 10px;
padding-left: 230px;
max-width: 100%;
}
#content {
border: 5px solid red;
height: 500px;
}
#show_login {
float: left;
width: 24px;
padding-top: 12px;
padding-left: 5px;
height: auto;
cursor: pointer;
-webkit-user-drag: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
#show_login:active {
width: 23px;
padding-top: 13px;
padding-right: 1px;
}
#side_panel {
position: fixed;
background-color: #a19b9b;
color: #000;
margin-top: 54.491px;
width: 230px;
height: 100%;
word-wrap: break-word;
z-index: 9999;
transform: translateX(0);
}
.slide {
transform: translateX(0);
}
#main_section {
clear: right;
text-align: center;
margin-right: auto;
}
#bottom_footer {
clear: both;
text-align: center;
padding: 20px;
background-color: #404040;
}
<!-- header.php -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id='big_wrapper'>
<header id='top_header'>
<nav id="navigation">
<div id="show_login">
<button>Show</button>
</div>
<div id="main_menu">
<!--Navigation header menu
<?php
$sections = array('Home','nav1','nav2','nav3','nav4','nav5');
foreach($sections as $row) {
echo "<li id='menu_list'><a href='index.php?page=$row'&login='$login'";
if ($row==$page) {
echo "class='active'";
}
echo ">$row</a>";
}
?>-->
</div>
</nav>
</header>
</div>
<div id='side_panel'>
<div id='login_contain'>
<!-- aside.php -->
#side_panel<br>
Where my login/profile pages load in
</div>
</div
<!-- This is what is actually in my code. Commented to show in snippet
<?php
echo "<div id='side_panel'><div id='login_contain'>";
include('includes/aside.php');
echo "</div></div>";
?>
-->
<div id='back_drop'>
<div id='content'>
#back_drop<br>
All my navigation links load only in this div by using href='index.php?page=(($_GET['page']))' and if I could do the same thing maybe for my #side_panel to include all my login/profile pages
</div>
</div>
<!--footer.php -->
<div class="footer_nav">
<!--Navigation footer menu
<?php
$sections = array('Home','nav1','nav2','nav3','nav4','nav5');
foreach($sections as $row) {
echo "<li><a href='index.php?page=$row'>$row</a></li>\n";
}
?>
-->
</div>
<footer id='bottom_footer'>
</footer>
</body>
</html>
Couple things here:
You will want to use AJAX for this, an iFrame is not suitable for your needs
Not sure how much of your dynamic page system is represented in your sample script but you should check on your page call on the $_GET, that method can be dangerous if someone tests your $_GET and includes a page that shouldn't.
/index.php
<?php
# Create an allow array (or have these in a database)
$public = array(
'home',
'about'
'contact'
);
# Check that it's not empty. If not empty, make sure it's allowed. Use home as default
$page = (!empty($_GET['page']) && in_array(strtolower($_GET['page']), $public))? $_GET['page'] : 'home';
# Include normally
include('includes/header.php') ?>
<div id='back_drop'>
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
<div id='content'>
<?php include('php/'.$page.'.php') ?>
</div>
</div>
<!-- add jquery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
// On clicking the menu link
$('li > a').on('click',function(e){
// Stop the link from reloading page
e.preventDefault();
// Create ajax
$.ajax({
// Send request as GET
'type': 'get',
// Send to the index page
'url': '/index.php',
// equivalent of ?page={pagename}
'data': {
'page': $(this).attr('href')
},
// When request comes back, find the content and place just the content
// into this page's content
success: function(response) {
// "response" is what is coming back from the ajax all
// Find the content from the returned html
var getContent = $(response).find('#content').html();
// Place it into this page's content id
$('#content').html(getContent);
}
});
});
});
</script>
<?php include('includes/footer.php') ?>
I did a wrong action on my wordpress header.php file. I use a theme which is called 039-fiorellini-lilla. I tried to re-download this theme but I can't find it anywhere on the web (this is a theme downloaded from temi-wordpress.net many years ago and I don't have a backup).
The problem is simple: I edited header.php file explicitly writing HTML code for the menu of the site.
Actually this is my header.php :
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php
bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?
>/script.js"></script>
<?php wp_head(); ?>
</head>
<body onLoad="show_clock()">
<div class="PageBackgroundGradient"></div><div class="PageBackgroundGlare">
<div class="PageBackgroundGlareImage"></div></div>
<div class="Main">
<div class="Sheet">
<div class="Sheet-body">
<div class="Header">
<div>
</div>
</div>
<!--START HTML CUSTOM CODE--!>
<div class="nav">
<ul class="menu">
<li class="index.htm"><a href="http://www.BLABLABLA.org/index.htm"
tppabs="index.htm" title="Home"><span><span>Home</span></span></a></li>
<li class="index2.htm"><a class="active"
href="http://www.BLABLABLA.org/index2.htm" tppabs="index2.htm" title="Home">
<span><span>Home2</span></span></a></li>
<!-- END CUSTOM HTML CODE -->
</ul>
<div class="l"></div><div class="r"><div></div></div></div>
I need to recreate the correct instruction which originally were in this file to obtain the same code you can see between <!-- START CUSTOM HTML CODE --> and <!-- END CUSTOM HTML CODE -->.
I think that probably I must use wp_nav_menu function but I have great problem to implement it. In this site I have only 1 menu of navigation which is called NAVIGATION1.
I need also that parameters class="active" remains active on the web pages actually visualized.
Thanks a lot for your support.
Ok, I solved the problem of the correct links of the menu using this code :
<ul class="menu">
<?php wp_list_pages("link_before=<span><span>&title_li=&depth=1'&& link_after=</span></span>");?>
</ul>
<div class="l"></div><div class="r"><div></div></div></div>
and it works fine.
I did some test using this functions :
add_filter('wp_list_pages', create_function('$t', 'return str_replace("<a ", "<a class=\"ACTIVE\" ", $t);'));
And it's works correctly but it sets the attribute ACTIVE to all the pages of the menu while I need that this attribute is set only to active page of first level (no child page) of the menu (the page that is visualized in that moment.)
Probably, another possible solution is to use the class .current-menu-item wich is added to the menu item for the current page being viewed by the user but I have problem to modify my .css file to add the correct attribute for this class.
I said before that I need that current page has the same behaviour of the hovered page (same color, same font. etc etc).
This is a portion of my .css file for the hover :
elemento {
}
.menu li:hover a span span {
color: #131112;
background-position: left -24px;
}
.menu a:hover span span {
color: #131112;
background-position: left -24px;
}
.menu li:hover a span {
background-position: right -24px;
}
.menu a:hover span {
background-position: right -24px;
}
.menu a span span {
font-family: 'Lucida Sans Unicode';
font-size: 11px;
font-weight: normal;
font-style: normal;
text-decoration: none;
color: #EFD2E0;
margin: 0 1px;
line-height: 24px;
text-align: center;
background-image: url('images/item-center.png');
background-position: left top;
background-repeat: repeat-x;
padding-left: 10px;
padding-right: 10px;
padding-top: 0;
padding-bottom: 0;
}
.menu a span {
background-image: url('images/item-right.png');
background-position: right top;
background-repeat: no-repeat;
}
.menu a, .menu a span {
height: 24px;
display: block;
}
.menu a {
cursor: pointer;
}
a:hover {
color: #000090;
}
a:link {
color: #87315B;
}
a {
color: #87315B;
}
.menu li:hover {
white-space: normal;
}
.menu, .menu ul {
list-style-type: none;
}
.Sheet-body {
text-align: left;
}
body {
font-size: 62.5%;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial,
Sans-Serif;
color: #000000;
}
The portion of HTML code generated is :
...
...
....<li class="page_item page-item-36 ***current_page_item***"><li><span
....class="separator"></span></li><a href="http://BLABLA.com/"><span>
.....<span>index.htmk</span></span></a></li>
...
...
Can someone help me to modify my .cssto add the portion of code for the active page?
Thanks
I am making my first steps learning to code. I made some courses of html, php, css, javascript and MySql. Now I decided to continue learning from the practice while I build a Wordpress child theme.
The thing is that I'm trying to learn how to overlay two different font families in the same div. I mean something like this:
I discover that it's something possible to do with css using content: attr(data-title);
For example:
.button {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: transparent;
display: inline-block;
height: 42px;
padding: 0 1.5em;
position: relative;
border: none;
outline: 0;
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 40px;
line-height: 44px;
color: #000000;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.button:after {
content: attr(data-title);
z-index: 1;
font-size: 30px;
color: #f00;
font-weight: 100;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:100,800" rel="stylesheet">
ABC
Now my big problem is that I'm working with Wordpress and the php is a little more complex. What I would like to do is to have two different fonts for each menu item. For example:
This is the code php of my menu:
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav>
<?php endif; ?>
And this is the css:
.main-navigation {
font-family: pcablack;
font-size: 30px;
word-spacing: -5px;
/*position: relative;*/
position: absolute;
z-index: 1000;
padding-bottom: 20px;
margin-top: 48px;
margin-left: 40px;
}
I tried to make this but it doesn't work as I expect. It seems that maybe there is a syntax problem:
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>"
data-title= '
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>'
>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav>
<?php endif; ?>
then the css:
.main-navigation {
font-family: pcablack;
font-size: 30px;
word-spacing: -5px;
/*position: relative;*/
position: absolute;
z-index: 1000;
padding-bottom: 20px;
margin-top: 48px;
margin-left: 40px;
}
.main-navigation:after {
content: attr(data-title);
font-family: pcabold;
color: green;
font-size: 30px;
word-spacing: -5px;
/*position: relative;*/
position: absolute;
z-index: 1100;
padding-bottom: 20px;
margin-top: 48px;
margin-left: 40px;
}
It doesn't work. It only shows me console errors. Do you have some recommendation?
Maybe there is an easiest way to duplicate the font of a menu item and overlay it?
Other problem is that my menu is an accordion menu. So if I open a section of one of the menus that I duplicate the other menu should be automatically open too.
OMG, you doing this wrong.
You need copy only menu items titles to data attribute. SO for example:
$('.main-menu ul a').each(function() {
var text = $(this).html();
$(this).attr('data-title', text);
});
.main-menu li a {
position:relative;
font-family: "Arial Black";
font-size: 15px;
}
.main-menu li a:after {
content: attr(data-title);
position:absolute;
font-family: "Arial Black";
display:block;
font-size: 14px;
z-index:1;
left:0;
top:0;
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="main-menu">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Why</li>
<li>Contacts</li>
</ul>
</nav>
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' ) ); ?>
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>