how to edit css inside javascript

Ask A Question

Login To post a question

I have a logo in my website, when the user opens my website the logo is big, but when he scrolls it becomes small. i did that using javascript like below

window.onscroll = function() {

  function growShrinkLogo() {
    var Logo = document.getElementById("logo")
    if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) { = '80px';
    } else { = '200px';
<div   class="logo">
        <div class="relative-logo">
          <img id="logo" src="assets/images/logo.png" alt="logo">

the first logo which appears is a littile bit right towards the page and the second is properly in the center, like below images

enter image description here

enter image description here

when i am trying to move the bigger logo it is effecting the small logo because both of it is in the same div. how can i make the bigger logo which appears when the page load to the center without effecting the smaller logo. can anyone help

For more info please click here

Have a question or need a custom quote?