How to setup Polymer narrow layout as default with HTML markup?

Question

I am using this sample from Polymer demos and try to toggle side bar menu on page start up with HTML markup. So that Polymer is in narrow layout by default.

At https://www.polymer-project.org/docs/elements/core-elements.html#core-scaffold is described responsiveWidth but it does not impact the behavior.

<core-scaffold id="gui" >
  <core-header-panel navigation flex>
    <core-toolbar id="navheader">
      <div class="device-name">
        device
      </div>
    </core-toolbar>
    <core-menu>
      <core-item label="Help" onclick="window.open('')"></core-item>
    </core-menu>
  </core-header-panel>
  <div tool>
    tools
  </div>
  <div id="content"></div>
</core-scaffold>

Answer 1

Did you wait for Polymer to be ready?

This should work - untested thought - give it a try:

window.addEventListener('polymer-ready', function (e) {
 document.getElementById("gui").responsiveWidth = "1920px"; 
});