Docs

[mhooijer]

Hi There,

I would like to edit my Topbar, but i can’t quite get it right.
I would like to re-recreate is as on the attached image.

Also, how can i add the icons as shown on the image?

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[mhooijer]

This reply has been marked as private.

[Christopher]

Hi there,

Demo page is broken.
What you’re experiencing this after the update. What you’re seeing is a result of the X CSS path structure being changed back in version 4.3.3. You can fix this by using the updated child theme format that isn’t stack specific. Or you can update the path in style.css of your child theme. For more information on this process, take a look at the 4.3.3 release notes: http://theme.co/changelog/#theme-4-3-3

Thanks.

[mhooijer]

This reply has been marked as private.

[Paul R]

Hi,

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

.x-topbar .x-social-global {
     margin-top:0;
}

.x-topbar .x-social-global a {
    padding: 10px;
    margin-left: 0;
    border-right: 1px solid #F69626;
}

.x-topbar .x-social-global a:first-child {
    border-left: 1px solid #F69626;
}

.x-topbar .p-info {
    padding: 0 10px;
    color: #F69626;
    border-left: 1px solid #F69626;
    border-right: 1px solid #F69626;
    margin: 0;
    line-height: 36px;
}

.x-topbar {
    border-bottom: 1px solid #F69626;
}

Then Change your topbar content to this.

<i class="x-icon x-icon-phone-square" data-x-icon="" aria-hidden="true"></i> 0123 345 678 | <i class="x-icon x-icon-envelope-o" data-x-icon="" aria-hidden="true"></i> [email protected]

Hope that helps.

[mhooijer]

Perfect, exactly what i wanted!

Is this also possible for the menu-header? So it will get orange lining.

[Paul R]

Hi,

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

.x-navbar {
    border-bottom: 2px solid #F69626;
}

.x-logobar {
        border-bottom: 1px solid #F69626;
}

.x-navbar .desktop .x-nav>li:first-child>a {
    border-left: 1px solid #F69626;
}

.x-navbar .desktop .x-nav>li>a {
    border-right: 1px solid #F69626;
}

Hope that helps

[Author]

Posts