Enhance user experience with a flexbox navigation bar that dynamically adjusts link heights to ensure

I am struggling with making my navbar links the same height and keeping their text vertically centered, especially when they wrap onto multiple lines on a narrow viewport. While I have achieved vertical centering, I am facing difficulties in ensuring that the height of all <a> elements is consistent. You can take a look at the codepen example provided below for reference...

http://codepen.io/anon/pen/GovmZa

.container {
  width:950px;
  margin:0 auto;
}

ul {
  display:flex; 
  align-items: stretch; 
  justify-content: flex-start;
}

li {
  list-style-type:none; 
  display:flex;
  flex-grow:1;
  align-items:center;
  flex-direction: column;
  text-align:center;
  border:1px solid #fff;
  text-align:center;
}

a {

  color:#fff;
  padding:10px;
  margin-right:1px;
  flex: 1;
  display: flex;
  align-content: center;
  align-items: center;
  text-align:center;
  background-color:#000;
}
<div class="container">
  <p>How do I make the links stretch to be equal heights and keep text vertically aligned in the center?</p>
  <ul>
    <li>
      <a href="#">Can</a>
    </li>
    <li>
      <a href="#">somebody please help me figure</a>
    </li>
    <li>
      <a href="#">this</a>
    </li>
    <li>
      <a href="#">out</a>
    </li>
  </ul>
</div>

htmlcssflexbox

Answer №1

Each list item (li) is already set as a flex container, but consider changing the orientation to column.

Next, allocate the anchors with flex: 1, allowing them to take up all available space.

li { flex-direction: column; }
a  { flex: 1; }

To ensure text remains centered both horizontally and vertically, include text-align: center within the li styling. Additionally, make the anchors containers for flex items by incorporating align-* properties.

li { 
  flex-direction: column;
  text-align: center;
}

a {
  flex: 1;
  display: flex;
  align-content: center; /* for vertical centering of multi-line text */
  align-items: center;   /* for vertical centering of single-line text */
}

Improved Codepen Link

Answer №2

All the list items appeared to be the same height, but the issue lay within the anchor tags inside those list items.

By applying some flex styling to the anchor tags, you should be able to resolve the problem.

.container {
  width:300px;
  margin:0 auto;
}

ul {
  display:flex;  
  justify-content: flex-start;
}

li {
  list-style-type:none; 
  display:flex;
  align-items: stretch; 
  flex-grow:1;
}

a {
  display:flex;
  align-items: center; 
  background-color:#000;
  color:#fff;
  padding:10px;
  align-content: center;
  margin-right:1px;
}
<div class="container">
  <p>How do I make the links stretch to be equal heights and keep text vertically aligned in the center?</p>
<ul>
  <li>
    <a href="#">Can</a>
  </li>
  <li>
    <a href="#">somebody please help me figure</a>
  </li>
  <li>
    <a href="#">this</a>
  </li>
  <li>
    <a href="#">out</a>
  </li>
</ul>
</div>

Answer №3

I managed to come up with a solution using the following code snippet, but I recommend waiting for further feedback on it.

.wrapper {
  width:500px;
  height:150px;
  margin:0 auto;
}

ul {
  display:flex; 
  align-items: stretch; 
  justify-content: flex-start;
  width:100%;
}

li {
  list-style-type:none; 
  display:flex;
  flex-grow:1;
  align-items:center;
}

a {
  background-color:#333;
  color:#fff;
  padding:8px;
  text-align: center;
  margin-right:2px;
  height:30px;
  width:100%;
}

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

Link to toggle a CSS spoiler button

Currently, I have Ajax set up to replace the main div with a link. In addition, there's a spoiler-type navigation that allows you to hide or show the menu. I have my links inserted in this structure and am trying to figure out how to make it so that c ...

htmlcssajax

Utilizing a TypeScript Variable as a Tagname in an HTML File within Angular

This specific problem is originally documented in this post. Despite being flagged as a duplicate, my scenario differs because the HTML content at hand is too extensive for utilizing innerHTML. The structure of my component's HTML file is as follows: ...

htmlangulartypescript

Is there a way to automatically scroll vertically to a specific line in HTML?

Trying to explain this is a bit tricky. I am looking to add an element to the HTML that prompts the browser to scroll vertically to its location automatically when loaded, similar to an anchor. So: | visible area | | content html | | content html | ...

javascriptjqueryhtmlcss

Displaying hidden divs upon mouse hover using

Currently, I am in the process of creating a website that features a header with two rows of names. The goal is to have a specific div appear below the names when a user hovers over them. This div will include additional images and links for users to inter ...

jqueryhtmlhoverfadeinhoverintent

