I've moved my main menu navigation into the header panel using this;

<move element="navigation.sections" destination="header.panel" after="-"/>

I've done so in order to set the position of the heaeder panel to fixed and have the menu always on screen during scrolling.

I've also moved the logo, search and cart up to the panel wrapper in order to vertically compress the layout; ie; remove excessive white space in the header.

<move element="logo" destination="header.panel" before="top.links"/>
<move element="top.search" destination="header.panel" before="top.links"/>
<move element="minicart" destination="header.panel" before="top.links"/>

Unfortunately I now have elements that were previously hidden on desktop visible under the menu. Also; when rendering for mobile, the Account and Settings tabs are empty.

I can't figure out why this is happening? How can I get the header the way I want it without messing up one thing or another?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.