To have more flexibility and adaptability on your website with the support of applications like Navi+, sometimes you’ll need some slightly technical skills – but they’re actually quite simple. One of the tasks you’ll need to do is finding the ID, Class, or Name attribute of UI elements on the webpage. Here are some cases where this would be necessary:
- Finding a position on the website to scroll the page down to (e.g., the order button) when clicking a menu item in Navi+. See a real example here: https://naviplus.app/demo/index.php?page=case-study, navigate to Reloadpaddle.com, and when you click the main action “BUY,” the screen will scroll down to the product area so you can view and decide to order/contact.
- Finding the ID/Class of the hamburger menu icon to completely replace the main menu of the website with Navi+’s modern, feature-rich menu. Navi+ fully supports this, but you need to find the correct ID/Class.
- Finding the ID/Class of an icon (e.g., MORE) and adding Navi+’s menu, so that when you click the icon, a dropdown menu appears. Navi+ fully supports this, but you need to find the correct ID/Class.
Step 1: Enable inspect mode
Depending on which browser you use, the method to enable inspect mode may vary. Inspect mode is for developers and used to debug websites, allowing you to view the HTML, CSS, and JS code, as well as what’s happening on your website. In inspect mode, you can view the ID and Class of each UI element, and add CSS configurations like colors, sizes, and fonts to ensure your website displays correctly before applying those adjustments to Navi+.
Here’s how to enable inspect mode on Chrome: First, right-click on the website and find and click the Inspect menu. By default, the Inspect window will appear at the bottom of the screen. You can adjust it to the right or left as you prefer. I usually keep it on the right and enable mobile view since I often debug in mobile mode.
Step 2: Adjust the inspect mode screen
Typically, you will adjust the screen according to your needs. For example, you can select Mobile view if you want to check how your website displays on mobile devices. You can choose devices like iPhone X (375×812) and other device sizes. (Tip: The iPhone X has a common and almost smallest size—if your website looks good on an iPhone X, it will generally look good on other devices as well. Check on this device to ensure your customers have the best experience in all scenarios, since your customers are from all over the world.) I also usually move the debug screen to the right side for easier operation.
Step 3: Locate the target UI element.
First, switch to UI element select mode (it’s the icon that looks like an arrow inside a dashed rectangle—see the image). Now, you can use this mode to select elements on your website from the left panel. Then, check the information on the right panel, where you’ll find the target ID or Classes you need. Use an ID with a # symbol in front (e.g., #SF-123456789) and a class with a . symbol in front (e.g., .class-name) for different cases. Good luck!
