Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • June 2, 2015 at 7:14 pm #453331
    Evedd

    Hello,

    I’d like to have a header who looks like this :
    http://legrandmag.fr/wp-content/uploads/2015/06/header.jpg

    I already added a new widget aera for the header thanks to you guys here :-) but now, my client ask to have the little phrase on the right

    So few question:
    – how can I add a new widget zone to the header as I already add another one (by adding some text in my function file)
    – I really want the logos (widget aera in the header) I add to be visible by most of the browsers (apparently the first one I add doesn’t appear in Safari…)
    – when switching to responsive mode is this possible to at least have the central logo remaining ? it disapear when resizing the window.

    thank you,

    Eve

    June 3, 2015 at 4:51 pm #453932
    Elliott

    Hey Evedd!

    Go ahead and add the phrase as a text widget in the widget area you already setup and let us know when your done and we’ll give you some CSS to align it to the right side of your page.

    Cheers!
    Elliott

    June 3, 2015 at 5:53 pm #453980
    Evedd
    This reply has been marked as private.
    June 4, 2015 at 11:54 am #454388
    Ismael

    Hey!

    You need to add the text on the same text widget:

    <div class="logo-left"><a href="http://www.eiffageconcessions.com/"><img src="http://legrandmag.fr/wp-content/uploads/2015/06/logo.jpg"></a>
</div>

<div class="logo-right">
<span>Partenaire de vos projets</span>
</div>

    Add this in the Quick CSS field: 

    #header .widget {
  width: 100%;
  padding-top: 0;
  position: absolute;
  top: -130px ;
left: 0;
}

.logo-left {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.logo-right {
  position: absolute;
  right: 50px;
}

    Best regards,
    Ismael

    June 4, 2015 at 8:52 pm #454731
    Evedd

    Thanks.
    The only things is that under safari the central logo is on the right too…
    is there a way to avoid that ?

    June 4, 2015 at 8:58 pm #454733
    Evedd

    And also when I’m trying to style the phrase in H6 for example the phrase then appear at the top of the header :-(

    June 6, 2015 at 11:37 am #455437
    Ismael

    Hi!

    Remove the span tag:

    <div class="logo-right">
<h6>Partenaire de vos projets</h6>
</div>

    Replace the css code with this:

    #header .widget {
  width: 100%;
  padding-top: 0;
  position: absolute;
  top: -130px ;
left: 0;
}

.logo-right {
  position: absolute;
  right: 50px;
  top: 50px;
}

.logo-left {
  margin: 0 auto;
  width: 332px;
}

    Adjust if necessary.

    Regards,
    Ismael

    June 6, 2015 at 3:03 pm #455501
    Evedd

    Thanks for all your answers ! it works

    June 8, 2015 at 8:47 am #455783
    Rikard

    Hi!

    Great, glad we could help :)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Header with three logo’ is closed to new replies.