Header Error

  • worldmatters

    (@worldmatters)


    10 years, 5 months ago

    Hi,

    Please can someone please advise on re-aligning my header area / logo with css for my site as it looks really out of line,

    yourcleaningmatters uk

    Thanks

Viewing 7 replies - 1 through 7 (of 7 total)
  • d3sk1ng

    (@d3sk1ng)

    10 years, 5 months ago

    I’m not sure I understand…
    To align the logo and the menu add this css code:
    .logo {
    float: left;
    }

    Thread Starter worldmatters

    (@worldmatters)

    10 years, 5 months ago

    Thanks for helping, yes it’s improved it a little, but what I wanted to do is make the gap between the logo and text info in the top right hand side gone.

    So it look like the menu, then the logo on the far left and then the text on the top right all lined up together, because at the moment there is a big gap between the two ( the logo and the text )

    Many Thanks for your help I really appreciate it !!

    Local Fame

    (@localfame)

    10 years, 5 months ago

    Get the text and the logo (and the css, you have there), put them together in another div with styles:
    display: inline-block;
    width: 100%;
    margin-top: 60px; (or whatever margin you find suitable)

    add “float: left;” and remove margin-top from the div with the logo
    add “float: right;” to the div with the contact details

    and it’s done

    Thread Starter worldmatters

    (@worldmatters)

    10 years, 5 months ago

    Thanks Local Fame,

    I don’t really understand the div codes and styles would it like this ?

    .logo {
    float: left;
    }

    <div> display: inline-block; </div>
    <div> width: 100% </div>

    Thanks For Your Help !

    Local Fame

    (@localfame)

    10 years, 5 months ago

    like this:

    <div style="display: inline-block; width: 100%; margin-top: 60px;">
  <div class="GeneratedText" style="float: right;">Contact T:01572 539469 E:mail@yourmatters.co.uk</div>
  <div class="logo" style="float: left; margin-top: 0px;">
     <a href="http://www.yourcleaningmatters.co.uk"><img src="http://www.yourcleaningmatters.co.uk/wp-content/uploads/2015/11/water.png" alt="yourcleaningmatters.co.uk logo"></a>
  </div>
</div>
    Thread Starter worldmatters

    (@worldmatters)

    10 years, 5 months ago

    Hi Local,

    The issue I have is there is still a large gap within the header area, just plain white, I’ve copied what you put above mate ?

    Any ideas ? As it looks rubbish, well the actual site is only a few pages and as you can tell I’m no expert but trying to learn all the time !

    Many Thanks !!

    Local Fame

    (@localfame)

    10 years, 5 months ago

    aha, I see
    Then the code will be:

    <div style="display: inline-block; width: 100%; margin-top: 20px;">
  <div class="GeneratedText" style="float: right;">Contact T:01572 539469 E:mail@yourmatters.co.uk</div>
  <div class="logo" style="float: left; margin-top: 0px;">
     <a href="http://www.yourcleaningmatters.co.uk"><img src="http://www.yourcleaningmatters.co.uk/wp-content/uploads/2015/11/water.png" alt="yourcleaningmatters.co.uk logo"></a>
  </div>
</div>

    just margin-top is changed here

    Then find “.header .menu-bar” in your style.css and remove there
    margin-top: 46px;

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Header Error’ is closed to new replies.