Search code examples
javascripthtmlcssimagesticky

HTML / CSS: Image turns bigger


I am trying to make this website, and I want the logo to look like in the image (the logo is in the top left corner), I had it working before, but after figuring out how to get the links? (list elements) to the other side of the wrapper, the image suddenly became bigger (https://codepen.io/kyan0045/pen/ZEMVGdW) I was unable to figure out how to fix it, but if anyone would be able to help me, it would be much appreciated.

The css I added & after which the links were moved & the logo turned bigger is:

.navigation-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.navigation-container ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation-container li {
  margin-left: 20px;
}

@media (max-width: 767px) {
  .navigation-container {
    justify-content: center;
  }

  .navigation-container ul {
    flex-direction: column;
    align-items: flex-end;
  }

  .navigation-container li {
    margin-left: 0;
    margin-bottom: 10px;
  }
}

#logoheadurl {
  position: absolute;
  left: 0;
}

.container.accordion {
  padding-right: 0;
}

.container.accordion .row {
  margin-right: 0;
}

.container.accordion .navigation-container {
  width: 100%;
  justify-content: flex-end;
}

.row {
  display: flex;
  align-items: center;
  line-height: 69px;
}

.mobile-toggler-wrapper {
  display: flex;
  justify-content: space-between;
}


    .row {
      display: flex;
      align-items: center;
    }

    nav .container .row [class^=col-] {
      line-height: 69px;
    }

    .mobile-toggler-wrapper {
    display: flex;
    justify-content: space-between;
}

I tried to move the "Home" "Xex" & "Xex" list elements to the other side of the wrapper, while keeping the logo in place. I managed to get it to work, but somewhere along the line I did something that also made the logo bigger. I expected it to stay the same and don't know what I did wrong..


Solution

  • The logo turned bigger:
    
    I have gone through your code and found a solution.
    I have also attached a screenshot how what it looks like: 
    https://prnt.sc/lRTbwVhshJ5R
    
    Please remove the following CSS from your code:
    (This Css is in your HTML file)
    
    #logoheadurl {
      position: absolute;
      left: 0;
    }