Scrollable Turbo Table experiencing a problem with the PrimeNG filter dropdown

When using PrimeNG Turbo Table, I am facing an issue where the filter dropdown is getting placed inside the scrollable table. The dropdown works perfectly fine without the scrollable table. You can see it in action here. However, when the table is scroll ...

cssangularangular5primengprimeng-turbotable

Why is this basic HTML code not functioning as expected?

I attempted to combine HTML and JS to change the color of a box upon clicking it, but after reviewing the code multiple times, I am unable to pinpoint the issue. <!doctype html> <html> <head> </head> <body> <d ...

javascripthtml

Incapable of modifying the text within a div container

I am currently working on a script that translates a Russian forum word by word using TreeWalker. However, there is a specific type of div element that I have been unable to change the text for. That leads to my question: How can I go about changing it? Un ...

javascriptjqueryhtmlajaxgreasemonkey

ways to halt a noise once an animation is complete

I don't have much experience with coding in general, but somehow I've made it this far. Now I'm stuck on the final piece of the puzzle. This is related to a Twitch alert that I'm setting up through 'Stream Elements'. The iss ...

javascripthtmljquerycsshtml5-video

Why is the last move of the previous player not displayed in this game of tic tac toe?

Why does the last move of the previous player not show up in this tic-tac-toe game? When it's the final turn, the square remains empty with neither an "O" nor an "X". What could be causing this issue? Here is the code snippet: The HTML code: <div ...

javascripthtmlcss

Is there a method to make an <img> automatically adjust its width to fit that of its containing <div> even if the style/attributes are

If I'm unable to customize the style, tag, or attributes of an image element, is there a way to make its width adjust to fit a parent division or another container? This situation pertains to an email template, so external stylesheets, <style> ...

htmlcss

AngularJS utilizes JSON objects to store and manipulate data within

My task requires accessing information from an array that is nested inside another array in Json format. Here's a more detailed example: [ { "id": 1, "name": "PowerRanger", "description": "BLUE", "connections": [ {"id": 123,"meg ...

javascriptjsonangularjshtml

Utilize CSS to format the output of a script embedded within

When I embed the following script in my HTML, the output doesn't have any styling. How can I style the script output to blend well with the existing HTML structure? I tried accessing the output by ID, but couldn't figure it out. <script> ...

javascripthtmlcss

Div element to animate and vanish in a flash

I'm attempting to create a smooth slide effect for a div element before it disappears. Below is the code I am currently using: function slideLeft(element) { $("#" + element).animate({ left: "510" }, { duration: 750 }); document.getEle ...

javascriptjquerycss

Click a button to show or hide text

I am attempting to create a button that will toggle text visibility from hidden using 'none' to visible using 'block'. I have tried the following code but unfortunately, it did not yield the desired outcome. <p id='demo' s ...

javascriptcsshtmldom-events

Screen resolution for the background image on the banner

I'm currently working on a website that can be found at this temporary link: The main banner of the site features a background image with fading text, which looks great on standard desktop screens. However, when viewed on wider screens like 1600x1200 ...

htmlcssresolutionscreen-resolution

`How can you indicate a clicked linkbutton from a group of linkbuttons in asp.net?`

There is a single aspx page with a set of link buttons on it. Link Button 1 Link Button 2 Link Button 3 Link Button 4 Link Button 5 When any of the link buttons are clicked, they should be highlighted. All these link buttons are contained within a table ...

.netasp.netcss

What is the best way to display a JavaScript object array on the screen

As someone who is new to JavaScript, I have a JavaScript object array that I would like to print the values of in the browser. However, I am unsure of how to do this without using document.write(vehicle); var vehicle = [{name:'Van',wheel:4,cha ...

javascripthtmlarraysobjectprinting

Ways to rejuvenate an Angular element

Last month, I was called in to rescue a website that was in chaos. After sorting out the major issues, I am now left with fixing some additional features. One of these tasks involves troubleshooting an angular code related to videos and quizzes on certain ...

javascriptjqueryhtmlangularjscanvas

Having trouble sending data from AJAX to PHP

My goal is to implement a "load more" feature in my web app that automatically calls a PHP file to load additional products as soon as the page is fully loaded. In order to achieve this, I am using AJAX to call the PHP file: $(document).ready(function() { ...

javascriptphphtmljqueryajax

Retrieving PNG image from dynamically created PDF file with DomPDF

Having trouble displaying an image on a generated PDF using DOMPDF. My DomPDF version is v2.0.3 and I'm working with XAMPP on localhost. This is the output: see image here Below is the code snippet: <?php require_once __DIR__ . '/vendor/auto ...

phphtmldompdf