Menu Bar Font Color and vertical align for sub-Items

[Juan Maggi]

I need to have white font when the background is blue and Black font when the background is white.

Also I need to vertical center the font on the Sub-items (I was able to do that on the menu items

I have been playing with the CSS but not Luck

Does anybody can give me a tip?

MY CODE

<div class="menu-control">

           <SfMenu TValue="MenuItem">

                <MenuItems >

                <MenuItem Text = "Home" Url="/" />

                <MenuItem Text = "Estimates" Url="/Estimates/Default">

                    <MenuItems>

                        <MenuItem Text = "Bids" Url="/Estimates/Bids" />

                        <MenuItem Text = "Estimate" Url="/Estimates/Estimate" />

                        <MenuItem Text = "APU" Url="/Estimates/APU" />

                        <MenuItem Text = "Items" Url="/Estimates/Items" />

                        <MenuItem Text = "Performance" Url="/Estimates/Performance" />

                        <MenuItem Text = "Labor" Url="/Estimates/Labor" />

                        <MenuItem Text = "Materials" Url="/Estimates/Materials" />

                        <MenuItem Text = "Equipments" Url="/Estimates/Equipments" />

                        <MenuItem Text = "Contracts" Url="/Estimates/Contracts" />

                    </MenuItems>

                </MenuItem>

                <MenuItem Text = "RFQ" Url="/Rfq/Default" />

                <MenuItem Text = "Municipalities" Url="/Municipalities" />

                <MenuItem Text = "Certificates" Url="/Certificates" />

                <MenuItem Text = "CRM" Url="/Crm/Default" />

                <MenuItem Text = "Bid Master" Url="/BidMaster/Default" />

                <MenuItem Text = "Cost Control" Url="/CostControl/Default" />

                <MenuItem Text = "Projects" Url="/Projects/Default" />

                <MenuItem Text = "To Do" Url="/ToDo/Default" />

                <MenuItem Text = "Errors" Url="/Errors" />

                <MenuItem Text = "@SessionVariables.LoginName" Url="/Identity/Account/Manage/Index" />

                <MenuItem Text = "Log Out" Url="/Identity/Account/Logout" />

                </MenuItems>

            </SfMenu>

</div>

MY CSS

.menu-control, .e-menu-container, .e-menu-container.e-menu-popup,

.e-menu-container ul .e-menu-item, .e-menu-container .e-ul .e-menu-item {

    background-color: #2676A0;

    height: 25px;

    vertical-align: text-top;

    font-size: 11px;

    align-items: center;

}

    .e-menu-container .e-ul .e-menu-item.e-selected {

        background-color: white;

    }

.menu-control {

    text-align: left;

}

MY MENU LOOKS

[Sangeetha Priya Murugan]

Hi Juan, 

 

Your requirement can be achievable in our EJ2 Menu by using CSS customization as like as below. 

 

Code Block: 

  

<style> 

 

 

    .menu-control, .e-menu-container, .e-menu-container.e-menu-popup, 

    .e-menu-container ul .e-menu-item, .e-menu-container .e-ul .e-menu-item { 

        background-color: #2676A0; 

        height: 25px; 

        vertical-align: text-top; 

        font-size: 11px; 

        align-items: center; 

        color: white; 

    } 

 

        .e-menu-wrapper .e-menu .e-menu-item .e-menu-url, 

        .e-menu-container .e-menu .e-menu-item .e-menu-url, 

        .e-menu-wrapper .e-ul .e-menu-item .e-menu-url, 

        .e-menu-container .e-ul .e-menu-item .e-menu-url { 

            color: white; 

            text-align: center; 

        } 

 

        .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-url, 

        .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-url, 

        .e-menu-container .e-ul .e-menu-item.e-selected .e-menu-url, 

        .e-menu-container .e-ul .e-menu-item.e-focused .e-menu-url { 

            color: black !important; 

            text-align: center; 

        } 

    .menu-control { 

        text-align: left; 

    } 

</style> 

 

For your convenience, we have prepared the sample based on your requirement. Please find the below sample. 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/173054/ze/Server-Menu-1557617108  

 

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

 

Regards, 

Sangeetha M