Alignment of items in the horizontal menu can be arranged in a justified

The alignment of the menu on this particular website is not as it should be.

This might be a duplicate issue, but despite going through all previous solutions, I am baffled by this problem.

Currently, I am using this CSS method to justify the elements in the menu:

<ul class="justified"><li>Element</li></ul>

Check out this link for more information

You can find detailed instructions on how to achieve this on CSS Tricks (last technique):

Visit this site for clarification

I have successfully implemented this solution on various websites, but after a recent Wordpress update, this issue has arisen. (This is the first time I have faced a theme problem post-upgrade).

Thank you for your assistance,

UPDATE #1

Following Pangloss's advice, I discovered that WordPress is generating <li> elements without whitespace between them. This was an unexpected behavior... I resolved the issue by manually inserting the missing whitespace.

  $menu = wp_nav_menu($defaults);
  $menu = str_replace("</li><li", "</li> <li", $menu);
csswordpressalignmenttext-justify

Answer №1

The technique of using text-align:justify for positioning requires the presence of white space (empty space) between the elements in the code.

In this example, it is successful because there are white spaces between the <li> tags.

ul {
  text-align: justify;
  padding: 0;
}
li {
  display: inline-block;
}
ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

However, in this next example, the same CSS rules fail to work because there are no white spaces between the elements. This issue is also common in WordPress generated code.

ul {
  text-align: justify;
  padding: 0;
}
li {
  display: inline-block;
}
ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}
<ul><li>1</li><li>2</li><li>3</li></ul>

However, there are alternative methods such as utilizing Modern CSS3 flexbox.

ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}
<ul><li>1</li><li>2</li><li>3</li></ul>

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

Exploring ways to animate a conditionally displayed component when the state changes using a combination of javascript and css

I am encountering a scenario where I have a react component with a specific part that is rendered conditionally. Upon clicking on a visible element within the component (button), the state changes triggering the display of the hidden parts. However, inst ...

cssreactjs

Containers for Comparing Images are Unable to Flexibly Wrap

Check out my codepen project here: https://codepen.io/Bryandbronstein/pen/NLVQjB I've encountered a peculiar issue while experimenting with CSS and Javascript. I came across an image comparison slider on the W3C website that worked flawlessly as a si ...

javascripthtmlcssflexbox

The hidden absolute positioned div disappears once the sticky navbar becomes fixed on the page

Whenever my navbar reaches the top of the screen, the links in the dropdown menu disappear. I followed tutorials and examples from w3schools to build my webpage. Specifically: howto: js_navbar_sticky howto: css_dropdown_navbar This code snippet exempli ...

javascripthtmlcssmenusticky

At times, the Kendo UI Tooltip may linger on screen longer than expected, failing to disappear as

I've been experimenting with this issue for quite some time now, but I'm stumped. Whenever I quickly move my mouse cursor over a series of links, occasionally a tooltip will linger on the screen even after the cursor has moved away from the link. ...

javascripthtmlcssajaxkendo-ui

Issue: In Firefox, resizing elements using position:absolute does not work as expected

My resizable div code looks like this: #box { height: 10rem; width: 10rem; resize: both; overflow: hidden; border: solid black 0.5rem; position: absolute; pointer-events: none; } <div id="item"></div> While it works perfectly ...

javascripthtmlcss

The images are not clickable when trying to hyperlink them

I'm attempting to create a clickable image that will redirect users to another site when clicked. Here's the code I've tried: <div class="haus"> <a href="http://google.com"><img src="http://schwedenladen.de/wp-content/the ...

htmlcssimagehyperlink

Troubleshooting HTML navigation bar white space problem

I am encountering a white space issue with my HTML nav bar for the first time. I have managed to fix the space on the sides (left and right), but there is still some space at the top of the nav bar. Can someone please assist me in resolving this issue? To ...

htmlcss

Is there a way to ensure that a child mimics the behavior of its parent when adjusting the opacity and visibility properties of both elements?

Apologies for the ambiguous title, as I am struggling to accurately convey the issue I am encountering. To clarify the problem, I have created a jsFiddle. In my current layout, all four divs have opacity: 1 and visibility: visible, while divs a and b both ...

htmlcss

accordion effect with a bundle of multi-anchor buttons

Working on a website where I need a navbar or anchor button to display content. Having an issue where all expanded items collapse when clicked for the first time, rather than following instructions as outlined in the JavaScript code. Here is the code snip ...

javascriptjqueryhtmlcsstwitter-bootstrap

Adjusting the size of the snap increments

When using gridstack, I have the ability to resize my widgets. However, I've noticed that when dragging on the widgets' handles, they snap to specific sizes, which seems to be a fixed amount. If I wanted to set the widget's size to something ...

javascriptcssgridstack

Different method for adding child elements to the DOM

When creating a DOM element, I am following this process: var imgEle = document.createElement('img');     imgEle.src = imgURL;             x.appendChild(imgEle); Instead of appending the last line which creates multiple img elements ev ...

javascripthtmlcssdomappendchild

Unable to scroll the control-sidebar in the AdminLTE dashboard

Currently working on a project using adminlte v3.1.0 and encountered an issue with the control-sidebar. After adding the class layout-fixed to the body tag, I'm unable to scroll the sidebar. I would like to have the sidebar fixed but still be able to ...

cssbootstrap-4adminlte

Troubleshooting techniques for resolving CSS issues with the video.js package in ReactJS

When using video.js in react to build a video player, I encountered an issue with the npm package not providing its inbuilt CSS. How can I add the inbuilt CSS of video.js? Instead of the control bar, I am getting something different than what is shown in t ...

cssreactjs

Change the pseudo class "typed::after" to eliminate the element

Hey there, I need some assistance on how to target a specific element with the class .typed::after using JavaScript. The code provided below only targets classes without ::after or ::before, and the cursor is currently positioned on the after of 'type ...

javascriptjqueryhtmlcss

Arranging two divs to appear side by side, but they are mysteriously aligning in a diagonal pattern

I'm facing an issue with my navbar's divs not displaying side by side when set to display inline. Here is the HTML code snippet: <!--Nav starts here--> <nav class="navbar"> <div class="navbar-item-set"> ...

htmlcss

Issue encountered while compiling CSS for a map with @each function in Sass

I am currently in the process of developing a set of classes to define image styles based on specific skills. Colors associated with each skill are stored in a map. $skills-color: ( default : #D8D8D8, 6 : #2E80EC, 5 : # ...

csssass

What methods are available for updating the href color of an element using the DOM?

I am looking to update the color of a tab (Mathematics-tab) based on the value of 'aria-selected' changing to true in Bootstrap. I have multiple tabs, including one for mathematics, and I want to visually differentiate between selected and unsele ...

javascripthtmlcssbootstrap-4

The contact form fields shimmer as they transition in and out

I am currently working on a contact form that includes four input fields - name, phone, email, and message. The functionality I am looking to implement is that when I click on one input field, the other fields will fade by 30%, such as email, phone, and ...

javascriptphpjquerywordpress

Looking to discover how to optimize a website for various Android resolutions?

Currently, I am working on designing websites specifically for Android phones. However, I have encountered a major challenge due to the wide range of screen resolutions found on these devices. Some phones boast a height of 800px while others are limited to ...

androidhtmlcssandroid-layoutmobile

Shifting the pagination outside of the slider in ReactJS and SwiperJS seems to be tricky. Despite trying to adjust the margins and padding, the pagination

I've been struggling with this issue for a while now. I need to move the pagination outside of the slider, but using padding or margin doesn't seem to work. It always remains inside the slider, and if I try to position it outside, it gets hidden. ...

javascriptcssreactjsswiper.js