Mobile Menu Modifications

Support
#1

Question #1:
How do I add a border to my menu:

  • mobile
  • not mobile

Question #2:
How do I modify the border color of the menu:

  • mobile
  • not mobile

Question #3:
How do I prevent the right aligned text of my (mobile) submenu intersecting with the down arrows?

Question #4:
How do I enlarge the space that functions as the dropdown area (versus the hyperlink which opens the category link)?

Question #5:
How do I set different colors for each sublevel in the (mobile) dropdown menu?

Question #6:
How does one create those modern menus that slide in from the side instead of the (normal) megamenus? Is there a tutorial?

#2

And 1 more problem:

On mobile (iPad 4), in horizontal mode, the menu starts expanded and ‘refuses’ to collapse.
In vertical mode this does not occur.

How can I fix this?

#3

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

.x-navbar .mobile .x-nav .menu-item {
    border-top: 1px solid #fff;
}
.x-navbar .mobile .x-nav .menu-item ul {
    margin: 0;
}
.x-navbar .mobile .x-nav .menu-item ul > li > a {
    color: #ab4a4a;
}
.x-navbar .mobile .x-nav .menu-item ul > li > a > span {
    padding-right: 20px;
}

.x-navbar .mobile .x-nav .menu-item ul > li > ul li a {
    color: #11a0b1;
}

Please find this custom CSS:

@media (max-width: 1024px){
.x-nav-wrap.mobile, .x-nav-wrap.mobile.collapse.in {
    display: block;
}
}

And change to this:

@media (max-width: 1024px){
    .x-nav-wrap.mobile.x-collapsed {
        display: none;
    }
    .x-nav-wrap.mobile {
        display: block;
    }
}

Let us know how it goes!

#4

[quote=“thai, post:3, topic:34756”]
…[/quote]

Much better, thank you.

#5

You’re welcome.

#6

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