Docs

[jsjmccracken]

Hello,

On http://www.tablerockkennels.com/ how do I add text above the navbar? I want to add “Providing exceptional companions for the home and the hunt” above the logo and navbar.

Thank you!

Jacob McCracken

[jsjmccracken]

I was able to add the text via the Appearance> Customize> Header> Miscellaneous> Topbar Content but the .p-info class isn’t working when I try changing the font-size, color and alignment… How do I go about doing that?

[Joao]

Hi There,

Please use:

.x-topbar .p-info {
font-size: 20px;
}

If you need further help please provide us more details about what you are trying to achieve and we will gladly help you.

Thanks

joao

[jsjmccracken]

Thank you for the reply, the font size and color works 🙂

I would like to center the wording in the topbar and have the background in the topbar be the background image so I added the following code:

.x-topbar .p-info {
font-size: 1.5em;
color: #a4a8a5;
text-align: center;
background: url(“http://www.tablerockkennels.com/wp-content/uploads/2016/04/TRK-website-background2.jpg”);
}

but this did not work.

[Rupok]

Hi there,

Your background image doesn’t exists on that given path – http://www.tablerockkennels.com/wp-content/uploads/2016/04/TRK-website-background2.jpg

So make sure to provide a right image path. Also it would be better approach if you apply the background to the topbar NOT to the paragraph tag :

.x-topbar {
  background: url("http://www.tablerockkennels.com/wp-content/uploads/2016/04/TRK-website-background2.jpg");
}

.x-topbar .p-info {
  font-size: 1.5em;
  color: #a4a8a5;
  text-align: center;
}

Hope this helps.

Cheers!

[jsjmccracken]

That makes sense where the background image would go. Thank you!

For some reason the text in the topbar is still not centering above the navbar…?

[Christopher]

Hi there,

Please add this code too :

.x-topbar .p-info {
    float: none;
}
@media (min-width:979px){

.x-social-global {
    margin-top: -38px !important;
}
}

Hope that helps.

[jsjmccracken]

Thank you! It is now centered.

When I resize the screen to a mobile version the black background still comes up behind the topbar text. I added:

.x-topbar .desktop {
background: url(“http://www.tablerockkennels.com/wp-content/uploads/2016/04/TRK-website-background2.jpg”);
border: none;
}

.x-topbar .mobile {
background: url(“http://www.tablerockkennels.com/wp-content/uploads/2016/04/TRK-website-background2.jpg”);
border: none;
}

but that didn’t work. How do I go about getting that fixed?

Thank you!

[Jade]

HI there,

Please update this code:

.x-topbar .p-info {
    float: none;
}

to

.x-topbar .p-info {
    float: none;
    background: transparent !important;
}

Hope this helps.

[jsjmccracken]

Thank you! This is all I needed 🙂

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts