Get Slick Designs with the new Mobile Header Feature

Home

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.

Mobile Header Menu

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.

Mobile Header Fashion

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.

Mobile Header Beach

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!

Wrapping Up

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!

Subscribe For More!

If you want to be the first to find out more about our themes
please subscribe to our newsletter

Alexandra I.
Alexandra I.
I love video games and photography. You can usually find me drawing, editing or reading. My curiosity leads me to learn something new every day. I try to pursue life through a creative lens and find inspiration in others and nature.

4 COMMENTS

  1. I bought and am using the Newsmag theme, which is similar to Newspaper. I feel like Newsmag development and updates are way behind the Newspaper theme 🙁

    • Hi,

      While the two themes are similar, there are differences as well. The Newsmag theme has a structure that would not allow the implementation of most features that have been added in the Newspaper theme and the composer provided with it. It is true that the Newsmag theme hasn’t received many major new features, like the Newspaper theme has. Currently I can’t exactly say when there will be a major update for the Newsmag theme, but we will try to add more useful elements for it in the future.

      Thank you!

    • Hi,

      No, they cannot. The mobile theme will use its own header when active. The cloud headers built/imported with the tagDiv Composer and Cloud Library plugin will be displayed on mobile only if the mobile theme is not active. Most of the mobile theme elements are predefined, this would be why it is noticeably faster on mobile than the responsive version. Please let us know if you have more questions, you can always create new topics in the theme forum or send us an email at contact@tagdiv.com.

      Thank you!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Check out our latest

Stories