Get Slick Designs with the new Mobile Header Feature

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 Website Manager and then on the Import Template button under the “Header” section. 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!

Share

Alex I.
Alex I.
In my role as an artist and designer, my objective is to create brilliance on a daily basis. During my off-hours, I enthusiastically pursue growth, whether it's through photography, drawing, rendering, or any other captivating endeavor that piques my interest.

Do you need any help with the Newspaper or Newsmag WordPress Themes? Please send us all the necessary details via email or create a new topic on our online forum. We're always happy to assist you.

  1. I really loved your support, From the bottom of my heart Thank you so much. But I have another issue the header template is not showing on the home page on a mobile device. I had edited it and that looks perfect at template but when I tried to put it on the home page that was disappeared Now that’s not even showing at template editor. please help me

    • Hi,
      Thank you for your kind words about our tagDiv team. Can you please send us more details about your inconvenience? As the Blog area is not assigned to the Customer Support Department, I strongly recommend you to open a new topic in the forum or send us an email. We’re always ready to help you! Thank you for understanding.

    • 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!

  2. 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!

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.

Join our community

With over 2000+ fellow WordPress enthusiasts and digital creators

Let’s Dive Into The Latest Newspaper Theme Update, Version 12.6.4

The latest update, version 12.6.4, is now available for all Newspaper theme users! This...

Plugin Vulnerability Affects Up To 1 Million Websites

In a significant security alert, Wordfence, a leading security service for WordPress websites, reported...

Press Release: tagDiv Recognized Among Top Software Development Companies in 2024

tagDiv, a leading provider of WordPress themes, plugins, and web development solutions,today announced it...

How Custom Software Can Help Your Business Stay Ahead of the Competition

As technology progresses and time passes, the demand and needs change. It is certainly...