Docs

[Jeypolitan]

Hi there!

I have created a top-bar, which is now empty. I would like to add certain pages to my top-bar, such as “About me“, “Contact“, etc. As my top-bar is dark grey background, the title of the pages needs to be in white 🙂

Please advise.

All best,
Jennifer

[Jeypolitan]

This reply has been marked as private.

[Jade]

Hi Jennifer,

Are you trying to add the page title links in the topbar? If so, you can follow the suggestions mentioned in this thread: https://community.theme.co/forums/topic/add-menu-to-topbar/#post-1163026

Let us know if you need further clarification.

[Jeypolitan]

Hi there,

Thank you for the thread but it isn’t exactly what I meant, as this thread is to add a menu.
I would only like to add my page “About me” and “Contact” to the top bar 🙂

I believe, after reading the forum, that there is a code I should paste in my functions.php and perhaps a CSS code?

All best,
Jennifer

[Joao]

Hi Jennifer,

You can simply add this to your Appereance > Customizer > Header > Topbar Content

<a ref="http://jeypolitan.com/about-me/" tabindex="0">About</a> &nbsp &nbsp <a ref="http://jeypolitan.com/contact/" tabindex="0">Contact</a>

Hope it helps

Joao

[Jeypolitan]

Thaaank you, that did the trick perfectly! 🙂
How can I make the text larger and in white? I would also like for the text to be further to the left (reduce the margin/padding I assume?)

All best,
Jennifer

[Jade]

Hi Jennifer,

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

.p-info a {
    color: #fff !important;
    font-size: 13px;
}

.x-topbar-inner {
    width: 90% !important;
    max-width: none !important;
}

Hope this helps.

[Jeypolitan]

Hey there,

Thanks – that made the text white 🙂

1. The links no longer work. When clicking on “About me”, nothing happens.
2. It has a dotted underline. I would like to remove this underline.

Best,
Jennifer

[Friech]

Hi Jennifer,

I did go ahead and updated your topbar content to correct it. I also updated css code Jade’s provided to remove the dotted underlined on the link.

Hope it helps, Cheers!

[Jeypolitan]

That worked perfectly – thank you so much! 🙂
Have a great day!

[Prasant Rai]

You are most welcome. 🙂

[Jeypolitan]

Hi again,

How do I make a bigger space/margin in between the two pages in the topbar? 🙂

All best,
Jennifer

[Joao]

Hi Jennifer,

Please add the following code to Appearance | Customizer | Custom | CSS

.x-topbar .p-info a:last-child {
margin-left: 25px;
}

Hope that helps

Joao

[Jeypolitan]

Hi there,

For some reason, your code above did not work 🙁 So I do not have any bigger space/margin in between the pages in my topbar.

#1: How do I add spacing/margin between the pages in my topbar?
#2: How do I get the pages/titles in my topbar to be uppercase?
#3: How do I add space/margin between the letters in my topbar?

Thank you! Please see attached screenshot of how I would love my topbar to be be like.

Best,
Jennifer

[Jade]

Hi Jennifer,

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

.x-topbar .p-info a {
    display: inline-block;
    margin: 0 !important;
    padding: 0 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

Hope this helps.

[Author]

Posts