Can I create this header with X themes?

Support
#1

Hello. I am trying to make my header look like the one for healthgains.com
Is it possible with this theme?

#2

Hey Gavin,

Thank you for reaching out to us. Yes it’s possible but it would require some custom development as well to achieve certain features. You can add the contact information in your Topbar by navigating to Theme Options > Header > Miscellaneous > Topbar Content but you need to enable the Topbar first.

For the transparebt Topbar and Navbar until scrolling you can follow this thread https://theme.co/apex/forum/t/transparent-nav-and-top-bar-on-home-page-only-solid-bar-once-you-scroll/14915/4

For the Mega Menu feature please see either the X Mega Menu feature here https://theme.co/apex/forum/t/features-megamenus/99 or you can achieve this with the UberMenu plugin which comes with X, please see https://sevenspark.com/docs/ubermenu-3/demo/mega and it’s documentation here https://theme.co/apex/forum/t/extension-ubermenu/75

As you see this requires a lot of effort and custom development as well that’s why we created Pro Header Builder to make lives easier, I’d suggest you to switch to Pro and use Pro Header Builder to create any type of Header. Pro gives you the flexibility and total control of how the elements are positioned and displayed.

Hope this helps!

#3

How do I increase the font size of the topbar text?

#4

Hey Gavin.

There is a default CSS that sets the font size of the topbar content but you can override it by adding this code in X > Theme Options > CSS:

.x-topbar .p-info {
    font-size: 16px;
}

Hope this helps.

#5

Thanks that worked.

How would I go about changing the color of this text?

Could I change the positioning of the text?
I would really like the phone number to appear on the right of the logo as it appears on HealthGains.com

#6

Hey Gavin,

To change the color and the position you can add the following code in the Theme Options > CSS:

@media screen and (min-width: 768px) {
    .x-topbar .p-info {
        color: #000;
        font-size: 20px;
        float: right;
        margin-left: 20px;
    }
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hope this helps!

#7

Everything worked except the color. I am trying to change the color to white.

#8

Hello Gavin,

To change the font color to white, please use this custom css:

.x-topbar .p-info a {
    color: #fff !important;
}

Hope this helps. Kindly let us know.

#9

That did work. Thank you.

Can I move the text to the right of my logo? it currently is on the top right. The site is optimalhealthmd.com

#10

Hey Gavin,

To achieve this please replace this code:

@media screen and (min-width: 768px) {
    .x-topbar .p-info {
        color: #000;
        font-size: 20px;
        float: right;
        margin-left: 20px;
    }
}

With this:

@media screen and (min-width: 768px) {
    .x-topbar-inner {
        position: relative;
    }
    .x-topbar .p-info {
        color: #000;
        font-size: 20px;
        text-align: right;
        position: absolute;
        right: 0;
        top: 55px
    }
    .x-topbar .x-social-global {
        float: left;
    }
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.