HOW TO REPRODUCE THE https://theme.co/x/ SITE DESIGN

[REVINAX31]

Hello and congratulations for your wordpress theme X.

I want to use the gray navbar design on https://theme.co/x/.
I tried to reproduce it without success via the Integrity stack.

I can not configure the navbar in the same way.

Should I take another stack?
How do I proceed ?

Thank you for the indications that will allow me to unlock the situation.

[lely]

Hi Laurent,

No need to change stack. It is using integrity.
For detailed guide, please check this thread.

Hope this helps.

[REVINAX31]

Hi Lely,

Thanks for your answer but I know how to use Revolution Slider.
I want to have the same Navbar in grey with title page separator.
My Navbar is just in dark and isn’t fixed at the top on the mobile version.

How can I do that ?

[jade]

Hey Laurent,

The navbar in the splash page has some customizations to it that is why it has the separators.

To change the background color of the navigation area, please add this code in X > Theme Options > CSS:

.masthead .x-navbar {
    background-color: #333;
}

.x-navbar .desktop .x-nav>li:not(:last-child) {
    border-right: 1px solid #171717;
    box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.065);
}

And to make it fixed on mobile, please add this code as well:

@media (max-width: 979px) {
    .x-navbar-fixed-top {
         position: relative;
    }
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[REVINAX31]

Hey Jade,

Great !
The navbar is now grey with separators, but why it isn’t fixed at the top on the mobile version ?

Another problem is that 3 Timelines presents on the website are not visible on the mobile version ?

Please help me, Thanks for your answer.

[lely]

Hi Laurent,

Please update above CSS to this:

@media (max-width: 979px) {
    .x-navbar-fixed-top {
         position: fixed;
    }
}

Regarding timelines, section is hidden on smaller screen. Please inspect section and check HIDE BASED ON SCREEN WIDTH property.

Hope this helps.