Unfortunately, as might have been expected, since we moved from our modified style.css to this one generated from SASS, we have lost our customization that changed the position of the main menu in edit mode. Let’s add that back. Open up packages/dreamrs/themes/theme_dreamrs/sass/_menu.scss and add that fix back in at the top:
Rebuild the CSS with
npm run prod
and reload the browser. Much better
In fact, this fix works so well in edit mode, let’s extend it so that we use any time to the toolbar is visible. That way the main menu doesn’t sit beneath the toolbar, partially exposed. First, since we’re doing a lot of CSS editing right now, let’s configure SASS to run any time files are changed, rather than when we explicitly run npm run prod. In the terminal, run
npm run watch
Update the SASS stylesheet to use html.ccm-toolbar-visible instead of html.ccm-edit-mode. Save the file.
The changes take much less time. Now reload the browser.
Now the toolbar appears nicely even out of edit mode, without affecting how the site renders when a regular visitor comes to the site.