Here’s what the compiled header looks like of the deployed OJS:
<headernavigationcontainer id="headerNavigationContainer" role="banner">
<nav class="cmp_skip_to_content" aria-label="Jump to content links">
<a href="#pkp_content_main">Skip to main content</a>
<a href="#siteNav">Skip to main navigation menu</a>
<a href="#pkp_content_footer">Skip to site footer</a>
</nav>
<div class="pkp_head_wrapper" style="background: #d51017;">
<div class="pkp_site_name_wrapper">
<button class="pkp_site_nav_toggle">
<span>Open Menu</span>
</button>
<div class="pkp_site_name">
<a href="https://ojs.our-domain.com/index.php/JOURNAL/index" class="is_text">
International Research Journal on Innovations in Engineering, Science and Technology
</a>
</div>
</div>
<nav class="pkp_site_nav_menu" aria-label="Site Navigation">
<a id="siteNav"></a>
<div class="pkp_navigation_primary_row">
<div class="pkp_navigation_primary_wrapper">
<ul id="navigationPrimary" class="pkp_navigation_primary pkp_nav_list">
<li class="">
<a href="https://ojs.our-domain.com/index.php/JOURNAL/issue/current">
Current
</a>
</li>
<li class="">
<a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="pkpDropdown0">
About
</a>
<ul class="dropdown-menu" aria-labelledby="pkpDropdown0">
<li class="">
<a href="https://ojs.our-domain.com/index.php/JOURNAL/about">
About the Journal
</a>
</li>
<li class="">
<a href="https://ojs.our-domain.com/index.php/JOURNAL/about/editorialTeam">
Editorial Team
</a>
</li>
<li class="">
<a href="https://ojs.our-domain.com/index.php/JOURNAL/about/submissions">
Submissions
</a>
</li>
<li class="">
<a href="https://ojs.our-domain.com/index.php/JOURNAL/about/privacy">
Privacy Statement
</a>
</li>
<li class="">
<a href="https://ojs.our-domain.com/index.php/JOURNAL/about/contact">
Contact
</a>
</li>
</ul>
</li>
<li class="">
<a href="https://ojs.our-domain.com/index.php/JOURNAL/issue/archive">
Archives
</a>
</li>
<li class="">
<a href="https://ojs.our-domain.com/index.php/JOURNAL/announcement">
Announcements
</a>
</li>
</ul>
<div class="pkp_navigation_search_wrapper">
<a href="https://ojs.our-domain.com/index.php/index/search" class="pkp_search pkp_search_desktop">
<span class="fa fa-search" aria-hidden="true"></span>
Search
</a>
</div>
</div>
</div>
<div class="pkp_navigation_user_wrapper" id="navigationUserWrapper">
<ul id="navigationUser" class="pkp_navigation_user pkp_nav_list">
<li class="profile">
<a href="https://ojs.our-domain.com/index.php/JOURNAL/user/register">
Register
</a>
</li>
<li class="profile">
<a href="https://ojs.our-domain.com/index.php/JOURNAL/login">
Login
</a>
</li>
</ul>
</div>
</nav>
</div><!-- .pkp_head_wrapper -->
<!-- .pkp_structure_head -->
<div class="pkp_structure_content has_sidebar">
<div class="pkp_structure_main" role="main">
<a id="pkp_content_main"></a>
<div class="page page_login">
<nav class="cmp_breadcrumbs" role="navigation" aria-label="You are here:">
<ol>
<li>
<a href="https://ojs.our-domain.com/index.php/JOURNAL/index">
Home
</a>
<span class="separator">/</span>
</li>
<li class="current">
<span aria-current="page">
Login
</span>
</li>
</ol>
</nav>
<h1>
Login
</h1>
<form class="cmp_form cmp_form login" id="login" method="post" action="https://ojs.our-domain.com/index.php/JOURNAL/login/signIn">
<input type="hidden" name="csrfToken" value="b987be48639ab2895ffd29027c947c2a">
<input type="hidden" name="source" value="">
<fieldset class="fields">
<legend class="pkp_screen_reader">Login</legend>
<div class="username">
<label>
<span class="label">
Username
<span class="required" aria-hidden="true">*</span>
<span class="pkp_screen_reader">
Required
</span>
</span>
<input type="text" name="username" id="username" value="rmanalo" maxlength="32" required="" aria-required="true">
</label>
</div>
<div class="password">
<label>
<span class="label">
Password
<span class="required" aria-hidden="true">*</span>
<span class="pkp_screen_reader">
Required
</span>
</span>
<input type="password" name="password" id="password" value="" password="true" maxlength="32" required="" aria-required="true">
<a href="https://ojs.our-domain.com/index.php/JOURNAL/login/lostPassword">
Forgot your password?
</a>
</label>
</div>
<div class="remember checkbox">
<label>
<input type="checkbox" name="remember" id="remember" value="1" checked="$remember">
<span class="label">
Keep me logged in
</span>
</label>
</div>
<div class="buttons">
<button class="submit" type="submit">
Login
</button>
<a href="https://ojs.our-domain.com/index.php/JOURNAL/user/register?source=" class="register">
Register
</a>
</div>
</fieldset>
</form>
</div><!-- .page -->
</div><!-- pkp_structure_main -->
<div class="pkp_structure_sidebar left" role="complementary" aria-label="Sidebar">
<div class="pkp_block block_information">
<h2 class="title">Information</h2>
<div class="content">
<ul>
<li>
<a href="https://ojs.our-domain.com/index.php/JOURNAL/information/readers">
For Readers
</a>
</li>
<li>
<a href="https://ojs.our-domain.com/index.php/JOURNAL/information/authors">
For Authors
</a>
</li>
<li>
<a href="https://ojs.our-domain.com/index.php/JOURNAL/information/librarians">
For Librarians
</a>
</li>
</ul>
</div>
</div>
<div class="pkp_block block_Keywordcloud">
<h2 class="title">Keywords</h2>
<div class="content" id="wordcloud"><svg viewBox="0 0 300 200" width="100%"><g transform="translate(150,100)scale(1)"><text class="keyword" text-anchor="middle" transform="translate(-29,33)rotate(-90)" style="font-size: 16px; font-family: serif; fill: rgb(31, 119, 180); cursor: pointer; opacity: 0.7;">biomass density</text><text class="keyword" text-anchor="middle" transform="translate(-58,-2)rotate(-60)" style="font-size: 16px; font-family: serif; fill: rgb(227, 119, 194); cursor: pointer; opacity: 0.7;">lactobacillus casei</text><text class="keyword" text-anchor="middle" transform="translate(-110,-4)rotate(-90)" style="font-size: 16px; font-family: serif; fill: rgb(214, 39, 40); cursor: pointer; opacity: 0.7;">escherichia coli atcc 25922</text><text class="keyword" text-anchor="middle" transform="translate(65,48)rotate(30)" style="font-size: 16px; font-family: serif; fill: rgb(227, 119, 194); cursor: pointer; opacity: 0.7;">cell-free supernatant</text><text class="keyword" text-anchor="middle" transform="translate(42,5)rotate(0)" style="font-size: 16px; font-family: serif; fill: rgb(214, 39, 40); cursor: pointer; opacity: 0.7;">bacteriostatic</text><text class="keyword" text-anchor="middle" transform="translate(-88,-12)rotate(0)" style="font-size: 16px; font-family: serif; fill: rgb(23, 190, 207); cursor: pointer; opacity: 0.7;">f-test</text><text class="keyword" text-anchor="middle" transform="translate(12,-44)rotate(-60)" style="font-size: 16px; font-family: serif; fill: rgb(227, 119, 194); cursor: pointer; opacity: 0.7;">bartlett’s test</text><text class="keyword" text-anchor="middle" transform="translate(-130,13)rotate(-90)" style="font-size: 16px; font-family: serif; fill: rgb(214, 39, 40); cursor: pointer; opacity: 0.7;">relative plant health</text><text class="keyword" text-anchor="middle" transform="translate(-56,-57)rotate(-30)" style="font-size: 16px; font-family: serif; fill: rgb(23, 190, 207); cursor: pointer; opacity: 0.7;">image analysis</text><text class="keyword" text-anchor="middle" transform="translate(82,20)rotate(0)" style="font-size: 16px; font-family: serif; fill: rgb(214, 39, 40); cursor: pointer; opacity: 0.7;">leaf color</text><text class="keyword" text-anchor="middle" transform="translate(44,-27)rotate(-30)" style="font-size: 16px; font-family: serif; fill: rgb(23, 190, 207); cursor: pointer; opacity: 0.7;">particulate</text><text class="keyword" text-anchor="middle" transform="translate(86,-29)rotate(-30)" style="font-size: 16px; font-family: serif; fill: rgb(31, 119, 180); cursor: pointer; opacity: 0.7;">village-level</text><text class="keyword" text-anchor="middle" transform="translate(75,-64)rotate(-30)" style="font-size: 16px; font-family: serif; fill: rgb(44, 160, 44); cursor: pointer; opacity: 0.7;">potato grader</text><text class="keyword" text-anchor="middle" transform="translate(23,43)rotate(30)" style="font-size: 16px; font-family: serif; fill: rgb(44, 160, 44); cursor: pointer; opacity: 0.7;">premium price</text><text class="keyword" text-anchor="middle" transform="translate(12,56)rotate(30)" style="font-size: 16px; font-family: serif; fill: rgb(148, 103, 189); cursor: pointer; opacity: 0.7;">laborious</text><text class="keyword" text-anchor="middle" transform="translate(100,-19)rotate(-30)" style="font-size: 16px; font-family: serif; fill: rgb(23, 190, 207); cursor: pointer; opacity: 0.7;">yield</text><text class="keyword" text-anchor="middle" transform="translate(132,-25)rotate(-90)" style="font-size: 16px; font-family: serif; fill: rgb(31, 119, 180); cursor: pointer; opacity: 0.7;">pectin</text><text class="keyword" text-anchor="middle" transform="translate(26,81)rotate(0)" style="font-size: 16px; font-family: serif; fill: rgb(127, 127, 127); cursor: pointer; opacity: 0.7;">optimization</text><text class="keyword" text-anchor="middle" transform="translate(-73,56)rotate(-30)" style="font-size: 16px; font-family: serif; fill: rgb(255, 127, 14); cursor: pointer; opacity: 0.7;">extraction</text><text class="keyword" text-anchor="middle" transform="translate(-77,-62)rotate(-30)" style="font-size: 16px; font-family: serif; fill: rgb(255, 127, 14); cursor: pointer; opacity: 0.7;">vitamins</text><text class="keyword" text-anchor="middle" transform="translate(-2,-52)rotate(-60)" style="font-size: 16px; font-family: serif; fill: rgb(31, 119, 180); cursor: pointer; opacity: 0.7;">metabolism</text><text class="keyword" text-anchor="middle" transform="translate(-47,13)rotate(-60)" style="font-size: 16px; font-family: serif; fill: rgb(31, 119, 180); cursor: pointer; opacity: 0.7;">ocr</text><text class="keyword" text-anchor="middle" transform="translate(-83,-83)rotate(0)" style="font-size: 16px; font-family: serif; fill: rgb(23, 190, 207); cursor: pointer; opacity: 0.7;">visser</text><text class="keyword" text-anchor="middle" transform="translate(81,43)rotate(30)" style="font-size: 16px; font-family: serif; fill: rgb(31, 119, 180); cursor: pointer; opacity: 0.7;">hots</text></g></svg></div>
<script>
function randomColor() {
var cores = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'];
return cores[Math.floor(Math.random()*cores.length)];
}
document.addEventListener("DOMContentLoaded", function() {
var keywords = [{"text":"mango peels, naoh pretreatment, delignification, reducing sugar, bioethanol production","size":1},{"text":"biomass density","size":1},{"text":"lactobacillus casei","size":1},{"text":"escherichia coli atcc 25922","size":1},{"text":"cell-free supernatant","size":1},{"text":"bacteriostatic","size":1},{"text":"f-test","size":1},{"text":"bartlett\u2019s test","size":1},{"text":"relative plant health","size":1},{"text":"statistical model","size":1},{"text":"image analysis","size":1},{"text":"leaf color","size":1},{"text":"flexural strength","size":1},{"text":"composite lamina","size":1},{"text":"particulate","size":1},{"text":"village-level","size":1},{"text":"regional processing","size":1},{"text":"potato grader","size":1},{"text":"premium price","size":1},{"text":"manual grading","size":1},{"text":"laborious","size":1},{"text":"pressure drop, temperature drop, programming language, pipe size, acu","size":1},{"text":"yield","size":1},{"text":"pectin","size":1},{"text":"optimization","size":1},{"text":"extraction","size":1},{"text":"bilimbi","size":1},{"text":"vitamins","size":1},{"text":"metabolism","size":1},{"text":"5-methyltetrahydrofolic acid","size":1},{"text":"recommended dietary allowance (rda)","size":1},{"text":"ocr","size":1},{"text":"binarization","size":1},{"text":"adsorption, air pollution, exhaust filter, natural zeolite","size":1},{"text":"single-well","size":1},{"text":"civil engineering","size":1},{"text":"fibre composites","size":1},{"text":"sandwich structures","size":1},{"text":"visser","size":1},{"text":"science education","size":1},{"text":"science laboratory","size":1},{"text":"hots","size":1},{"text":"germination percentage","size":1},{"text":"sowing depth","size":1},{"text":"soil moisture","size":1},{"text":"seed coating","size":1},{"text":"hydraulic barrier","size":1},{"text":"five-well","size":1},{"text":"three-well","size":1},{"text":"groundwater table depth","size":1}];
var totalWeight = 0;
var width = 300;
var height = 200;
var transitionDuration = 200;
var length_keywords = keywords.length;
var layout = d3.layout.cloud();
layout.size([width, height])
.words(keywords)
.fontSize(function(d)
{
return fontSize(+d.size);
})
.on('end', draw);
var svg = d3.select("#wordcloud").append("svg")
.attr("viewBox", "0 0 " + width + " " + height)
.attr("width", '100%');
function update() {
var words = layout.words();
fontSize = d3.scaleLinear().range([16, 34]);
if (words.length) {
fontSize.domain([+words[words.length - 1].size || 1, +words[0].size]);
}
}
keywords.forEach(function(item,index){totalWeight += item.size;});
update();
function draw(words, bounds) {
var w = layout.size()[0],
h = layout.size()[1];
scaling = bounds
? Math.min(
w / Math.abs(bounds[1].x - w / 2),
w / Math.abs(bounds[0].x - w / 2),
h / Math.abs(bounds[1].y - h / 2),
h / Math.abs(bounds[0].y - h / 2),
) / 2
: 1;
svg
.append("g")
.attr(
"transform",
"translate(" + [w >> 1, h >> 1] + ")scale(" + scaling + ")",
)
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("font-family", 'serif')
.style("fill", randomColor)
.style('cursor', 'pointer')
.style('opacity', 0.7)
.attr('class', 'keyword')
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; })
.on("click", function(d, i){
window.location = "https://ojs.our-domain.com/index.php/index/search?query=QUERY_SLUG".replace(/QUERY_SLUG/, encodeURIComponent(''+d.text+''));
})
.on("mouseover", function(d, i) {
d3.select(this).transition()
.duration(transitionDuration)
.style('font-size',function(d) { return (d.size + 3) + "px"; })
.style('opacity', 1);
})
.on("mouseout", function(d, i) {
d3.select(this).transition()
.duration(transitionDuration)
.style('font-size',function(d) { return d.size + "px"; })
.style('opacity', 0.7);
})
.on('resize', function() { update() });
}
layout.start();
});
</script>
</div>
<div class="pkp_block block_developed_by">
<h2 class="pkp_screen_reader">
Developed By
</h2>
<div class="content">
<a href="http://pkp.sfu.ca/ojs/">
Open Journal Systems
</a>
</div>
</div>
<div class="pkp_block block_make_submission">
<h2 class="pkp_screen_reader">
Make a Submission
</h2>
<div class="content">
<a class="block_make_submission_link" href="https://ojs.our-domain.com/index.php/JOURNAL/about/submissions">
Make a Submission
</a>
</div>
</div>
</div><!-- pkp_sidebar.left -->
</div><!-- pkp_structure_content -->
<div class="pkp_structure_footer_wrapper" role="contentinfo">
<a id="pkp_content_footer"></a>
<div class="pkp_structure_footer">
<div class="pkp_brand_footer" role="complementary">
<a href="https://ojs.our-domain.com/index.php/JOURNAL/about/aboutThisPublishingSystem">
<img alt="More information about the publishing system, Platform and Workflow by OJS/PKP." src="https://ojs.our-domain.com/templates/images/ojs_brand.png">
</a>
</div>
</div>
</div><!-- pkp_structure_footer_wrapper -->
</headernavigationcontainer>
What code should be processing headernavigationcontainer?