How to make a One Page Navigation Menu in Onepage Joomla templates ?
Rate this item

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

Download 100+ Free Joomla! templates Download 100+ Free WordPress themes

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.

 

Looking for a free Landing Pages template to start creating your stunning website?

90+ Landing Styles (Onepage) for Joomla! 80+ Landing Styles (Onepage) for WordPress

xMas

eski┼čehir escort izmit Escort bursa escort bayan ankara escort bayan van escort bayan elaz─▒─č escort bayan erzurum escort bayan
[Flash Sale!] 25% OFF for Everything! Save DEV time with PRO versions or Join Template Club now! Read More & Get Coupon Code!
[xMas is coming!!!] Enjoy huge savings with 50% discount across all L.THEME products! Grab discount code!