1. Home
  2. Forum
  3. Blazor
  4. Change menu color and hover color

Change menu color and hover color

I've managed to change the menu background and text colors to my preference but when hovering over an item on the menu the text turns a bluish color that is hard to read on my gray background.  I've made an attempt to change the hover color as shown with the last bit of CSS below.  But the hover color remains bluish.  Any ideas?

<div class="menu-control">
    <div class="layout">
        <div id="container">
            <EjsMenu Items="@menuItems" HamburgerMode="@HamburgerMode" CssClass="menubar-specs">
                <MenuEvents ItemSelected="OnSelect"></MenuEvents>
            </EjsMenu>
        </div>
    </div>
</div>

<style>
    .menu-control {
        text-align: center;
        color: #FFF;
        background-color: #777;
    }

    .layout #container {
        color: #FFF;
        background-color:#777;
    }

    .menubar-specs ul.e-menu {
        color: #FFF;
        background-color: #777;
        font-weight: 600;
    }

    .menubar-specs ul.e-menu:hover {
        color: #FFF;
    }
</style>

4 Replies
DA Dale February 20, 2020 07:22 PM UTC

Here is what it took to get close enough to what I want:

<div class="menu-control">
    <div class="layout">
        <div id="container">
            <EjsMenu Items="@menuItems" HamburgerMode="@HamburgerMode">
                <MenuEvents ItemSelected="OnSelect"></MenuEvents>
            </EjsMenu>
        </div>
    </div>
</div>

<style>
    .e-menu-wrapper ul {
        background-color: #555;
        color: #FFF;
    }

    .e-menu-wrapper ul .e-menu-item .e-caret {
        color: #FFF;
    }

    .e-menu-wrapper ul .e-menu-item.e-focused {
        color: #CCC;
        outline: 0 solid #f8f9fa;
        outline-offset: 0;
        background-color: none;
    }

    .e-menu-wrapper ul .e-menu-item.e-focused .e-caret {
        color: #CCC;
    }

    .e-menu-wrapper ul .e-menu-item.e-selected {
        color: #CCC;
        outline: 0 solid #f2f4f6;
        outline-offset: 0;
        background-color: none;
    }

    .e-menu-wrapper .e-ul {
        background-color: #555;
        color: #FFF;
    }

    .menu-control {
        text-align: center;
        color: #FFF;
        background-color: #555;
    }

    .layout #container {
        color: #FFF;
        background-color: #555;
    }
</style>


AD Arunkumar Devendiran Syncfusion Team February 21, 2020 06:52 PM UTC

Hi Dale, 
 
Thank you for contacting Syncfusion support. 
 
We have checked your reported issue and we would inform you that some css property missing in your provided code snippet. So that you are facing this kind of issue. We have modified your code snippet, please use this snippet to resolve your issue. For your continence we have created the sample for your requirement. Please refer the below code snippet and sample link. 
 
Index.Razor 
 
<style> 
    .menu-control, 
    .layout #container, 
    .e-menu-wrapper ul, 
    .e-menu-wrapper .e-ul { 
        background-color: #555; 
    } 
    .layout #container, 
    .menu-control, 
    .e-menu-wrapper ul, 
    .e-menu-wrapper .e-ul, 
    .e-menu-wrapper ul .e-menu-item .e-caret { 
        color: #FFF; 
    } 
    .e-menu-wrapper .e-ul .e-menu-item.e-focused .e-caret, 
    .e-menu-wrapper .e-ul .e-menu-item.e-selected .e-caret { 
        color: #CCC; 
    } 
    .e-menu-wrapper ul .e-menu-item.e-focused { 
         outline: 0 solid #f8f9fa; 
    } 
    .e-menu-wrapper ul .e-menu-item.e-selected, 
    .e-menu-wrapper ul .e-menu-item.e-focused, 
    .e-menu-wrapper ul .e-menu-item.e-focused .e-caret, 
    .e-menu-wrapper ul .e-menu-item.e-selected .e-caret { 
        color: #A93226; 
    } 
    .e-menu-wrapper ul .e-menu-item.e-focused, 
    .e-menu-wrapper ul .e-menu-item.e-selected { 
       outline-offset: 0; 
       background-color: none; 
    } 
    .e-menu-wrapper ul .e-menu-item.e-selected { 
       outline: 0 solid #f2f4f6; 
    } 
    .menu-control { 
       text-align: center; 
    } 
</style> 
 
  
Sample link: 
 
Could you please check the above details and let us know whether this is fulfilling your requirement, if not please share us more information regarding this. So, that we can analyze based on that and provide you a better solution. The information provided would be great help for us to proceed further. 
 
Regards, 
Arunkumar D 


BJ Brian Jose July 10, 2020 01:13 PM UTC

Hi Arunkumar Devendiran,
    I am also trying to do the same thing and have used your code to get it working. The only issue I have is that the child items under the menu items is not picking up the the same colors as the parent. Is there a specific entry in the STYLE CSS code that needs to be used for the children of a menu item?

MV Madhan Venkateshan Syncfusion Team July 13, 2020 11:18 AM UTC

Hi Brian Jose, 
 
Good day to you. 
 
You can increase the css specificity for color overriding styles by changing tag selector (.e-menu-wrapper ul .e-menu-item.e-selected) to class selector (.e-menu-wrapper .e-menu-parent .e-menu-item.e-selected) to resolve your issue. Please refer the below code snippets and sample link. 
 
.e-menu-wrapper .e-menu-parent .e-menu-item.e-selected, 
.e-menu-wrapper .e-menu-parent .e-menu-item.e-focused, 
.e-menu-wrapper .e-menu-parent .e-menu-item.e-focused .e-caret, 
.e-menu-wrapper .e-menu-parent .e-menu-item.e-selected .e-caret { 
                    color: #A93226; 
                } 
 
Sample link:  
 
Regards, 
Madhan V 


Loader.
Up arrow icon