Separating contextual-links CSS, out of the CSS of menus and other associated markup The following problem happens when you style menus in Drupal, using CSS. The problem is especially dominant when you edit the &lt;a&gt; tags of a menu, but happens in regards to all of the menu markup.

The following images describe problems for two different menus, in which CSS directives I gave to my #navigation selector and its &lt;a&gt; tags, such as height: 60px, display: inline-block, and color: #fff, are inherited by the contextual links markup and thus destroy its appearance and making it impractical if not nonfunctional.

Thus, the solution I need is to separate the contextual links CSS from the themes', loading it afterwards or hardcoded somehow. 

I dedicate this question to experienced themers: How can one load the contextual links with "hardcoded" CSS code, so they won't inherit anything from CSS directives I write in any theme-dependent CSS.





Code information:

Twig data:

{{ menus.menu_links(items, attributes, 0) }}

{% macro menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  {% if items %}
    {% if menu_level == 0 %}
      &lt;ul{{ attributes.addClass('menu') }}&gt;
    {% else %}
      &lt;ul class="menu"&gt;
    {% endif %}
    {% for item in items %}
      {%
        set classes = [
          'menu-item',
          item.is_expanded ? 'menu-item--expanded',
          item.is_collapsed ? 'menu-item--collapsed',
          item.in_active_trail ? 'menu-item--active-trail',
        ]
      %}
      &lt;li{{ item.attributes.addClass(classes) }}&gt;
        {{ link(item.title, item.url) }}
        {% if item.below %}
          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
        {% endif %}
      &lt;/li&gt;
    {% endfor %}
    &lt;/ul&gt;
  {% endif %}
{% endmacro %}


Mobile-first responsive CSS:

#navigation {height: auto; padding: 10px 0 10px 0; background: #0a97b7}
    #navigation ul {display: none} /*For JS conditioning: if none than...*/
    #navigation li {display: block}
        #navigation a {color: #fff}
            #navigation a:hover {text-decoration: none}
    .navtoggle {display: block; padding: 10px 25px 10px 0; font-size: 24px; background: none !important}


Desktop level CSS:

@media screen and (min-width: 1080px) {
    #navigation {height: 60px; padding: 0}
        #navigation ul {display: block}
            #navigation li {display: inline-block}
                #navigation a {height: 60px; line-height: 60px; padding: 0 15px 0 15px; display: inline-block}
                /*&lt;a&gt; must be either block/inline-block to have its height changed.*/
                    #navigation a:hover {background: #55cfd6; text-decoration: none}
    #navigation .menu-item {display: inline-block; float: right}
    #navigation .is-active {background: #55cfd6}
    .navtoggle {display: none !important}
}


Complete reset of the contextual links class as follows, isn't effective (nor it is adequate) and is overridden by more specific codes:

.contextual ul       {background: #fff !important}
.contextual li       {display: block !important}
.contextual a        {color: black !important; height: auto !important; line-height: 1.3em !important; background: #fff !important}
.contextual a:hover  {background: #f4f4f4 !important}


Every in-place menu seems better with this compelete reset, but it still don't cover all menus.
All contextual links are wrapped in a div.contextual, whereas navigational menu items are usually wrapped in a li.menu-item.