Docs

[Gee R]

Hi,

I understand the thinking behind why you guys changed mobile navigation behavior.

However for sites like mine, with few submenus, adding an additional ‘click’ to reveal menus is actually more of a UX regression than progression. In addition since I have menu text justified right, the dropdown arrow now appears on top of the text.

How can I revert mobile nav behavior to how it was previously?

( I cannot show you the site since it’s offline (for the reasons above). However if you want I can send you the URL together with a login/pw )

[Christopher]

Hi there,

Please try the following CSS code under Customize -> Custom -> CSS:

ul.sub-menu {
display: block;
}

Hope it helps.

[Gee R]

Wow, that was quick! Thank you.

While the dropdown behavior is back to the way it was, the submenus are still justified left and the dropdown arrows are still overlaid on the menu text:

FYI I already have the following custom CSS (which now seems to be ignored):

.x-topbar .p-info, .x-topbar .p-info a, .x-navbar .x-nav > li > a, .x-nav-collapse .sub-menu a, .x-breadcrumb-wrap a, .x-breadcrumbs .delimiter {
text-align: right;
}

[Christopher]

Hi there,

Please add this:

ul.sub-menu li a {
text-align: left;
}

In above code change .x-navbar .x-nav > li > a to .x-navbar .x-nav-wrap .x-nav > li > a to make the code works again.

Try to clear your browser cache as well as any caching that might be setup on your site via a caching plugin.

Hope that helps.

[Gee R]

Sorry – still didn’t work. I tried clearing browser cache and I’m not using any caching plug-ins since this is a sandbox site.

I’m sending you URL/login/pw details. Let me know if you want to see my child theme style.css file.

[Gee R]

This reply has been marked as private.

[John Ezra]

Hi there,

Thanks for the info, unfortunately your site turns up blank. http://prntscr.com/5mojit. You might have some IP restriction or if you just uploaded it might not be propagated yet in all places. Please have a check and get back to us. Also it would be good to see your child theme CSS as well for comparison. Thanks!

[Gee R]

As I clearly mentioned the site is currently OFFLINE.

You need to log in to see it. Do I really need to give you the login URL???

[Gee R]

This reply has been marked as private.

[Christian]

Hey Gee,

We didn’t know that your site is in a subfolder. Please add the code below to your Appearance > Customize > Custom > CSS.

.x-navbar .x-nav-wrap .x-nav > li > a {
    text-align: left;
}

Hope that helps. 🙂

[Gee R]

I take it that you mean: text-align: right; (i.e. not ‘left’) Correct?

As I mentioned earlier on in this thread, I already have:

.x-topbar .p-info, .x-topbar .p-info a, .x-navbar .x-nav-wrap .x-nav > li > a, .x-nav-collapse .sub-menu a, .x-breadcrumb-wrap a, .x-breadcrumbs .delimiter {
text-align: right;
}

Are you saying that I need to add

.x-navbar .x-nav-wrap .x-nav > li > a {
    text-align: right;
}

in addition to this??

BTW my child theme style.css file can be seen at http://pastebin.com/u35w0kNF

Oh, and none of this gets rid of the issue of the dropdown icon overlying the menu text.

[John Ezra]

Hi there,

We meant “Left” not “Right” on the text align, just like how it was posted. You see we are looking for an error in code, we can’t guess how you would like things to look. We get tons of posts each day ranging from experts to people just starting out. We can’t guess your site is in a sub-folder nor can we guess how you envision it to look.

Having said that though, if you explain things to us we would be more than happy to assist you.

Trying to understand your what you are asking for, you don’t want the words overlapping with the symbol.

The first solution is to align left (as in the solution given above):

.x-navbar .x-nav-wrap .x-nav > li > a {
/*     text-align: left; */
}

Now since you are reacting saying you have right mentioned above, I take it the solution provided isn’t what you are asking for.

If you want the menus with sub-menus aligned right then you would need to add some padding to the span they are in, like so:

.x-navbar .x-nav-wrap .x-nav > li > a > span {
    padding-right:30px;
}

This will move only the text and not the symbol. This works on my end. Hope this helps!

[Gee R]

“….Having said that though, if you explain things to us we would be more than happy to assist you….”

Apologies that my initial request was difficult to understand.

This is how my mobile menu used to look prior to the last update:

This is how it renders currently:

I want my mobile menu to render exactly like it used to, in terms of dropdown behavior, text layout, and font size.

[Zeshan]

Hi Gee,

Thank you for the clarification!

Please try adding following CSS code under Custom > CSS in the Customizer:

.x-navbar .mobile .x-nav li>a {
    border: none;
    text-align: right;
}

.x-navbar .mobile .x-nav>li>a {
    letter-spacing: 2px;
}

.x-navbar .mobile .x-nav li a {
    display: block;
    height: auto;
    margin: 2px 0;
    padding: 0.75em 1em;
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 1.5;
    white-space: normal;
    color: #b7b7b7;
    background-color: transparent;
    border-radius: 4px;
    -webkit-transition: none;
    transition: none;
    font-size: 2rem;
    color: #707070;
    box-shadow: none;
}

.x-navbar .mobile .x-nav li>a:after {
    content: "\f103";
    margin-left: 0.35em;
    letter-spacing: 0;
    font-family: "fontawesome"!important;
    font-style: normal!important;
    font-weight: normal!important;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

.x-navbar .mobile .x-nav li>a:only-child:after{
    content:"";
    display:none
}

.x-navbar .mobile .x-sub-toggle {
    display: none !important;
}

.x-navbar .mobile .x-nav .sub-menu {
    position: static;
    top: auto;
    left: auto;
    float: none;
    display: block;
    max-width: none;
    margin: 0 1.5em;
    border: 0;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

.x-navbar .mobile .x-nav>li.x-menu-item-search>a {
    border: 1px solid !important;
    letter-spacing: 2px;
}

.x-navbar .mobile .x-nav>li.x-menu-item-search {
    margin: 4px 2px 2px;
}

Hope this helps. 🙂

Thank you.

[Gee R]

Thank you. We’re nearly there, but not quite: Font Awesome ref isn’t rendering:

Please advise.

[Author]

Posts