Docs

[jensmith3]

Hello,

My site is at dev.shsp.com.au

In my topbar I have added the following:

<p class=”alignright”; >02 4862 5063</p>

AND added this to my child theme:

}
.x-topbar-inner p { font-size: 24px; color: #fff; }

The content in the topbar works fine but the style adjustments don’t. What have I missed?

SECONDLY:
I would like to right-align the social icons in the header so that the phone number and Facebook items are both right-aligned.

THIRDLY:
Is it possible to align the bottom of the logo with the bottom of the text in the nav bar?

Thank you so much and kind regards,

Jenny

[jensmith3]

This reply has been marked as private.

[jensmith3]

Also, is it possible to top align both the logo and the phone number?

Thanks again,

Jenny

[Prasant Rai]

Hello Jenny,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.x-topbar-inner p { font-size: 24px; color: #000; }

.x-topbar .x-social-global a {
    color: #ddd;
}

.x-topbar .x-social-global {
    clear: both;
    float: right;
}

Can you please elaborate third question?

Thanks.

[jensmith3]

Thanks so much,

Almost perfect, just a couple of tweaks. Can I align the top of the logo with the top of the phone number on the right-hand side?

Also, can I change the size and colour of the Facebook icon?

With thanks and kind regards,

Jenny

[Christopher]

Hi there,

Please add logo to topbar, to do so insert following code in topbar area :

<a href="http://dev.shsp.com.au/" style="float:left;" title="Speech pathology in the NSW Southern Highlands">
  <img src="//dev.shsp.com.au/wp-content/uploads/2016/12/logo.jpg" alt="Speech pathology in the NSW Southern Highlands"></a>

To hide logobar, add following code in customizer :

.x-logobar {
    display: none;
}

Hope it helps.

[jensmith3]

Wonderful, thanks so much. Is it possible to reduce the size of the logo or should I reduce the original image size itself?

Thanks so much.

Kind regards,

Jenny

[jensmith3]

And sorry, also to have the social Facebook icon right-aligned underneath the phone number and the same font size?

Thanks again,

Jenny

[Paul R]

Hi Jenny,

Kindly change the code to this.

<a href="http://dev.shsp.com.au/" style="float:left;" title="Speech pathology in the NSW Southern Highlands">
<img width="100" src="//dev.shsp.com.au/wp-content/uploads/2016/12/logo.jpg" alt="Speech pathology in the NSW Southern Highlands"></a>

Then add this in custom css

.x-topbar .x-social-global {
    top: 50px;
    position: absolute; 
    right: 0;
}

.x-topbar .x-topbar-inner {
   position:relative;
}

Hope that helps.

[jensmith3]

Too good, thank you. Is it possible to also alter the background color and size of the hover state of this?

Indebted,
Kind regards,

Jenny

[Nico]

Hi There,

Add this in your Custom CSS:

.x-social-global a:hover.facebook{
background-color:#3b5998;
}

Let us know how it goes.

Thanks.

[jensmith3]

Hello again,

That’s great thank you. Is it possible to change the colour of the ‘f’ in the social icon so that it stands out in the hover state?

Many thanks and kind regards,

Jenny

[Paul R]

Hi Jenny,

You can add this under Custom > Edit Global CSS in the Customizer.

/* default state */
.x-topbar .x-social-global a i {
    font-size: 20px;
    color:blue;
}
/* hover state */
.x-topbar .x-social-global a:hover i {
    color: red;    
}

Hope that helps.

[jensmith3]

Absolutely awesome – thank you so much.

Kind regards,

Jenny

[Lely]

You’re welcome Jenny!

Cheers!

[Author]

Posts