Notice: Undefined offset: 0 in /home/templaza/public_html/plugins/system/tz_guard/tz_guard/browser_detection.php on line 361
Deprecated: strpos(): Non-string needles will be interpreted as strings in the future. Use an explicit chr() call to preserve the current behavior in /home/templaza/public_html/plugins/system/tz_guard/tz_guard/browser_detection.php on line 618 How to configure Onepage Menu with Smooth Scroll on Jollyany - TemPlaza | Blog
Nowadays, mobile devices and social networks are on the rise. People tend to go to the internet in order to search everything by using their handy devices like mobile phones, tablets. As a result, single-page design is regarded as the most popular web trend at the moment.
With One page, your website will contain no additional pages like About Us, Services, Team Members, Contact. It's a long-scrolling layout. Visitors can easily digest the full content loaded within the same web-page, which helps make reading flow more continuous and fluid.
To have a straightforward navigation system, we first need to create a One Page menu, and menu items assigned to this menu.
Go to Menus > Manage > Add new menu > create a new menu name One Page Menu
Create One Page menu
Go to Menus > One Page Menu > Add new menu item
When creating menu items, you need to use menu item type: System Links >> URL
In the Link field, input a section ID for each menu item like #sectionname (this section ID shouldn't contain spaces or special characters and must start with #)
Assign the menu item to One Page menu
Add new menu item for One-page menu
2. Configure Astroid layout builder
In this step, we will use Astroid layout manager to assign each section ID to an appropriate section in the template layout, so that the users can scroll down or jump to that particular content's section when clicking on each menu item.
Let's head to Astroid layout manager!
Go to Extensions > Templates > Styles > your style > Template Options > Layout (Tab from the left)
Click to edit each section in the layout, and insert the Custom ID (without the #) you created earlier when creating the menu item.
Edit sections in Astroid layout
Insert Custom ID to each section in the layout
Save the template settings and back to the Basic tab on the left, you can enable the option "Smooth Scroll" and set the scroll speed also.
Enable smooth scroll
Let's move to the tab Header, navigate the option "Site Menu", here you're supposed to opt for the "One Page Menu" previously created above.
Select One Page menu in the Site menu field
Finally, I hope this article will be helpful for any users using Jollyany and looking for an instruction of how to create an One Page with Smooth Scroll with Jollyany Multipurpose Joomla template. If you encounter any trouble relating this topic, feel free to contact us, our technical team are eager to help you out.
As you know, Css Hover Effect plays as an important role in developing a website.In this post, I would like to give you some best free css hover effects which can help your site become more attractive...
The importance of fonts for a WordPress website is undeniable because different fonts have different levels of readability, reader friendliness, and different personality and style affecting greatly t...
A gallery to display your photos will decorate your webpage and can surely make it look more professional and lively. There are numerous Joomla! photo gallery extensions out there, and choosing a righ...
New year comes up with new projects that require you to learn more about not only WordPress themes or Joomla templates, but a stunning font suitable to your personal projects or creative work. Today, ...