Creating a customized navigation bar with a unique menu list underline feature using JavaScript

I recently created a customized navbar using a script to add a hover effect to the menu links. You can find the script I used here: https://github.com/shadeed/underliner. Although I was able to get it partially working, there are still some issues.

The webpage is designed to be responsive, with a collapsible menu when the screen size is less than 990px.

The JavaScript function is called right before the closing tag. I attempted to place it elsewhere, but it didn't have the desired effect.

My first issue arises when the page loads with the collapsed mobile menu. The underline effect does not work in this scenario, even if I expand the page later. My assumption is that the data-target and aria-controls attributes prevent the JavaScript from running properly when the menu is collapsed.

My second problem involves aligning the collapsed menu list centrally on smartphones. Despite my efforts, I haven't been successful in achieving this, unlike the social section which aligns correctly (but they are in separate divs).

javascriptbootstrap-4navbar

Answer №1

One issue I encountered is that the functionality works on desktop but not on mobile devices.

The reason it works on desktop upon loading is because your javascript calculates the total width of each menu item and adds it to the width of the svg element. However, this does not work on mobile as there are no items detected, resulting in a width of 0.

To fix this issue, you can manually set a custom width for your svg element which will resolve the problem.

How can I center a hover item?

To vertically center a hover item, simply add display: block; margin: auto; to your svg element and it will be centered horizontally.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for generating a watermark directive in angularjs?

My application utilizes a jQuery script for watermarking textboxes. I created a directive to easily apply this watermark to input elements, but it's not functioning as expected. While debugging, I can see the watermark being added, but once the UI fin ...

javascriptjqueryangularjs

Sorting price and date with Vue in Laravel - A beginner's guide

Attempting to sort by price and by date. See the code below. I decided not to use the controller for this sorting. Is it feasible to implement it here? It's somewhat functional, but there are some issues. When selecting price, it doesn't seem to ...

javascriptvue.jsvuejs2

Is it possible to validate only the fields that are currently visible using HTML form validation

I need a solution for excluding hidden fields from HTML form validation. My situation involves having two groups of form fields, each with some required attributes. Depending on user selection, one group may be hidden, and those fields should not contribut ...

javascripthtmljqueryvalidationtwitter-bootstrap-3

Retrieve data from a form on the server side using an Ajax request

I am currently working on submitting form data through an Ajax call. Here is the relevant form code: <form target="_blank" id="addCaseForm" class="form-horizontal col-md-12" action="" method="POST> <div class="form-group"> <labe ...

javascriptjqueryajaxnode.js

How can I slow down the response time in Express Node?

I have set up a route that triggers an asynchronous function when the URL is accessed. This function will eventually return a value, which I want to use as the response for the get request. However, I am facing an issue with delaying the response until the ...

javascriptnode.jsexpress

Creating distinct web addresses for various sections of vue.js pagination

I've implemented pagination using vue.js for my website's gallery. However, I'm facing an issue where the URL doesn't change when navigating through pages and upon page refresh, it always resets to page 1. My goal is to have the URL ref ...

javascripthtmlvue.jspagination

Vue-router is displaying only the root route

I've been working on vue-router for some time now, but I seem to have hit a roadblock. Despite going through numerous articles and documentation, I can't seem to find the solution. Even after reading multiple tutorials on using vue-router, I&apo ...

javascriptvue.jsvue-router

converting JSON values into an array of strings in JavaScript

Greetings to all! I am excited to be a part of this community as I embark on my programming journey. I haven't been able to find any information on this particular topic, so I've taken the initiative to start a new discussion. If anything seems o ...

javascriptjson

What sets apart `var now = new Date();` and `var now = Date();` in JavaScript

I am specifically interested in exploring the impact of adding "new" on the variable, as well as understanding when and why it is used. I would also like to understand why I am obtaining identical answers when printing both versions. ...

javascriptvariables

Leverage NodeJS data within Angular framework

I am working with the following route: Server app.get('/claim/:id', compact.js(['global']), indexController.claim); module.exports.claim=function(req,res){ res.render('claim-note', { title: 'claim', noteId:req. ...

javascriptangularjsnode.jsswig-template

Executing a function from another module (File) within a React JS application

I am currently utilizing the Material UI v1.0.0-beta.33 in my project, which includes an App Bar component. import React from "react"; import PropTypes from "prop-types"; import { withStyles } from "material-ui/styles"; import AppBar from "material-ui/App ...

javascriptreactjsmaterial-ui

Replicate the form to a new one while concealing the elements and then submit it

Initially, I was working with just one form. Now, I find myself in a situation where I need to utilize a different form which contains the same inputs. This is necessary because depending on the action taken upon submission, different processes will be tri ...

javascriptjqueryhtmlforms

How can I simulate keyboard events in Angular using a button click?

I've included separate buttons for Ctrl+z and Ctrl+y functionalities. When these buttons are clicked, I want them to perform the respective undo and redo actions programmatically. Below is the code snippet for this functionality. undoText(event:MouseE ...

javascriptangular

What is the best way to align a dropdown menu and a textbox on the same line

I have recently been working on a search bar that includes a Dropdown for Location and a Textbox for Search. Prior to implementing bootstrap, these elements were displayed in a single line. However, after applying bootstrap, they are now stacked vertically ...

htmlcssbootstrap-4

Is the entire web page generated on the server with each request using getServerSideProps()?

As I understand it, getServerSideProps will dynamically generate the complete page on every request, rather than pre-building it. But does getServerSideProps always generate the entire page upon each server request, or only when the data in the database ha ...

javascriptreactjsapinext.js

PhoneGap switches up the error type with each consecutive run

Why does PhoneGap change errors after every time it is compiled? Sometimes it runs without any issues, but then the same code throws strange errors like parse error or function not found, even though no changes were made to the code. Here is the code that ...

javascripthtmlcordova

Display data in a template upon receiving a response from the server

Hello, I am currently in the process of developing my very first Angular application and could use some assistance. Specifically, I am working on a component that serves as an image search box. When a user inputs a search query, a request is sent to an API ...

javascriptangular

I need a counter in my React application that is triggered only once when the page scrolls to a specific element

I've encountered a challenge with a scroll-triggered counter on a specific part of the page. I'm seeking a solution using React or pure JavaScript, as opposed to jQuery. Although I initially implemented it with states and React hooks, I've ...

javascriptreactjscounter

A guide on manipulating an input field to trigger md-datepicker upon clicking

What is the best way to convert an input text into a fire md-datepicker and achieve a similar result like this? ...

javascripthtmlangularjs

Using JavaScript to Retrieve, Manipulate, and Merge JSON Data from Various Files

My knowledge of JavaScript is limited, but I am interested in uploading multiple JSON files, processing them, converting them to text, combining them, and downloading them into a single JS file. I have successfully achieved this for a single file, but I a ...

javascriptjsonfilereader