Docs

[Headlines34]

See attached. Box still exists. Nav button is centered, but the lines are off center.

Thanks,
Chuck

[Headlines34]

Attached

[Rupok]

Hi there,

Thanks for writing back. I can see the gray box in topbar. Let’s add this CSS to fix this :

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

But there is no issue on Navbar button. Did you take off the code? Let us know what you are facing right now.

Cheers!

[Headlines34]

Now it’s smashing the top bad links together. Pic attached

[Headlines34]

attached now

[Rad]

Hi there,

With or without that CSS, it’s already looking like that on my end due to an absolute position. How should it appear? Should stack in two lines in the center, or should align to left, or align to right?

I just like to know since there are existing CSS which I’m not sure if intentional or not.

Thanks!

[Headlines34]

One should be left align and the other to the right align.

Thanks

[Headlines34]

Aligns correctly on mobile but not desktop. position doesn’t need to be absolute, just left align and right align, whichever practice is best.

[Jade]

Hi Chuck,

Please update this code:

.x-topbar p {
    font-size: 17px;
    position: absolute;
    top: 5px;
    text-align: center;
}

to

.x-topbar p {
    font-size: 17px;
    text-align: center;
    width: 170px;
    margin-bottom: 0;
    padding-top: 8px;
}

Then add this:

.x-topbar .text-left {
    float: left;
}

.x-topbar .text-right {
    float: right;
}

p:empty {
    display: none;
}

Hope this helps.

[Headlines34]

Not much luck. The text is no longer on top of each other, but it’s not aligning properly. Both are aligned left.

[Jade]

Hi there,

Kindly provide us with your admin details so that we could check on your current CSS codes in the customizer.

Thank you.

[Headlines34]

This reply has been marked as private.

[Jade]

Hi Chuck,

This seems to be details for a different site. Kindly provide us with the correct details.

But for the meantime, kindly try adding again the code we suggsted previously but make sure that the code above it which is:

@media (max-width: 700px) {
    .masthead-inline .x-btn-navbar {
        display: block;
        float: none;
        margin: 10px auto;
        width: 50px;
        clear: both;
    }

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

has no missing closing }.

[Headlines34]

This reply has been marked as private.

[Headlines34]

I inserted that code. Just need to get the topbar links aligned; one left and one right.

Thanks

[Author]

Posts