Docs

[ocsweb]

Temp Website http://nlwebdesign.com/totalhome

I would like the topbar phone numbers to show up on mobile stacked on top of each other (not blocks – too much spacing). I would also like the social icons to be centered all on one row on mobile. Right now they are following the desktop floating left.

Lastly, the padding for the phone numbers and social are not centered on the topbar area. Please help.

[Rupok]

Hi there,

Thanks for writing in!
You can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 767px) {

.x-topbar p.p-info {
  float: none;
  margin-top: 10px;
}

body .x-topbar .p-info a {
  display: block;
  line-height: 15px;
  text-align: center;
}

.x-topbar .x-social-global a {
  margin: 0 10px;
}

.x-topbar .x-social-global {
  display: block;
  float: none !important;
  margin: 10px auto;
  width: 100%;
}
}

Hope this helps.

Cheers!

[ocsweb]

This was helpful, but I would like to make some changes.

1. I would like to remove the social icons from the topbar and make the 3 phone numbers centered with more spacing between them and a single line in between each one.

2. I would like a similar effect as http://throofing.com on the mobile version where it consolidates the 3 phone numbers into 1 button that opens a lightbox with the 3 choices. This new button would go at the top center of the mobile version.

[Darshana]

Hi there,

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

.x-topbar .x-social-global {
    display: none;
}

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

.x-topbar .p-info > a {
    margin-right: 10px;
}

#2. Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

[ocsweb]

Thank you. In that case, I decided to stay with what I had but utilize the code you sent to create more spacing between the phone numbers.

Instead, I would like help getting the alignment of the phone numbers on the desktop to move over and be in line with the menu. So the Daytona number would line up with the end of Contact Us on the menu.

Any other ideas on reducing the amount of space 3 phone numbers take up on the mobile version?

[Rue Nel]

Hello There,

Thanks for the updates!

1] To reduce the amount of space 3 phone numbers take up on the mobile version, please find this block of code and update it,

body .x-topbar .p-info a {
  display: block;
  line-height: 0;
  text-align: center;
}

Changing the line height to 0 will change the space taken up by the phone numbers.

2] To align the phone number in desktop, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(min-width: 768px){
  .x-topbar .p-info > a:last-child {
    margin-right: 0;
  }
}

Hope this helps.

[Author]

Posts