With the increase in mobile browsing and shopping, optimization for portable devices is essential for a successful website. Therefore, having a slick and elegant design for your mobile header is the first step toward impressing your audience. Take the plunge and find out how to make a fantastic Mobile Header with Newspaper Theme below.
The Introduction of Mobile Header Elements
Open a page or post through the tagDiv Composer, Newspaper Theme’s front-end page builder. Have you imported a Header template from the Cloud Library, yet? If you haven’t, then do so by clicking on the Header Manager and then on the Import Template button. Scroll through the various designs and choose the one that fits your website best.
Now, click on any element of your Header or content and then click on the Mobile Device Viewport icon. The entire page now gets displayed as it would look like on the phone. Did you notice how the Header shrank in size alongside the content? That’s the power of the new Mobile Header elements.
Before we move on how to get the same result for your website from scratch, make sure to check out the other related articles for the Header Manager: the Header Logo, Main Menu, Live Search and last but not least the Header Manager. Do this to get a good grasp on how to use the new features!
Build your Mobile Header Easily
When looking at your page across various devices, the design automatically gets adjusted to fit on various screens and sizes. However, you can always adjust the text size and spacing of each element precisely as you wish by clicking on the desired screen viewport and consequently, beginning the alterations.
On the Mobile, however, your job gets easier. With the Newspaper Theme 9.5, alongside the various elements of the Header, new mobile-centered items are available to you:
- The Mobile Menu will display a small icon. When clicked on, it opens a list of the menu items so that you can have an elegant layout for the header.
- Just like the desktop version, there is a Mobile Live Search element that you can add to your Header. It is specifically modified to bring the same performance on smaller screens as its desktop version.
- Do you want to keep the same look across each device through the menu? With the Mobile Horizontal Menu, you can now do so. Each item is shrunk to appear better on the phone screen and lets you display all of the essential navigational links at once.
So, start by dragging and dropping the Header Logo and then adding the Mobile Menu and Mobile Live Search. With the three items added, you can now begin going through the settings for each.
Slick Designs for Better Functionality
By default, the Mobile Menu and Mobile Live Search open with the theme’s default fonts and colors. However, you can easily modify this in the Newspaper Theme Panel. In the Admin Dashboard, navigate to the Newspaper Theme Panel. From there, go to Theme Colors > Mobile Menu/Live Search for colors.
If you need to modify the fonts, go to Theme Fonts > Mobile Menu. Also, if you wish to display a specific image as background, open the Background section, then select Mobile Menu/ Search Background tab. Simply upload a photo in the box and save your settings. These will be instantly applied to the new mobile elements.
Now, back to the tagDiv Composer, don’t forget to select a Menu to be displayed for your Mobile Menu from the General Settings of the element. For a sticky mobile Header, drag the items into the row once more, or through the right-click menu, right-click on the Header row and choose Copy. In the empty Header row for your Sticky Menu, right-click and select Paste Before or Paste After, then delete the remaining empty row.
Your design has now been transferred to the sticky mobile variant. Adjust the spacing and sizes of the icons and logo to get a beautiful thin header. Add a transition to the Mobile Menu Sticky zone and a background to the row to be able to see it displayed over your content. Save, and you’re done!
Get in touch with your creative side and design a minimalistic mobile header to impress the audience. Adjusting the logo’s size and choosing between two different ways to display your menu it’s easy. You should create a beautiful user experience for the visitors that are scrolling through your website by making the header smooth to navigate. With the Newspaper Theme, all of these are possible without effort or coding skills.
Post and share with us your beautiful Mobile Header designs in the comment box below!