Not a Javascript solution, but I managed to achieve what you want using CSS; just add 'height: 40%' to your logo image and it should scale with the header (note that you'll probably need to use a higher-quality version of the logo), as the current one gets a bit pixellated when it grows.
Change Image Size with Javascript (replicate)
-
21-04-2022 - |
Question
Okay so i have been looking at this for over a week and can not figure it out. Basically here is an example of the end result i posted earlier:
Their suggestions did not work. The javascript is changing the header css when you click on the buttons to the top right. Here is a Demo: DEMO of JAVASCRIPT CHANGE
I'm Trying to duplicate this action with the image, but i however do not know javascript that well and am not too sure what i am reading when i look at the javascript file. I either would like someone to help me read this javascript so i can edit it myself or help me find a solution.
Here is the Javascript: Script.JS
Here is the relevant HTML that i have done so far:
body >
<div id="gspinner" class="spinner"></div>
<div id="glob">
<header>
<div class="inner">
<a href="#!/home"><h5><img src="images/logo_large.png" /></h5></a>
<!--<a href="#!/home"><img src="logo-large.png" id="img- logo" alt="" /></a>
<!--<a href="#!/home"></></a>-->
<nav>
<ul>
<li class="li-2"><a href="#!/about"><span class="lbl">About Us</span><span class="ico -def"></span><span class="ico -hvr"></span></a>
<ul>
<li><a href="#!/history">History</a></li>
<li><a href="#!/mission">Mission Statement</a></li>
<li><a href="#!/solutions">Solutions</a></li>
<li><a href="#!/distribution">Distribution Area</a></li>
<li><a href="#!/logo">SAS Logo</a></li>
</ul>
</li>
<li class="li-1"><a href="#!/events"><span class="lbl">Events</span><span class="ico -def"></span><span class="ico -hvr"></span></a>
<ul>
<li><a href="#!/tradeshow">Trade Show</a></li>
<li><a href="#!/awesomeachievers">Awesome Achievers</a></li>
<li><a href="#!/whatshappening">What's Happening</a></li>
</ul></li>
<li class="li-3"><a href="#!/technology"><span class="lbl">Technology</span><span class="ico -def"></span><span class="ico -hvr"></span></a>
<ul>
<li><a href="#!/nexgen">NexGen</a></li>
<li><a href="#!/synergy">Synergy</a></li>
<li><a href="#!/edi">EDI</a></li>
</ul>
</li>
<li class="li-4"><a href="#!/marketing"><span class="lbl">Marketing</span><span class="ico -def"></span><span class="ico -hvr"></span></a></li>
<li class="li-5"><a href="#!/sales"><span class="lbl">Sales</span><span class="ico -def"></span><span class="ico -hvr"></span></a></li>
<li class="li-6"><a href="#!/mail"><span class="lbl">Employment</span><span class="ico -def"></span><span class="ico -hvr"></span></a></li>
</ul>
</nav>
</div>
</header>
And here is the CSS: Style.css
ANY help would be greatly appreciated and will get "points" for it, i have been working on this for over a week with no help, but i have decided i should reach out for help.
THANKS!
La solution