Docs

[nathanr_]

Hi,

I would like help with the header of a website, if you could push me in the right direction that would be greatly appreciated.

I have attached an image of how I would like the header of the site to look and I am wondering how I could achieve this the easiest way possible?

On a mobile I do not need the numbers visible just the logo.

Currently I just have the logo on the site to the left using this css:

/* align logo left – HEADER
———————————*/

.x-logobar {
text-align: left;
}

How can add the text and icons as in the attached image?

Thank you for your help
Nathan

[nathanr_]

This reply has been marked as private.

[Jade]

Hi Nathan,

Looks like the image did not get successfully attached.

Kindly try to resize and reattach it so that we will know what you are trying to do.

Thank you.

[nathanr_]

This reply has been marked as private.

[Joao]

Hi There,

I believe the easiest would be to hide your logo bar and add the content to your topbar instead.

Go to Appereance | Customizer | Header and add the logo and the other content to your topbar.

Than add to Appereance > Customizer > Custom > CSS

.x-logobar {
display: none;
}

Let us know if you need further assistance.

Thanks

[nathanr_]

Hi,

Will using the topbar allow me to replicate the mock up header image I have sent?

If so could you point me in the right direction as your answer is very vague how I would go about achieving the mock up header . .

Thank you
Nathan

[Joao]

Hi Nathan,

Please add the folowing code to Appereance > Customizer > Header > Topbar Content.

<img class="toplogo" src="//173.193.60.90/~renovation/wp-content/uploads/2015/12/Untitled-2.png" alt="Renovation  Company">

<a href="www.example.com" class="link1"> <i class="x-icon x-icon-phone-square" data-x-icon="" aria-hidden="true"></i>Link1 </a>

<a href="www.example.com" class="link2"><i class="x-icon x-icon-phone-square" data-x-icon="" aria-hidden="true"></i> Link2 </a>

<a href="www.example.com" class="link3"><i class="x-icon x-icon-envelope" data-x-icon="" aria-hidden="true"></i>Link3 </a>

And to Appereance > Customizer > Custom > CSS

.toplogo {
padding-right: 10%;
}
.x-topbar a {
font-size: 20px;
padding-right: 10px;
padding-left: 10px;
}

.x-topbar a:before{
        font-size: 20px;
position: absolute;
text-align: left;
}
.x-topbar a.link1:before{
    content: "aaa";
}
.x-topbar a.link2:before{
    content: "bbb";
}
.x-topbar a.link3:before{
    content: "ccc";
}

Change the logo url for your own logo and also your text and links to your own.

Hope it helps

Joao

[nathanr_]

This reply has been marked as private.

[nathanr_]

This reply has been marked as private.

[nathanr_]

This reply has been marked as private.

[nathanr_]

This reply has been marked as private.

[Joao]

Hi There,

In order that we can provide a custom solution would you mind to share your credentials with us in a private reply?

Thanks

[nathanr_]

This reply has been marked as private.

[Joao]

Hi Nathan,

I tweaked your code a bit, I did save it by mistake during the process, sorry about that, I guess it is better now.

Let us know if you need further help.

Joao

[nathanr_]

This reply has been marked as private.

[Author]

Posts