Docs

[AVENGER]

Hello,

I am trying to customize the topbar, and I’ve used some of the codes I found here on this forum and I wasn’t lucky. So I hope you can help me again 🙂

I would like to:

1. Make the topbar a bit smaller, maybe 25px in height.
2. Make the topbar background black.
3. Add flag image top left.
4. Add text, right next to the flag image.
5. Increase the topbar font size.
6. Change the topbar font color to white.
7. Have this all inline.

Then, I would also like to add links to the left of topbar social icons.

Please help 🙂

[Prasant Rai]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[AVENGER]

http://www.avenger-usa.com

[Friech]

Hi There,

Thank you for the URL! #1 & #2 You can add this under Custom > CSS in the Customizer.

header .x-topbar {
	max-height: 25px;
	min-height: 0;
	background-color: #000;
}

#3 The flag is already on the left side, please clarify.

#4 Update your topbar content to this:

<img src="http://avenger-usa.com/wp-content/uploads/2016/10/United-States-2.png" /> <span>Lorem ipsum dolor sit amet</span>

#5 & #6 add this on custom CSS as well, please note that a larger font-size might not fit on the 25px topbar.

header .x-topbar .p-info {
	font-size: 1.2em;
	color: #fff;
}

#7 It should be inline by default.

#8 Please provide us screenshot/mock design on how do you want this links to look like on the topbar.

Cheers!

[AVENGER]

So I’ve added the code and it works but I don’t believe it is vertically centered. The flag looks is to the bottom, the text seems higher, and the social icons now are also to the bottom instead centered vertically.

and for #8

What I am trying to do is, I would like t add links to the left of social incons of the topbar.

Something like this:

[user icon] Login [reg icon] Register | [social icons]

When logged in I would like Login change to Logout and Register change to My Account

[Rue Nel]

Hello There,

Please have this block updated:

header .x-topbar {
	max-height: 25px;
	min-height: 0;
	background-color: #000;
}

You can make use of this code:

header .x-topbar {
	min-height: 0;
	background-color: #000;
}

.site .x-topbar .p-info,
.site .x-topbar .x-social-global {
    margin-bottom: 15px;
}

#8] To have a login/logout/register in the topbar, please check out this topic: https://community.theme.co/forums/topic/login-and-register-or-logout/#post-1057503

Hope this helps.

[AVENGER]

Hello,

I updated the code but for some reason the text next to the flag is still going up and is not vertically centered with the flag. I would rather be centered, or at least aligned bottom not top.

[AVENGER]

Although, thank you for your assistance so far!

[Paul R]

Hi,

To align it, you can add this under Custom > CSS in the Customizer.

header .x-topbar .p-info img {
    float: left;
    margin-right: 3px;
}

header .x-topbar .p-info {
    line-height: 25px;
}

Hope that helps.

[Author]

Posts