Docs

[jkneitel]

Greetings!

I’m using the Ethos stack and everything is up to date.

I’d like to use a desktop style menu (inline) for my mobile site. At present, I do not have any submenus. My background is entirely white and I’d like the menu items to be red.

I’ve looked through other threads on how to resolve this issue but I may not be able to see the changes (perhaps because the default menu color is white and I can’t see the white on the white background).

And, if we could possibly make the mobile menu item part of a fixed top, that would be amazing (I would prefer that the site title not be included in the fixed top).

All thoughts welcome!

[Jade]

Hi there,

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.

[jkneitel]

This reply has been marked as private.

[Rahul]

Hi There,

Disabling them requires editing all core css and and you can’t just remove them as of each has different role. It’s best to consult a developer with proper knowledge for css media queries. We can provide support for this kin of customization.

You can check one of our trusted partners for custom development here https://theme.co/x/member/custom-development/

Thanks for understanding.

[jkneitel]

Oh, I thought this was something that you’d be able to help out with per this thread: https://community.theme.co/forums/topic/stacked-on-desktop-inline-mobile-no-background-image-on-mobile/#post-128706

[jkneitel]

Also, I don’t fully understand what you mean by “each has a different role.” It seems like this should be a really simple fix?

Delete or disable the mobile menu, and replace it with an inline desktop menu.

Is there any way to use the @media (max-width: 979px) parameters (or some other parameter) to make this happen?

[Rad]

Hi there,

Sorry for the confusion, if it’s just about displaying desktop menu on mobile then you can add this CSS,

.x-nav-wrap.mobile, .x-btn-navbar {
    display: none !important;
}
.x-nav-wrap.desktop {
    display: block !important;
}

But inline header is only applicable for wider screen and your text logo is too wide.

Thanks!

[jkneitel]

No worries! Sorry if I caused the confusion.

The code to change the mobile menu to desktop worked well.

Just to clarify, I’m asking that the now inline mobile menu be a fixed top (and only the menu; not the site title). Is there a way to do that?

[Christopher]

Hi there,

Navbar and logo are in the same container, if i make container fixed top both logo and navbar will be fixed.

Please try this code:

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

/* to resize logo text add this as well*/

@media (max-width:480px){
a.x-brand.text {
    font-size: 18px;
}
}

Hope it helps.

[jkneitel]

Thanks. That does what the code intends, but not exactly what I’m looking for. As you wrote, the whole container remains fixed at the top, and the site title and menu items take up way too much space.

I’ll leave things as is.

I appreciate the responses and your help nonetheless!

[Rue Nel]

No Problem.
If you need anything else we can help you with, don’t hesitate to open another thread.

[jkneitel]

Thanks! Actually, one last question. How can I change the height of the inline mobile menu?

[Rad]

Hi there,

Please add this as well with your preferred size.

@media (max-width:979px){
.x-navbar .desktop .x-nav > li > a {
    height: 40px;
}
}

Thanks!

[Author]

Posts