Docs

[Sara S]

Hi, Ive added some text in the topbar and it extends past the menu in the navbar right underneath it. How can that be fixed so it is perfectly aligned? (I tried changing the px to 0 but it still did not align.)

And how can I make the last word (CLIENT LOGIN) not go over to the next line for a better view on mobile?

Also, on mobile view there is a funny grey bar on top of the text in the topbar. How can I get rid of that?

THANKS!

[Sara S]

This reply has been marked as private.

[Paul R]

Hi Sara,

Thanks for writing in!

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

.x-topbar .p-info .alignright {
    padding-right: 16px;
}

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

.x-topbar .x-container.width {
    width: 100%;
}

.x-topbar .alignleft {
   display:none;
}

.x-topbar .alignright {
    padding-right: 0;
    float: none;
    margin: 0;
}
}

Hope that helps.

[Sara S]

It didn’t change anything. Could it be because I just made changes to the code? (got from themeco support in response to another question re: topbar content)

[Paul R]

Hi,

There could be a syntax error in your css code that is preventing the code from working.

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.

[Sara S]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for providing the information. They are not align because you have added a padding to the left and right for the navbar. To resolve this, you must add a padding for the topbar as well. You can add this under Custom > CSS in the Customizer.

header.masthead.masthead-inline .x-topbar {
    padding-left: 45px;
    padding-right: 45px;
}

Please let us know if this works out for you.

[Sara S]

No 🙁 it still did not do anything.

[Jade]

Hi Sara,

Please remove this code from the customizer:

header.masthead.masthead-inline .x-navbar {
padding-left: 30px;
padding-right: 30px;
}

then add this:

.x-navbar .desktop .x-nav>li:last-child>a {
    padding-right: 0;
}

Hope this helps.

[Sara S]

It still doesn’t work… still off by a bit. How can we align it perfectly?

[Christopher]

Hi there,

Please add this code :

.x-topbar-inner.x-container.max.width {
    width: 86%;
}

Hope it helps.

[Author]

Posts