XF 2.2 Mobile offcanvas menu icon before login and register

siep

Member
For mobile only I added some icons in the offcanvas menu.
I have found out how to do it for the navigation buttons.

Now I would like to add an icon before "login" and "register" too.
But I can't find out how to do it, since register and login does not have a nav-id.
Can someone help me?

This is the code I use for the navigation buttons:
Code:
.offCanvasMenu--nav .js-offCanvasNavTarget a {

    &:before {
        .m-faBase();
        display: inline-block;
        margin-right: 5px;
    }

    &[data-nav-id='home']:before {.m-faContent(@fa-var-home);}
    &[data-nav-id='forums']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='whatsNew']:before {.m-faContent(@fa-var-bolt);}
    &[data-nav-id='members']:before {.m-faContent(@fa-var-users);}
    
}
 
Solution
I made a typo in code and it was not well wrote, i tried this and it works now.
CSS:
.p-offCanvasRegisterLink>.offCanvasMenu-linkHolder:first-child .offCanvasMenu-link:before {
    content: 'XX';
}

.p-offCanvasRegisterLink>.offCanvasMenu-linkHolder .offCanvasMenu-link:before {
    content: 'X';
}

And this is the result
Capture d’écran 2021-01-15 203333.png

You can, now, adjust the code with FontAwesome icons.

siep

Member
You can use .p-navgroup-link.p-navgroup-link--textual .p-navgroup-link--logIn instead i think.
Thanks for your reply!
This code adds an icon in the header, but not in the offcanvas menu.

Inspecting shows:
Code:
<a href="/community/login/" class="offCanvasMenu-link" data-xf-click="overlay" data-menu-close="true">
                        Log in
                    </a>
 

nicodak

Well-known member
Right, sorry for the misunderstood.
this class .p-offCanvasRegisterLink encompasses the 2 links, register & login maybe you should use it.

CSS:
.p-offCanvasRegisterLink>.offCanvasMenu-linkHolder. offCanvasMenu-link:first-child {
    /*css code for the login link */
}

.p-offCanvasRegisterLink>.offCanvasMenu-linkHolder. offCanvasMenu-link {
    /*css code for the register link */
}
Not sure but you can try...
 

nicodak

Well-known member
I made a typo in code and it was not well wrote, i tried this and it works now.
CSS:
.p-offCanvasRegisterLink>.offCanvasMenu-linkHolder:first-child .offCanvasMenu-link:before {
    content: 'XX';
}

.p-offCanvasRegisterLink>.offCanvasMenu-linkHolder .offCanvasMenu-link:before {
    content: 'X';
}

And this is the result
Capture d’écran 2021-01-15 203333.png

You can, now, adjust the code with FontAwesome icons.
 
Solution
Top