Do you have more number of mobile visitors to your website, then it is of utmost importance to optimize your header for mobile visitors. With this blog I am sharing few of the important tweaks that helps me develop a brilliant directory website design that is mobile optimized.
With mobile version of a web page, header takes 80% of the front page.
Change few settings from your website dashboard as given below:
Go to, Dashboard→Settings→Design Settings.
Go to, Header Design→Mobile View Options.
Find four options here named, Header Search, Mini Nav Links, Website Logo, Entire Header.
Header Search: This is the search module in your header which lets you input a value and than make a search on it to display relative results. Header search takes almost 40% of the screen space on a mobile device and hence it can be helpful to remove it. To hide the search bar and the search tag set this option to “hide on mobile”.
Mini Nav Links: This module consists of contact us page link and signup link, again it looks fantastic on a desktop view but takes a lot of space on a mobile version. For me, keeping the signup link is a very important thing for my website but in some cases the page link tab(The text “Contact Us”) can be managed to get rid of. To do so,
- Go to, Toolbox→Menu Manager.
- Click on edit against “Header Menu Nav”.
- Click edit against the field that is not required on mobile device.
- Find the field with label “<li> Outer CSS Class”.
- Whether the field is empty or already has something written write next to it, “hidden-xs”. This means it will hide the field on extra small monitors, i.e: your mobile device.
- Save the changes you have made.
Website Logo: This contains the logo along with the header tag. To remove it or not on a mobile device completely depends on the type of business but for me most of the time it saves me some space and makes the website look good. To remove the logo along with the title tag, select the option “hide on mobile”.
Entire Header: This option just let us hide the entire header in one go. Just select “hide on mobile” and your header is gone from mobile devices giving all the space to your content.
The basic point of optimizing the header is to get a visitor’s attention to the most important thing that is for you. For example, for a job posting website header call to action should be “Post Job/ Search Job” tab. Likewise we also recommend our clients to place their most important call to action on the top of their website, specifically for a mobile device.
If you are looking for Brilliant Directories theme development service than contact us to know more benefits of our services.