Mobile Menu Arrow Icon Alignment

[benfrench]

I have looked through your other posts, and none of the solutions have worked for me.

I am trying to align the downward arrow icons in the mobile menu.

I successfully used this code to allow the menu item to automatically pull up the submenu without having to directly tap the arrow icon. But now the dropdown arrow icon is centered. I would like it aligned to the right or removed completely.

/Mobile Menu/
.x-sub-toggle {width:100%; z-index: 999;

.x-sub-toggle .x-icon-angle-double-down {
display:none;
float:right;
margin-right: 10px;
}

Site Link - https://canalfootball.com/

Thanks!

[basanta]

Hi There,

Thanks for writing in!

Please use this CSS and let us know if that helps!

.mobile .x-sub-toggle>span {
    text-align: right;
    padding-right: 10px;
}

Hope that works!

Thanks

[benfrench]

Thank you for the response! Unfortunately it did not work for me. Any other suggestions?

[jade]

Hi there,

Please remove the previously suggested code then edit this block of code:

.x-sub-toggle {
    width: 100%;
    z-index: 999;
}

to:

.x-sub-toggle {
    width: 100%;
    z-index: 999;
    right: 10px;
    text-align: right;
}

Here are some reference links related to the suggestions above:

• CSS Introduction - https://www.w3schools.com/css/css_intro.asp
• How to get CSS Selectors using Chrome - https://stackoverflow.com/questions/4500572/how-can-i-get-the-css-selector-in-chrome

Hope this helps.

[benfrench]

@Jade

.x-sub-toggle {
width: 100%;
z-index: 999;
right: 10px;
text-align: right;
}

That did it. Thank you! I appreciate your help!

[rad]

You’re most welcome!