Docs

[TPL99]

Hi, A few questions about topbar formatting:

-currently I’m happy with how my topbar looks on a computer, but on mobile it looks messed up. There is a big white box instead of the blue background. Also, can I control how the text and phone numbers appear on the mobile? ie. I want the phone number to all be on one line in mobile.

-also, can I control the color of the phone number on the topbar and header bar? Currently it is light blue.

-what is the code to center or right align the text on the topbar?

-can I set up a link from some of the text on the topbar to my contact form page?

-also, a navbar question: can I change the color of the horizontal bars that light up in light blue when you hover?

[TPL99]

This reply has been marked as private.

[Joao]

Hi There,

To Remove the white box on top bar on mobile please add to your Customizer / Custom / CSS the following code:

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

To make the top bar information float right you should add the following code to your Customizer / Custom / CSS

.x-topbar .p-info  { 

float: right;

 }

To Center the top bar content please add the following code to your Customizer / Custom / CSS

.x-topbar {
text-align: center !important;
}

.x-topbar .p-info {
float: none;
}

To set up links you just need to wrap your word into a html href tag. You do that on the Header/ Topbar Content area, same place where you wrote your telephone:

This is an example of a link :

<a href="/contact-us">CONTACT US</a>

The horizontal bars that light up in light blue when you hover is blue because it follows the same color as you set for your website links on Customizer / Typography. If you would like that the bars have a different color from your links please add the following code to your customizer:

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: 0 2px 0 0 #ff9900;
}

Please change #ff9900 for the desired color.

Hope that helps,

Joao

[TPL99]

Thanks!

However, something is not working. I put the code you suggested in the customizer to fix the mobile formatting (white box remove), but nothing happened… Did I do it wrong?

[Joao]

Hi there sorry to hear about I guess I forgot one closing },

Lets try differently, Please add the code:

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

If it doesn’t work, please try:

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

Hope that helps this time 🙂

Thanks,

Joao

[TPL99]

Hi, I tried adding both of those strings of code in the custom CSS, but neither fixed the problem with the big white box on mobile display… I had to turn off the topbar until this can be fixed since it looked very bad. Do you have any more ideas for this?
Thanks

[Rue Nel]

This reply has been marked as private.

[TPL99]

This reply has been marked as private.

[Thai]

can you make that previous post private?

Sure.

If you need anything else please let us know.

[TPL99]

thanks. I got the topbar fixed now. I had to take that code you gave me and put it in a different place in the custom CSS.

[Joao]

Great to see the issue was fixed.

[Author]

Posts