Docs

[powrider686]

Hey there,
On my site, http://henryebarr.wpengine.com/, I can’t figure out how to make the 1px white line between the logo and the top bar disappear. How could I make that disappear?

Also, how might I go about putting a phone icon in the topbar before the cell phone numbers on the left? I can’t get it to display properly.

Thanks for the help!

[Joao]

Hi There,

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

.x-topbar {
border: 0;
}

Hi there,

Please follow this example:

<a style="color:white; href=" tel:+1(970)485-0796"="">Christines's Cell - <i class="x-icon x-icon-phone" data-x-icon="" aria-hidden="true"></i> (970) 485-0796</a>

<i class="x-icon x-icon-phone" data-x-icon="" aria-hidden="true"></i> is the html code for the phone icon.

Hope it helps

Joao

[Rahul]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[powrider686]

This reply has been marked as private.

[Friech]

Hi Marcus,

Thanks for the credentials,

how to make the 1px white line between the logo and the top bar disappear.

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

.x-topbar {
	border-bottom: 0;
}

how might I go about putting a phone icon in the topbar before the cell phone numbers on the left?

Add this before your phone numbers. (We might need to style this later)

<i class="x-icon x-icon-phone" data-x-icon="&#xf095;" aria-hidden="true"></i>

The top bar is unusable and looks horrible when viewed on mobile devices currently.

Add this on your custom CSS:

@media (max-width:  767px) {
	.x-topbar .p-info {
		background-color: transparent;
	}
}

One final question, when viewed on mobile, the revolution slider doesn’t resize properly. Any ideas on there?

It does resize, please clarify the issue.

Thanks.

[powrider686]

Hey there,
Thanks for the help on this.

Got the topbar fixed, thanks for that.

That worked for the icon, but it is small. How would I make it bigger and change the color? Also, what setting or css would control all of the topbar text, and the separators between each of the names? It seems that different colors are showing up on different devices. For example, on my laptop, the text is all white, but on a mobile, the icon and phone numbers show up in Red.

Lastly, I have attached what I see when viewed on mobile devices, both in Chrome and Safari.

There are a few problems with it:
The top bar is hard to read because of the spacing and text color. Could I condense it all into a smaller area with contact info on the left and the social icons on the right? Otherwise stacked is fine I suppose. How could we lessen the padding around the social icons?

I can’t figure out how to change the alignment and vertical centering of the mobile menu icon. It doesn’t seem to respond to the customizer settings.

The slider revolution doesn’t resize. I mean the image itself does, but it doesn’t resize the layer properly and it displays below the slider and over the next section.

Thanks for the help!

[Rad]

Hi there,

For icon size and color, please add this

.p-info .x-icon {
    font-size: 16px;
    color: #fff;
    display: inline-block;
    margin-right: 5px;
    position: relative;
    bottom: -3px;
}

Each device has their own way handling the phone number. You can actually control topbar’s links with this CSS,

.p-info a {
    font-size: 16px;
    color: #fff;
}

and phone numbers like this

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

And for the messy look, it can’t be fixed without changing its structure. The problem with it is there is no grouping, and I’m not really sure how it should be fixed since you’re not sure how it should look. Depending on the requirement, the structure will vary too. Else, it will look the same as attached screenshot (each element is the independent element which will stack with each other, there is no selector to style each either). How about providing a final mockup design of how should it look?

Hence, this content is wrong if you wish to make it work on mobile too.

<i class="x-icon x-icon-phone" data-x-icon="" aria-hidden="true"></i></i><a style="color:white; href="tel:+1(970)389-7533">Henry's Cell - (970) 389-7533</a> | <a style="color:white; href="tel:+1(970)333-3593;"> Kate's Cell - (970) 333-3593</a> | <a style="color:white; href="tel:+1(970)485-0796">Christines's Cell - (970) 485-0796</a>

And for the rev. slider, please check these https://www.themepunch.com/revslider-doc/layer-responsive-behavior/, https://www.themepunch.com/faq/mobile-viewport-options-missing/, and https://www.themepunch.com/revslider-doc/slider-setup/#slidelayout. Especially this

You enabled custom grid for mobile, but you didn’t arrange and positioning your layers under that device view.

Thanks!

[powrider686]

Sweet, thanks for the help. Got the icon and slider fixed.

For the topbar layout, I’d like it to work on mobile, and have the three phone numbers be stacked on the left side. Then the social icons would be on the right in a horizontal row that are centered to the middle of the phone numbers.

Another question, how can I get ride of the spacing(margin?) that appears on the top of the custom heading element? It seems that it has 50ox or so of spacing every time I use it.

Appreciate the help!

[Rad]

Hi there,

1. I see, in that case, please change your top bar content to this

<span class="top-bar-phone">

<i class="x-icon x-icon-phone" data-x-icon="" aria-hidden="true"></i></i><a style="color:white;" href="tel:+1(970)389-7533">Henry's Cell - (970) 389-7533</a> <span class="phone-separator">|</span> <a style="color:white;" href="tel:+1(970)333-3593;"> Kate's Cell - (970) 333-3593</a> <span class="phone-separator">|</span> <a style="color:white;" href="tel:+1(970)485-0796">Christines's Cell - (970) 485-0796</a>

</span>

And add this CSS as well,

@media ( max-width: 767px ) {

  .phone-separator {
  display: inline-block;
  clear: right;
  float: left;
visibility: hidden;
  }

.top-bar-phone, .top-bar-phone * {
float: left;
}

.top-bar-phone {
position: relative;
padding-left: 20px;
}

.top-bar-phone i {
position: absolute !important;
left:0;
top: calc(50% - 10px);
}

.x-topbar .x-social-global {
    float: right !important;
    margin-bottom: 8px;
    position: relative;
    top: -40px;
    height: 0px;
    min-width: 95px;
}

}

2. You can use spacing helps like mtn (margin-top-none). Add mtn to your custom headline’s class input/attribute.

Cheers!

[powrider686]

That worked great, thanks!

[Rue Nel]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Author]

Posts