It's time to create new or re-design your websites to bring it to the next level.

Collection of 200+ Free Joomla templates, support Joomla 3.9.x and Joomla 4 Listing of 300+ Best Free WordPress themes, WooCommerce compatible, Elementor supports!

This is an instruction how to create One Page Navigation menu in Onepage Joomla templates. I use LT Business Onepage Joomla template as an example for this blog

LT Business Onepage Joomla template details: https://ltheme.com/project/lt-business-free-responsive-one-page-business-joomla-template/

LT Business Onepage Joomla template demo URL: http://demo.ltheme.com/joomla-one-page-templates/lt-business/

Okie, let go!!!

1/ Identify target content based on browser

(You can use some browsers for this task such as Firebug, Chrome, Safari, etc. but I recommend you use Firefox and use it for this example.)

a) Use Firefox browser and install Firebug, then you can see Firebug button in browser bar, click on it to open Firebug development tool bar as below

firebug-tool-bar

b) Identify id in block section that you want to target when click menu item, in this case, I want to find 4 block contents in LT Business Onepage Joomla template

 

4-block-content

c) After that, I will use Firebug to find ‘ID’ in above content clock (4 content blocks above), just click to button ‘Firebug’ in browser bar and find element by hover to each section HTML, when you see hight light content fire Firebug, so it’s section content that you’re finding, in this case 4 block content has id is ‘sp-users-wrapper‘.

identify-id-element

 

2/ Create menu item and point menu item to special place in template

a) Go to Admin > Menu > Menu Manager and start to create new menu item that you want target to 4 block contents (which having id is ‘sp-users-wrapper’ as I mentioned above). Go to details of menu item that you’re creating and click to button ‘Select’ in option called ‘Menu Item Type’.

create-menu-item-type

b) When you click button ‘Select’ in option ‘Menu Item Type’, it will appear a popup, then you click to tab ‘System Links’ and select option ‘Internal URL’

select-menu-item-type-internal-link

c) Put target content based on id of HTML section, remember you must to put ‘#’, thus to id of HTML section

use-menu-item-based-on-id

If you have any questions, please feel free to comment below or contact us via Contact Form.

 

Are you Web Freelancer or Web Design Company? Join our Club and Access our Resource!

500+ Premium Joomla! and WordPress themes just $8.70/Month, Quickstart (dummy) package included, unlimited domains!

50% OFF FOR XMAS & NEW YEAR!

Access Life-time All-In-One Membership with all 500+ Premium WordPress themes and Joomla templates and new theme(s) every month just $199.50 (instead of $399). Life-time PRO theme access, download and support, no renewal in the future.

Get DEV plan of All-In-One Now!

Merry xMas & Happy New Year! Get 50% OFF for your purchase! Coupon code: XMASNEWYEAR50 More Details
Happy New Year 2021! Get 50% OFF for your purchase! Coupon code: XMASNEWYEAR50 More Details