Support » Theme: Ignite » Get rid of the square "boxes" in menus

  • Resolved michelbenita


    Is it possible to have a traditional menu with the words highlited, and without the square colored box around the menu name ? Hope it makes sense. I tried changing the colors but if I go up to plain white, I don’t see the menu anymore when I click on it.

    Thanks !

Viewing 15 replies - 1 through 15 (of 16 total)
  • Theme Author Ben Sibley


    The menu can be changed so that it makes the links orange instead of the background when a menu item is hovered over or is the current page.

    There’s just one caveat. For technical reasons, the CSS needs to be added with the Simple Custom CSS plugin instead of the Custom CSS section in the Customizer.

    Also, the CSS looks insane, but it works perfectly 😉

    #menu-primary-items .current-menu-item > a, #menu-primary-items .current_page_ancestor > a, #menu-primary-items .current_page_item > a, #menu-primary-items .current_page_ancestor > a, .menu-unset ul .current-menu-item > a, .menu-unset ul .current_page_ancestor > a, .menu-unset ul .current_page_item > a, .menu-unset ul .current_page_ancestor > a, .menu-primary-items a:hover, .menu-primary-items a:active, .menu-primary-items a:focus, .menu-unset ul a:hover, .menu-unset ul a:active, .menu-unset ul a:focus, .menu-primary-items ul a:hover, .menu-primary-items ul a:active, .menu-primary-items ul a:focus, .menu-unset ul ul a:hover, .menu-unset ul ul a:active, .menu-unset ul ul a:focus {
      background: white;
      color: #e6a117;

    Thanks ! I’ll try that later this evening. I guess I can use any color in the last line instead of orange ?

    Also can I use other more recent plugins for the custom css ? Or does it have to be Simple Custom CSS ? Last update was & year ago.

    Thanks, your “insane” code does work great with Simple Custom CSS. Except for the sub-menus : they disappear. Seems like the chosen color, be it orange or anything else, doesn’t apply to them.

    Theme Author Ben Sibley


    Hmm ok it applies correctly on my test site. Could you share a link to your site with the CSS active? I should be able to find out what’s going wrong once I see it.

    Will do tomorrow. Thanks !

    So here is what I already have in the Ignite custom CSS. You gave me this code as I was trying to get rid of the activated state in the widget links.

    a {
    text-decoration: none;
    .widget a,
    .widget a:link,
    .widget a:visited {
    color: #757575;
    .widget a:hover,
    .widget a:active {
    color: #b7b7b7;

    I took off these lines and it doesn’t change anything so far. submenus are still invisible when you hover them.

    I forgot :

    To be precise I also tried removing all of my custom css, no luck.

    The white color on hover is due to this

    .menu-primary a:hover, .menu-primary ul ul a:hover { color: white;}
    so if you add it to ur custom css and change the color u want it will work

    Thanks for your help but no luck, neither in the theme’s custom CSS or using the plugin.
    In Ben’s code, the background is white, not the color.

    Hey, thanks ! Finally it works great. I just added the missing elements to Ben’s code:

    .menu-primary a:hover, .menu-primary ul ul a:hover

    It took me some more time to really understand what you meant. 🙂

    great, glad it worked out 🙂

    So topic resolved 🙂

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Get rid of the square "boxes" in menus’ is closed to new replies.