Docs

[liveandperform614]

Before I explain what’s happening, here’s a screenshot of how it looks like : http://img15.hostingpics.net/pics/791004Screenquestionforum.png

It is pretty simple, on tablet or big mobile devices, when I am oppening the menu, it just slides to the bottom like this, I’d like tout know the CSS code to correct that !
Of course, I want the menu to be just under the top bar when it’s open without any blank space.

[liveandperform614]

This reply has been marked as private.

[Jade]

Hi there,

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

@media (max-width: 979px) {
    .x-navbar {
        transform: inherit;
        margin-top: 48px;
    }
}

Hope this helps.

[liveandperform614]

It worked perfectly thank alot goodjob !

Last thing that I can’t figure out by myself is :

When you open the website, then you progressively reduce the window manually (to go through all the different sizes), the first transition to “mobile mode” makes the mobile menu centered which is a big problem that I’d like to correct, when you continu to reduce the window, then, it goes back to normal : what I would like to happen as soon as it switches to mobile mode (mobile menu on the right) so it’s only that small part that I’d like to correct !
And to add to the problem, on that part, text logo and social icons are not vertically centered anymore !
What code can I use to correct that part without affecting the others sizes?

Thank you alot, Hope it’s clear !
Best regards.

[Paul R]

Hi,

Thank you for the clarifications.

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

@media (max-width: 1100px)
body .x-btn-navbar {
    float: left;
}

body .x-brand {
    width: 100%;
    text-align: center;
    clear: both;
    float: none;
    margin-bottom: 20px;
}
}

Hope that helps.

[liveandperform614]

It worked perfecly thank you !
Another little problem, here’s the code then I’ll explain the goal :

.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
background-color: none;
color: #d3dbe5;
-webkit-transition: all 0.2s ease-out;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;}

it alows me to make a transition with the hover color, it comes in 0,2s and then it’s less agressive !
I want to add a transition when the color is fading away (when you’re not over the text anymore) too but i’m unable to find how by myself, can you help me?

best regards !

[Nico]

Hi There,

Happy to hear that it is worked perfectly.

Try adding this code above.

transition: all 3s ease-out;

adjust the seconds to achieve the best result you want.

Let us know how it goes.

Thanks.

[liveandperform614]

Didn’t do anything, sorry ! (like if I didn’t change anything)
What would be the whole code?

Thank you !

[Christopher]

Hi there,

Please add this block of code :

.x-navbar .x-nav-wrap .x-nav > li > a {
 
    transition: all 3s ease-out;
}

Hope it helps.

[liveandperform614]

It’s just perfect ! Thank you alot !
The X THEME service is just wonderful !

[Friech]

Glad we could help, please feel free to get in touch with us regarding any further queries about the X|Theme and Cornerstone.

Cheers!

[Author]

Posts