add javascript in pictorico theme header for different classes

  • ron regev

    (@ron-regev)


    11 years, 4 months ago

    hello,
    im trying to give different class to the main navigation by width.
    the theme in the default doing that with the css but i need other class for other navigation style (position and more) when the screen is under 850px.

    so, i added main-navigation2 in the stylesheet and i have this code:

    <script type='text/javascript'>
  var screenWidth = window.screen.width;
  var element = document.getElementById('site-navigation');
  if (screenWidth < 885) {
    element.className = main-navigation;
  }
  else
  {
    element.className = main-navigation2;
  }
</script>

    the header code is:

    <?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="content">
 *
 * @package Pictorico
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">

	<header id="masthead" class="site-header" role="banner">
		<div class="site-header-inner">
			<div class="site-branding">
				<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
				<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
			</div>
                                <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' ) ); ?>
			</nav><!-- #site-navigation -->
			<div class="header-search">
				<?php get_search_form(); ?>
			</div>
		</div>
	</header><!-- #masthead -->
	<?php if ( is_home() && pictorico_has_featured_posts( 1 ) ) : ?>
		<?php get_template_part( 'content', 'featured' ); ?>
	<?php elseif ( get_header_image() && ( is_home() || is_archive() || is_search() ) ) : ?>
		<div class="hentry has-thumbnail">
			<div class="entry-header">
				<div class="header-image" style="background-image: url(<?php header_image(); ?>)">
					<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><span class="screen-reader-text"><?php bloginfo( 'name' ); ?></span></a>
				</div>
			</div>
		</div>
	<?php endif; ?>
	<div id="content" class="site-content">

    this is the css code:

    /* =Menu */
.main-navigation {
border-left: 1px solid #cccccc;
  display: block;
  float: left;
  font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
  font-weight: bold;
  max-width: 50%;
  position: absolute;
top: 50px;
width: 100px;
  text-align: right;
  text-transform: uppercase;
}

.main-navigation2 {
 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-navigation2 {
    border: 0;
    float: none;
    max-width: 100%;  }
}

    the question is where to put the script? i tried many places but its not working.

    thanks everyone 🙂

The topic ‘add javascript in pictorico theme header for different classes’ is closed to new replies.