1. Home
  2. Forum
  3. Blazor
  4. How to pull a menu item to the right

How to pull a menu item to the right

Hello

How can I pull or align a menu item to the right. For example, I want the "Log In" main menu item to be separate from the other menu items and sit at the extreme right of the menu bar. How do I achieve this?

Many thanks.


7 Replies
TS Thaneegairaj Sankar Syncfusion Team March 28, 2022 11:24 AM UTC

Hi Fritz,

We can able to acheive your requirement using toolbar integration, please refer the below UG link.

UG: https://blazor.syncfusion.com/demos/menu-bar/toolbar-integration 

Could you please check the above details and get back to us, if you need any further assistance on this.

Regards,
Thaneegairaj S
 


FR Fritz March 29, 2022 02:50 AM UTC

Many thanks  Thaneegairaj - that answers my question.


TS Thaneegairaj Sankar Syncfusion Team March 29, 2022 04:57 AM UTC

Hi Fritz,

You are welcome and happy to hear that your requirement has been fulfilled.

Regards,

Thaneegairaj S


FR Fritz March 30, 2022 04:55 AM UTC

Hi again Thaneegairaj

After I implemented your solution I noted that the menu items seem to overflow the Toolbar. See image below:

Capture.PNG

You should be able to see, between the two blue arrows, that the menu is higher than the toolbar that contains the menu in this area. So for the width of the menu, the toolbar "connects" with the div below. How can I prevent this?

Many thanks, your product seems excellent so far!

Fritz


TS Thaneegairaj Sankar Syncfusion Team March 31, 2022 11:31 AM UTC

Hi Fritz,


We are unable to replicate the issue in our end. For your reference we have prepared a sample, please find the below link.


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Server5.0-887956738


Please check the above details and if you are still facing issue, please share the below details.


  • If possible, share the issue reproducible sample or replicate the issue in above sample.
  • Please share us the video demonstration of this issue.


Please provide the above requested information, based on that we will check and provide you a better solution quickly.


Regards,

Thaneegairaj S


FR Fritz March 31, 2022 07:45 PM UTC

Many thanks for your reply  Thaneegairaj. Your customer support is really good!

I was not able to fix the issue even after I restructured my menu and imported all your styling. It may be because my toolbar is on the NavMenu.razor page directly and the layout of my page is a bit different from your example.

However, for the benefit of other users that come across this, I was able to fix the problem by explicitly setting the Height of the toolbar item like this: "

<SfToolbar Height="45px;">

I realize setting hard-coded heights and dimensions is frowned upon in CSS and HTML, but there you have it. It seems for now my problem is solved.

Thanks again for your help.


TS Thaneegairaj Sankar Syncfusion Team April 1, 2022 07:40 AM UTC

Hi Fritz,


Thanks for the update.


We are happy to hear that your issue has been resolved.


Regards,

Thaneegairaj S


Loader.
Up arrow icon