CSS – Top to Logo = 0px

2 Views

I am working for a few hours right now on the CSS changes on one of my customer´s website. My customer wants the header image (logo) to appear at the top of the screen without a space between the top and the logo.

Read More
<header id="header">
  <div class="avada-row" style="padding-top:30px;padding-bottom:0px; overflow:hidden;">
    <div class="logo" data-margin-right="0px" data-margin-left="0px" data-margin-top="3px" data-margin-bottom="3px" style="margin-right:0px;margin-top:3px;margin-left:0px;margin-bottom:3px;">
      <a href="#">
        <img src="http://placehold.it/1000x100" alt="Heider Matriken – Falk Fengler" class="normal_logo">
      </a>
    </div>
  </div>
</header>

I do not find the correct .css settings to solve this problem and to move the header image to the top. I already tried: 

margin-top: -30px;

…but that is not working. It is a WordPress Site, I am using Avada and the only thing I need is the header image at the top.

Would be cool if someone can help me out.

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. The problem is that your generated code contains padding-top:30px in:

    <div class="avada-row" style="padding-top:30px;padding-bottom:0px; overflow:hidden;">

    I understand that you cannot change this, and a simple CSS won’t help you because the inline style is more important.

    Use this trick to override the inline style using an external CSS:

    .avada-row {
    padding-top:0px !important;
}

  2. either use this HTML

    <header id="header">
  <div style="padding-bottom:0px; overflow:hidden;" class="avada-row">
    <div style="margin-right:0px;margin-left:0px;margin-bottom:3px;" class="logo" data-margin-right="0px" data-margin-left="0px" data-margin-bottom="3px">
      <a href="#">
        <img src="http://placehold.it/1000x100" alt="Heider Matriken – Falk Fengler" class="normal_logo">
      </a>
    </div>
  </div>
</header>

    or use this css

    .avada-row {
    padding-top: 0px !important;
}
.avada-row .logo {
    margin: 0px !important;
}