Docs

[davidferp]

Hi Support Team!

I am designing my updated site with X and I’ve a couple of questions:

1) I started by adding a logo in the center of the menu. I created an additional menu entry to add the logo and now I find that this new entry is appearing in the mobile menu (named as ICON).
Is it possible to disable this particular menu entry in the mobile menu only? I tried using the following CSS code but with no luck…

.mobile .menu-item-7589 {
display: none !important;
}

2) Also in the mobile version of my site, how can I change the color and transparency of the logo section (currently in a dark blue) so that it matches the desktop version?

3) A third point I would need help with, also in the mobile version of the site, is in the position of the burger menu icon. I would like it to appear inline with the logo, on its far right. Would that be possible?

By the way, I am currently developing on a staging server (http://2cameras1bucketl.wpstagecoach.com) on WordPress 4.5 running the X-Child theme (1.0.0) and the X-theme (v4.4.2) as parent.

Thanks a lot for the awesome support you provide!

[davidferp]

This reply has been marked as private.

[davidferp]

Ok, I figured out point number 2!.

I just had to change the background-color of x-logobar as:

x-logobar {
backgroundcolor: #newcolor;
}

Could you please assist in the other two points?

Thanks you!

[Christopher]

Hi there,

#1 Upon checking your site, logo doesn’t display in mobile navigation, please see the attachment.

#3 Please select ‘stacked’ layout under Customize -> Header -> LOGO AND NAVIGATION.

Hope it helps.

[davidferp]

Hello!

Thanks a lot for assisting.

Yes, you’re right, number 1 is already solved, I just had to clear the cache of my browser…

Regarding number 3, I had ‘stacked’ already selected in Customize -> Header -> LOGO AND NAVIGATION. This mode works together with the CSS in place to add the logo in the desktop menu.

If I select ‘inline’, I get the effect I’m looking for in mobile, but back in desktop mode a new logo appears at the top of the page and the whole menu is shifted to the right… Not what I need…

Any other idea?

Thank you very much guys for the effort! We customers are so needy 🙂

[Christopher]

Hi there,

Please select inline layout and add following CSS :

@media (min-width:979px){
.x-brand{
display:none;
}
}

Hope it helps.

[davidferp]

Hi!

That’s genius! We are almost there! 🙂

Now, in inline mode and with the CSS code suggested above the mobile menu appears where I want it.

However, the top menu in desktop mode do not appear centered in the page width after that. How can I force the menu in the center for desktop mode after these changes?

Thanks a lot for your patience!

[Thai]

Hi There,

Please add the following CSS:

@media (min-width: 980px){
    .masthead-inline .desktop .x-nav {
        display: block;
        float: none;
        text-align: center;
    }
    .x-navbar .desktop .x-nav>li {
        float: none;
        display: inline-block;
    }
}

Hope it helps 🙂

[davidferp]

Hi,

Exactly what I needed! Thanks s lot support team, you guys rock!

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts