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:

And here is the expected outcome:

...
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

Utilizing CSS to target the ID of an anchor element

I am a beginner in the world of HTML and CSS. I recently attempted to target an element using an id selector in my CSS code, but unfortunately, it did not work as expected. Can someone shed some light on why this might be happening? <!DOCTYPE html> ...

htmlcsscss-selectors

Discovering the meeting point where two dives converge

Is there a method to change the color of the overlapped common part of two animated circles? ...

javascriptcss

The appearance of the page varies when viewed on different computers using the same version of Firefox

Previously, I posed a question with a touch of irony regarding Firefox without providing an example. As a result, my question was downvoted and I had to request its removal. Now, I have an example illustrating the issue at hand. It took some time to clean ...

htmlcssfirefoxwindows-7

What is the best way to attach every sibling element to its adjacent sibling using jQuery?

I've been working with divs in Wordpress, where each div contains a ul element. <div class="list-item"> <div class="elimore_trim"> Lorem ipsum </div> <ul class="hyrra-forrad-size-list"> <li>Rent 1< ...

javascriptphpjqueryhtmlwordpress

Troubleshooting overflow problems when centering a UL menu with an unspecified width

Trying to create a demo where the scrollbars are removed when resizing smaller, but adding overflow: hidden causes issues with sub-menus. Demo Link HTML <nav> <ul> <li><a href="#">Menu Item</a></li> ...

htmlcssmenunavigation

When mousing over a subitem of the Image menu, ensure that the Image menu

Is there a way to prevent the image menu from reverting back to its original image when hovering over its subitems? I have 5 navigation menu items, but only one has a dropdown. Whenever I hover on the subitems of About Us, the image for About Us changes ba ...

htmlcssmenu

The background image will expand to fill any available space

I'm currently working on rendering divs with a background image CSS property. The images have fixed sizes, and I want to display them in a grid layout. However, the divs with background images stretch when there is extra space available, which is not ...

htmlcss

Easiest and quickest method to retrieve metadata from a website

Currently, I am using preg_match to extract the 'title' from websites, however, it is loading very slowly. Here is what I have so far: This code sends links to a function: <?php foreach($savedLinks as $s) { echo "<div class='sa ...

phphtmlpreg-matchmetadata

Exploring the functionality of the onblur HTML attribute in conjunction with JavaScript's ability to trigger a

How do the HTML attribute onblur and jQuery event .trigger("blur") interact? Will both events be executed, with JavaScript this.trigger("blur") triggering first before the HTML attribute onblur, or will only one event fire? I am using ...

javascripthtmljqueryjquery-ui

What is the best method to update the content of one div with content from another page using AJAX?

Having trouble achieving smoother page loads? My goal is to utilize AJAX to specifically fetch a certain div from another page and then swap out the content of a div on this current page with the response. Below is my JavaScript script that uses AJAX to r ...

javascripthtmljqueryajax

The color attribute enhances the appearance with a colored border specifically designed for Chrome users

Starting off, I appreciate the border that Chrome applies to my inputs. However, I am facing an issue with the textarea element. The problem is that the textarea uses the color attribute not only for coloring the text but also as the border color. Here is ...

cssgoogle-chrome

Designing with Bootstrap 4 involves incorporating a button that uses the data-toggle attribute set to "collapse" along with an href anchor linked to

I have attempted to link to an ID while also triggering a data-toggle collapse: <a href="#id" data-toggle="collapse" data-target="#collapseTwo" class="btn btn-primary" title="Something cool">Something very cool</a> for linking to this specif ...

htmlbuttonbootstrap-4anchor-scroll

Adjusting the dimensions of the central container

Does anyone have suggestions on how to resize the middle red container when the window is resized, considering the fixed-width black containers on the left and right? I am aware that this can be achieved using jQuery by calculating the window width and a ...

javascriptcssangularjs

Arranging two <ul> elements within an angular template

I need assistance with aligning two ul blocks. Currently, they are displaying next to each other, but their alignment is starting from the bottom instead of the top: <div class="ingredients-container"> <div style="display: inline-block; width: ...

htmlcssangularjs

What is the best way to adjust the width of a textarea based on its content

How can I dynamically set the width of a React Semantic UI textarea based on its content? Setting min-width doesn't seem to be working. Any suggestions? <Textarea key={idx} defaultValue={formattedText} className="customInpu ...

javascriptcssreactjstextareasemantic-ui

Looking for the location of a matching brace in a dataset?

As a newbie in the world of coding, I have embarked on learning about NodeJs file system module. Currently, my focus is on handling a large data file stored as a string. The challenge that I am facing is with locating the matching close brace and its pos ...

javascripthtmlnode.jsangularjs

Move the div in an animated way from the bottom of the screen to the right

I am facing an issue with the image animation in my project. Currently, the image moves from the bottom to the left corner, but I want it to move from the bottom to the right corner instead. I have attempted using the transform translate property to achiev ...

css

Is it possible to alter the background color once the content of an input field has been modified?

I am working with an angular reactive form and I want to dynamically change the background color of all input fields when their value is changed. Some of these input fields are pre-populated and not required. I came across a potential solution on Stack Ove ...

javascripthtmlcsstypescript

Tips for positioning a text link alongside an image link within a table row using only inline styles

I am struggling to align text and an image link next to each other within a table row. The image keeps moving up and down despite my efforts to use various alignment and display block styles. I am only able to use inline CSS and need it to display correctl ...

htmlcssemailoutlook

Creating a column heading that appears at the top of each column break with the help of CSS column-count

Is there a way to output a list into x number of columns within a content div without specifying the exact amount of columns in CSS? I also want to include a heading at the top of each column: Firstname Lastname State Firstname Lastname State ...

htmlcssmultiple-columns