Remove dropdown Carrot Symbol from Main Menu

  • Does anyone know how to remove the downward carrot symbol following links in the main navigation bar that display when a primary menu item has sub-links? I have tried all sorts of combinations in the CSS child theme to do this, but I am largely unsuccessful. What I’ve tried:

    1. Comment out anything relating to the main navigation with a Genericon identity of /432; — I think this is the symbol used for the downward carrot.
    2. I have found all instances of the navigation that use:
      .main-navigation .menu-item-has-children
      and removed the > symbol after it is used (not, however, in the ul, which are the sub-menus under the main navigation links.

    I want to underscore that I want to get rid of all the carrots symbols — on the sub-links too — and close up the space between the links. Visit https://ilikum.org to inspect where I am thus far.

    Thank you for your help.

    — Tom

Viewing 1 replies (of 1 total)
  • Thread Starter TRNimen

    (@trnimen)

    Hello Team, I think I figured this out after some trial and error. The CSS that seems to override all of the navigation code that mentions this caret symbol is line 3057 from Twenty Sixteen’s native style.css file:

    .main-navigation .menu-item-has-children a:after {
    display: none;
    /* original CSS content: “\f431”;
    position: absolute;
    right: 0.625em;
    top: 0.8125em; */
    }

    Reducing space between the menu items can be performed by altering the padding increments in line 3052:

    .main-navigation .menu-item-has-children > a {
    margin: 0;
    padding-right: 1em; /* Was 2.25em; */
    }

    Now, if I could only get the menu to align left against the logo…

    Tom

Viewing 1 replies (of 1 total)
  • The topic ‘Remove dropdown Carrot Symbol from Main Menu’ is closed to new replies.