Docs

[15bakes]

Hi on my site http://goldentouchwebdesign.com/ i need my topbar content inline with my logo.

[Joao]

Hi There,

Please turn off your topbar and add the following code to Appereance > Customizer > Custom > CSS

a.x-brand.img:after {
	content: "Email : [email protected] | Phone: (250) 908-8026";
	font-size: .4em;
	vertical-align: middle;
	margin-left: 8px;
	float: right;
  margin-top: 20px;
}

Hope it helps

Joao

[15bakes]

Hi I tried adding it a few times and it did not work

[Rupok]

Hi there,

Thanks for writing back. Let’s update the code a bit :

a.x-brand.img::after {
  color: #fff;
  content: "Email : [email protected] | Phone: (250) 908-8026";
  font-size: 0.4em;
  letter-spacing: 0;
  margin-left: 8px;
  margin-top: 20px;
  vertical-align: middle;
}

I have tested the code and hopefully it will do the job.

Cheers!

[15bakes]

hi now it looks very odd, haha.

If you could just get it like a topbar inline with the logo that’d be great.

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 15px;
    padding-right: 15px;
}

.x-navbar .desktop .x-nav > li > a > span {
     font-size: 13px;
}

Hope it helps

Joao

[15bakes]

I needed to take away your code because It looked awkward but here is a picture of how it looked http://imgur.com/a/8HvXh

[Jade]

Hi there,

Please try this:

a.x-brand.img::after {
  color: #fff;
  content: "Email : [email protected] | Phone: (250) 908-8026";
  font-size: 12.5px;
  letter-spacing: 0;
  margin-left: 8px;
  margin-top: 20px;
  vertical-align: middle;
}

Hope this helps.

[15bakes]

Hi sorry, by inline I meant stacked. Other then that the code looks great

[Joao]

Hi There,

To make it stacked, remove the code and go to Appereance > Customizer > Header and change from inline to stacked.

Hope it helps

Joao

[15bakes]

sorry I meant I want the topbar inline with the logo but stacked above it. I don’t want everything stacked. I want it to look like this site for example https://www.rankleads.com/

[Rue Nel]

Hello There,

Thank you for providing the example url. First you will need to remove the given css code from our previous replies. And then you will have to enable the topbar in the customizer. Simply go to Appearance > Customize > Header > Miscellaneous and turn “On” the topbar. In the topbar content, please put this html code;

<span style="color: #fff; font-size: 12.5px; letter-spacing: 0;">Email : [email protected] | Phone: (250) 908-8026</span>

We would loved to know if this has work for you. Thank you.

[Author]

Posts