Customizing the top-bar

Support
#1

Hi,

I would like to customize the top-bar’s:
text alignment, font size, font color, link hover font color, top-bar height.

can you send me the css selectors for that?
and p.s. - Is there an X theme css selector reference?

Thank you.

#2

Hello There,

Thanks for writing in!

CSS selectors for topbar are .x-topbar, .x-topbar .p-info and .x-topbar .x-social-global. You can also refer our CSS class index:

Thanks.

#3

Thank you,

I can’t seem to center align the text in the top bar and change the p-info text color to white.

one more thing - on mobile / tablet mode topbar color changes - I would like it to remain the same —

The proper css would help me a lot here…

thank you!!!

#4

I would also appreciate the css for changing the link hover text color.

Thanks.

#5

Hello @yoavtaler,

You can add following CSS:

.rtl .x-topbar .p-info {float: none;text-align: center;}

body .x-topbar .p-info a:hover {color: #fff;}

Can you please elaborate second question with respect to mobile/table?

Thanks.

#6

Thanks.
Here is the desktop display:

When I resize the screen, the top-bar becomes white:

I would it to stay red also on tablet/mobile size.

Thanks.

#7

The “float: none” and font color are overridden by other css file, the code I put in my child theme’s css doesn’t work.

Any ideas?

Thanks.

#8

Hi There,

Please watch this clip on how to use Google Chrome Inspect Element tool, so you’ll know what selector you need, the more specific your selector the better.

Then after you have the right selectors, you need to apply this CSS properties.

color - for text color
height - for the element height
text-align - for text horizontal alignment
font-size - for the size of your text.

Its the same for hover effect, you just need to add a :hover pseudo-class to your selector.

I can’t replicate the issue of white topbar on mobile, have you already resolve the issue? Please clear your browser’s cache.

Hope it helps,
Cheers!

#9

Hi,

I’m not a coder. Customizing css with the X top bar is taking too much of my time, so I’d I rather use an external topbar plugin that offers me control without coding, and with more functionality.
I think this is feature request, actually.

Thank anyway.

#10

Hi there,

For that feature, you can then use the Pro’s header builder :slight_smile:. X theme has a standard header with few options.

Thanks!

#11

Aha, I see :wink:
Thanks, I might just do that!

#12

You’re welcome! :slight_smile: