How to perfectly position various height <a> elements in a WordPress mega menu

I'm currently working on a WordPress mega menu with four columns, each with a heading or top menu item. The headings should have a gradient border at the bottom and differ in length. However, I'm facing an issue where some headings span two lines while others don't, and I can't seem to achieve the desired result.

This menu is generated by WordPress, so any changes to the HTML code would need to be implemented through a function or filter.

Here is the current basic code:

https://i.sstatic.net/COaF6.jpg

And here is the expected outcome:

https://i.sstatic.net/9bofD.jpg

...
htmlcsswordpress

Answer №1

jQuery was used to resolve this:

var maxHeight = 0;
var orgHeight = 0;

$(".nav-mega-menu .menu-item-has-children > a").each(function(){
   var thisH = $(this).height();
   if (thisH > maxHeight) { 
      maxHeight = thisH;
   }
});

$(".nav-mega-menu .menu-item-has-children > a").each(function(){
   var orgHeight = $(this).height();
   if (orgHeight < maxHeight) {
      var paddingTop = maxHeight - orgHeight;
      $(this).css('padding-top', paddingTop);
   }
});

The code iterates through the items to find the tallest one, then goes through them again to adjust the padding-top for those with lesser height to align them properly.

To see the desired alignment, check out the demonstration here: https://jsfiddle.net/cja6oegd/7/

Answer №2

/* Using flexbox is the simplest solution for fixing height and width issues */

.nav-mega-menu ul {
    display: flex;
    flex-wrap: wrap;
}
/* Dividing divs equally */
.nav-mega-menu .menu-item-has-children{
  flex:1;
}
.nav-mega-menu .menu-item-has-children > a:after{
  margin-top:10px;
}
.nav-mega-menu .menu-item-has-children a{
  text-decoration:none;
}
.nav-mega-menu .sub-menu a {
    padding: 15px 0px;
    display: block;
}

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

Could you clarify that for me?

Let's take a look at the function isIsogram(str) which checks if a string is an isogram. An isogram is a word or phrase in which no letter occurs more than once. The code snippet for this function can be seen below: We are particularly interested in ...

javascripthtmlcss

What is the best way to integrate a button within a datatable cell to display additional details in a popup window?

I am seeking help with datatable.js. I would like to insert a button inside the cells of the datatable columns to expand and display the detailed content of each cell. When I click on the red button, a popup modal should appear showing the full list of con ...

javascriptjquerycssdatatabledatatables-1.10

CSS - Radio buttons featuring closely spaced circular options

I am attempting to create small circles that act like radio buttons without any spacing between them. I was successful in achieving this, but I ran into issues with removing the space between the circles. The margin between two circles should be limited to ...

htmlcss

The button is unable to contain all the text, causing it to spill out instead of wrapping to

Need help with creating an HTML button that opens a link. The button consists of a title and a short description, but when the description is too long, it overflows outside the button. Currently implementing bootstrap and jquery. Code: body { backgr ...

htmlcsstwitter-bootstrap-4

Adjust the column count in mat-grid-list upon the initial loading of the component

My goal is to implement a mat-grid-list of images with a dynamic number of columns based on the screen size. Everything works perfectly except for one small glitch – when the grid first loads, it defaults to 3 columns regardless of the screen size until ...

javascriptcssangulartypescriptangular-material

Scraping Data: A guide to extracting width values from CSS style tags using Scrapy and CSS selectors

I've recently started learning scrapy and I'm struggling to extract the width from a div using a CSS Selector. No matter how hard I try, I can only find solutions using xpath instead of css selectors. Here is the HTML code snippet: <div clas ...

csspython-2.7css-selectorsscrapy

Turn off the ripple effect for this element

I am looking to turn off the ripple effect on an ion-chip component, which activates when clicked: <ion-chip> <ion-label>Hey</ion-label> </ion-chip> Is there a way to accomplish this? ...

htmlcssionic-framework

A guide to extracting data from HTML tables using Python for web scraping and exporting the results to

My Python skills are still pretty basic, but I'm working on creating a web scraping tool to extract data from an HTML table online and save it into a CSV file with the same structure. Here's an example of the HTML table (I'll show just a fe ...

pythonhtmlcsvweb-scrapingbeautifulsoup

Troubleshooting CSS issues in HTML pages

I created an HTML file but the CSS properties are not displaying correctly in the browser. I'm not sure where I made a mistake. Instead of using a separate CSS file, I have included it directly in the HTML file. <!DOCTYPE html> <html> &l ...

htmlcss

Maintaining an even distribution of flex children on each line as they wrap to the next line

I am curious about finding a way to maintain an even distribution of elements on each line, including the last one, using flex-wrap or any other flexbox technique. For example, let's say I have a flexbox with 6 elements. When it wraps, I would like t ...

htmlcssflexbox

Tips on Implementing a CSS Variable in a React Component

Is there a way to use content variable with in-line styles in React? I am unsure of how to accomplish this. CSS3 .right::after, button::after { content: var(--content); display: block; position: absolute; white-space: nowrap; padding: 40px 40p ...

cssreactjsmaterial-ui

Moving elements using CSS

Hi, I've been facing this issue with my web development since the start. Whenever I zoom in, the container also moves along. Is there any way to fix this problem? .darkslidecont{ width: 200px; height: 50px; position: relative; bac ...

htmlcss

How can I use JavaScript or CSS to identify the specific line on which certain words appear in the client's browser?

Imagine I have the following HTML structure: <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labor ...

javascriptjqueryhtmlcssline

Incorporate a CSS class name with a TypeScript property in Angular version 7

Struggling with something seemingly simple... All I need is for my span tag to take on a class called "store" from a variable in my .ts file: <span [ngClass]="{'flag-icon': true, 'my_property_in_TS': true}"></span> I&apos ...

javascriptcssangulartypescriptangular7

Trouble with Angular Charts: Data Reading Issue

Trying out chart.js for the first time and encountered an issue where the chart is not able to read data from the model. Previously, I had an error message of Error: $injector:modulerr Module Failed to instantiate module chart.js. This was fixed by switch ...

javascripthtmlangularjschart.js

Tips for using a unique format for a single field in jqGrid

My JQGRID site has table configuration set up like this: configid config rule 1. Application_name 'MyApps' 2. Max number 1,000,00 3. Application End 12/31/2012 Some cells are for numbers and others for dates. If a user wants to edit a date ce ...

phpjqueryhtmljqgrid

Is it possible to convert PDF documents to HTML using languages such as C, C++, or Java?

My current project involves annotating HTML files using Javascript, and I need to convert PDF files into HTML files specifically for the IOS platform. While I have had some success in annotating HTML pages, I am unsure how to go about converting PDF to H ...

javac++htmlpdf

Ways to conceal a division within the Repeater

Currently, I am developing a VB ASP.NET site using Visual Studio 2012 Express for Web. Within my project, there is a Repeater containing two div elements with the css classes .dnnFormLabel and .dnnFormItem. Here is a snippet of code from the Repeater: < ...

jqueryhtmlcssasp.netvb.net

Achieve a safari-inspired checkbox appearance across all web browsers with custom CSS styling

In my asp.net mvc project, I am dealing with numerous checkboxes. The client has provided me with a PSD file in which the checkboxes are either white or black. In the absence of any check mark indicator, I assume the black ones are checked. My goal is to r ...

asp.netasp.net-mvc-3css

What could be causing such a significant impact on the row height in a CSS table when a tiny image is inserted next to an input box?

Currently, I am facing a unique challenge while setting up a form using CSS tables. The issue is best explained through a fiddle: http://jsfiddle.net/GdgV4/6/ In the third row, you'll notice that adding an image with a height less than the input box ...

htmlcsscss-tables