By hungry_mind on

I have been setting up a Drupal 8 test site in which I use Pixture Reloaded theme, (an Adaptive theme subtheme) and have enabled the Adaptive Theme 'Extensions' utility and in particular, 'Responsive Menus'.

I use this for the main navigation menu (the horizontal menu displayed under the logo and site name). The responsive menu functionality works ok, but in addition, I need to make the menu links decrease their font size, when the screen width is within a specific range.

As it is now, for example, in Tablet landscape (1024X768), the menu links wrap to the 2nd line, ie, some menu links get under previous menu links, and since they have submenu links, these get overlapped with the other menu links below and thus become inaccessible. So, I need to add to the responsive behavior for this screen width (eg Tablet landscape) a font-size decrease of the menu links so they can fit in one line and not get overlapped.

I have tried all combinations of breakpoint groups and breakpoints, but none of these achieve my requirement.

Appreciate any tips.

⋅ Categories: Drupal 8.x

Comments

Jeff Burnz’s picture

Jeff Burnz commented

Just use a standard media query in CSS, e.g.:

@media screen and (max-width: 64em) {
  .rm-block {
    font-size: 0.75rem;
  }
}
Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
hungry_mind’s picture

hungry_mind commented

Thanks Jeff, I had thought initially about using a media query, but I got entangled amid the equire js library and the other mixin/partials stuff that Drupal uses. I am happy it is this simple.