The following problem happens when you style menus in Drupal, using CSS. The problem is especially dominant when you edit the <a>
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 <a>
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 %}
<ul{{ attributes.addClass('menu') }}>
{% else %}
<ul class="menu">
{% 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',
]
%}
<li{{ item.attributes.addClass(classes) }}>
{{ link(item.title, item.url) }}
{% if item.below %}
{{ menus.menu_links(item.below, attributes, menu_level + 1) }}
{% endif %}
</li>
{% endfor %}
</ul>
{% 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}
/*<a> 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.