I have a custom theme with the parent of blank. In web/css/source I have_navigation_extend.less.

At the top I have

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
.nav-sections {
    display: inline-block;
    padding-left: 20px;

Which doesn't work for some unknown reason and is driving me nuts since the line below it works. It doesn't even show up in any of the CSS files. But the next line right below it does show up and works as expected:

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
  .nav-sections-item-title {
    background: darken(@navigation-mobile__background, 5%);
    border: solid darken(@navigation-mobile__background, 10%);
    border-width: 0 0 1px 1px;

What am I missing?!?!!

  • Is your site loading both the styles-m.css and styles-l.css stylesheets? Feb 15, 2017 at 1:26
  • Yes it is, it has those two, calendar, print, and my custom one.
    – Aaron
    Feb 15, 2017 at 23:37

1 Answer 1


There are a lot of things that may be happening. Are you using grunt? If so, are you sure it's running.

The first line is also min of screen__l so make sure you're viewport is wide enough.

I'd also suggest emptying the var/view_preprocessed folder, clear cache and refresh the browser.

  • I am using grunt. I started with grunt clean, which I verified cleans out var/view_preprocessed/. I, then ran grunt exec and grunt less.This is the first time I've ran into issues after working on this theme for months. For the time being, I went back to plain CSS which is working as normal.
    – Aaron
    Feb 15, 2017 at 23:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.