Menu float right last item

[Rick]

I am having an issue with my menu control.  I am trying to get the last item to float right.  I found a post that seem to be related to what I am trying to do but it is from 2013 and for JQuery. Also the solution does not seem to work for me.
https://www.telerik.com/forums/moving-the-right-most-menu-all-the-way-to-the-right-or

Using css and seting #menuName > .k-last honors all aspects (border, font, color..) but the float:right.  Is it something simple I am missing here?

[Rick]

Accidentally hit post.  Here is my code.  Borders add for troubleshooting only.

<div id="responsive-panel" class="navbar navbar-dark bg-light mb-4">
    <kendo-responsivepanel name="responsive-panel" auto-close="false" breakpoint="768" orientation="top">
        <kendo-menu name="layoutMenu" direction="MenuDirection.Bottom"
                    orientation="MenuOrientation.Horizontal"
                    close-on-click="false">
            <items>
                <menu-item text="Home"></menu-item>
                <menu-item text="About"></menu-item>
                <menu-item text="Contact"></menu-item>
                <menu-item text="Import" id="importMenu">
                    <sub-items>
                        <menu-item text="New Import" asp-action="Index" asp-controller="Import"></menu-item>
                        <menu-item text="Configuration" asp-action="Index" asp-controller="ImportConfiguration"></menu-item>
                    </sub-items>
                </menu-item>
                <menu-item text="John Doe" id="accountMenu">
                    <sub-items>
                        <menu-item text="Account"></menu-item>
                        <menu-item text="Logout"></menu-item>
                    </sub-items>
                </menu-item>
            </items>
        </kendo-menu>
    </kendo-responsivepanel>
</div>

 

#layoutMenu{
    width:100%;
    border:solid red;
}
#layoutMenu > .k-last {
    border: solid pink;
    float: right !important;
    font-weight: bold;
    color: black;
    margin-left: 100px;
}

 

 

[Dimitar]

Hello Rick,

I assume that you are using one of the Sass-based themes (default-v2, bootstrap-v4 or material-v2) in your project. Could you confirm if that is indeed the case ?

If the above is indeed the scenario - those themes utilize flexbox to position items inside the Menu wrapper. Therefore, aligning the last item to right is as simple as the following:

<style>
  .k-menu .k-item.k-last {
    margin-left: auto;
  }
</style>

I hope this helps.

Regards,
Dimitar
Progress Telerik

[Rick]

This fixed the issue for me.  Thank you.