Replace this line:
<img src="https://wordpress.stackexchange.com/questions/285006/<?php header_image();?>" height="120px;" width="100px;" alt=""/ class="siteLogo">
with the following, to fix the invalid /
and dimensions.
<img src="https://wordpress.stackexchange.com/questions/285006/<?php header_image();?>" height="120" width="100" alt="" class="siteLogo" />
Replace this markup:
<span class="spanish">español</span> | <span class="english">english</span>
with the following:
<span class="spanish" data-target=".topBar .spanishNav">español</span> | <span class="english" data-target=".topBar .englishNav">english</span>
Change your JavaScript to the following:
jQuery.noConflict();
jQuery(document).ready(function($) {
'use strict';
// You can use the shorter `$` inside the function,
// even in noConflict mode. `.ready()` passes `$` to you.
var $toggles = $('.topBar .toggles > span');
var $uls = $('.topBar nav > ul');
$toggles.on('click', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
var $this = $(this);
$toggles.removeClass('active');
$uls.removeClass('open').hide();
$this.addClass('active');
$($this.data('target')).addClass('open').show();
});
});