The Sun template is fully responsive and has two menus that are perfect for viewing on mobile or desktop.
The Side Menu
The home page and mobile breakpoints use the side menu which consists of the Responsive Muse Menu and the Multilevel Accordion widget. Use the widget options panel of the Responsive Muse Menu to change which direction the menu appears from. Use the Paragraph and Graphic Styles panel to ensure each tab in the Multilevel Accordion is using the same styling. Use the widget’s Options Panel to change the text content.
Adding a Single Tab
Select a pre-made tab and copy and paste OR Opt+drag the box to where you would like the additional tab to be. Make sure the menu remains aligned which can be done by pressing Shift+Opt while you click and drag the text box.
The Main Menu
The Main Menu uses the composition widget to create a hovered clickable drop-down. Use the Paragraph and Graphic Styles applied to the Main Menu to adjust the style of each piece. For further customization use Muse’s Styling Panels like the Fill and Stroke panel.
Search Bar
The Main Menu also includes the Search Bar Widget so your users can look for specific items on your site. The Search Bar can be found nested within an Accordion widget. Open the Accordion to further customize the Search Bar using the widgets option panel and other styling tools.
Here’s how you change the Search Bar icon and have an animated transition when it’s clicked on.
Step One
Click on the search bar icon and go to the Fill options panel to add your icon as an image. Next, pin the image where you want it to align to in the Position panel. In our case, to the image is pinned to the Top Left. Make sure you’re in the Normal State of the States panel.
Step Two
Click on the Active state in the States panel then go to the Fill options panel to change the icon. Next, pin the image to the Center Left in the Position panel. Now your icon will change once clicked on.
Step Three
In the States panel under the Normal state, click the Transitions box and check the Fade box.
Use the Delay, Duration, and Speed to change the movement of the icon during the transition.
For additional help please refer to the documentation.