Magento 2 Missing Main Navigation

Weirdly, and unlike M1, Magento 2 does not show the main navigation menu by default. You need to create some categories and subcategories to act as placeholders while you are theming, *and* assign them to the store view, to make the main navigation show up.

Creating the categories is simple, just go Catalog > Categories

2018-10-22_22h48_26

Adding them to the store view is the part that tripped me up. Go Stores > All Stores

2018-10-22_22h50_14
…. and click on a store but *not* a website or store view.  Only stores have give you the option to set a root category.

2018-10-22_22h52_55

Clear cache and the navigation should show up now.

Magento 2 – setting up Grunt LESS compilation

Adapted from https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-topics/css_debug.html

– Install nodejs somewhere

apt-get install node

– cd (magento root)
– move ./package.json.sample to just package.json
– move Gruntfile.js.sample to Gruntfile.js
– install grunt, probably as root

npm install -g grunt-cli

– update Magento’s node dependencies

npm install

– make sure your style sheet is added to (your theme)/Magento_Theme/layout/default_head_blocks.xml

– make sure your source files exist

[[email protected]/var/www/ecommsys/app/design/frontend/Siliconrockstar/base][22s] tree ./web/
 ./web/
 └── css
 ├── source
 ├── styles.less
 └── _variables.less

– add your theme to ./dev/tools/grunt/configs/themes.js

///////////
 base: {
   area: 'frontend',
   name: 'Siliconrockstar/base',
   locale: 'en_US',
   files: [
     'css/styles-m',
     'css/styles-l',
     'css/some-customer-stylesheet'
   ],
   dsl: 'less'
 }

– run the grunt task to prep the symlinks for your static content files

grunt --verbose exec

– have grunt compile your less

grunt --verbose less

As far as I can tell, you either need to

– compile the both your themes’ css and all parent themes’ css, or
– add the stylesheets for the parent theme ( usually styles-m and styles-l ) to the grunt config for your own theme

…to make sure changes show.

 

BONUS:

If you just need to add some simple simple css changes, you can toss them into _extend.less and they’ll automatically compile and append to the parent themes’s styles. Not sure if you need to add the grunt config or not…

[[email protected]/var/www/ecs/app/design/frontend/Siliconrockstar/base/web][0s] tree ./css/
./css/
└── source
 └── _extend.less