Editing site settings
As we start optimizing our site for smaller screen sizes, we’re going to begin by looking at the edits and changes you can make to your website globally. We’re not going to dive into modifying individual elements just yet. For now, we’re going to focus on the changes that you can make to your site styles and header menu that will influence how your website looks on smaller screens.
Mobile header edits
Begin by opening your header menu and selecting the Mobile edits tab, as indicated by a small mobile device icon. Your site will automatically resize to mobile view. In this menu, you can select your header layout from five different options, as shown in Figure 8.3:
Figure 8.3 – Examples of header menu options
You can also dial in your overlay menu options, including color and link spacing. You’ll also be able to choose a Menu icon style and select its thickness (Figure 8.4).
You won’...
