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

Post your artwork on Facebook's timeline

I am working on a website that allows users to create custom smartphone cases. One feature I want to implement is the ability for users to share their design on Facebook, including the actual design itself. I have the object and the canvas with the 's ...

javascriptfacebookhtmlcanvas

Uploading pictures to a directory and storing their filenames in a database with the help of PHP

I'm facing a challenge trying to upload 2 files into a folder and save their names and image paths in a database. Below is my HTML code for reference: <input class="field2" type="file" name="file[]" multiple="multiple" /> Here is the PHP code ...

phphtmlmysqldatabasemysqli

Create a Material UI Text Field that has a type of datetime and can span multiple lines

Is it possible to create a Material UI component of type "datetime-local" that can be displayed on multiple lines while still allowing the date to be edited? The issue arises when the width is too narrow and cuts off the date text. Although the TextField ...

htmlcssreactjsmaterial-uidatetimepicker

Is there a way to use HTML and CSS to switch the style of a dynamic decimal number to either Roman numerals or Katakana characters within a specified HTML element, such as a tag, div

I've searched everywhere but only found guides on list styling and counter styling in CSS that didn't work out. So, for example, I have a number inside an HTML tag that is changed dynamically using Vue Watch. I want to display the number in upper ...

javascripthtmlcssvue.js

New post: The vue component that was released lacks CSS (NPM)

For the first time, I am releasing a Vue component on NPM and everything seems to be in order, except for one issue - the CSS is missing. While it functions perfectly when tested locally, after installing the npm package in a test project and importing the ...

cssvue.jsnpm

Display a message in jQuery when the same option is chosen more than once

I need help with my form that has an input text field and a select dropdown. Here is the markup: <div id="form-wrap" style="width:500px; margin: 0 auto;"> <table> <tr> <th width="55%">Service Name</th> ...

jqueryhtml

What could be the reason behind CSS styles applying only when inserted within a style tag in my form, and not in the linked CSS file?

I want to express my gratitude for finding a solution to positioning Validator CallOuts on a web form through this question regarding repositioning the AJAX toolkit's CalloutExtender control. Does anyone know why applying CSS classes directly within ...

cssajaxwebformsajaxcontroltoolkit

How can we transition a line of code from PHP to Smarty?

I'm currently working on converting a php line of code to Smarty. I've managed to convert the variable successfully, but I am struggling with incorporating the small syntax before it. Below are both sets of syntax - how can I include link_it with ...

phphtmlsmarty

Python Selenium: Troubleshooting the get_elements method not retrieving li items within ul tags

I am facing an issue while trying to retrieve li items within a ul element using the following code: driver.get('https://migroskurumsal.com/magazalarimiz/') try: select = WebDriverWait(driver, 10).until( EC.presence_of_element_locate ...

pythonhtmlselenium

Issue with sticky positioning not functioning properly with overlapping scrolling effect

When the user scrolls, I want to create an overlapping effect using the 'sticky' position and assign a new background color to each div (section). However, despite setting 'top' to 0 for the 'sticky' position, the divs still s ...

htmlcss

What is the process for deleting an animation using JavaScript, and how can the background color be altered?

Two issues are currently troubling me. First off, I am facing a challenge with an animation feature that I need to modify within the "popup" class for a gallery section on a website. Currently, when users load the page, a square image and background start ...

javascripthtmlcss

Comparing transition effects: scale, transform, and all

My goal is to apply transition effects to specific transform functions in CSS, such as scale(), while excluding others like translate(). Initially, I attempted the following code snippet: input:focus + label, input:not(:placeholder-shown) + label { tran ...

csscss-transitionscss-transforms

Trouble with downloading a file from an HTML hyperlink

When I attempt to download a file from my file folder using the absolute path <a href='N:\myName\test.xlsx'>download</a>, the file opens directly instead of downloading. However, if I use the relative path <a href=&apos ...

javascripthtmlhyperlink

Tips for effectively combining an array with jQuery.val

My goal is to have multiple form fields on a page, gather the input results into an array, and then store them in a database. This process was successful for me initially. However, when I introduced an autocomplete function which retrieves suggestions from ...

javascriptphpjqueryhtml

Tips for separating the 'title' and 'icon' elements within Bootstrap panels?

I am currently working on integrating a FAQ section into my website (not yet live, so I cannot provide a link). However, I am facing some minor CSS issues that I am struggling to resolve. The problem lies in a panel that is meant to display as shown below: ...

htmlcssbootstrap-4accordionpanel

Adding a variable to the .append function in HTML code

I am currently working on a way to include the current date and time when a user comments on a post in my forum. While I have successfully managed to upload the text inputted by the user into the comment section, I am now looking to also dynamically insert ...

javascriptjqueryhtml

Looping CSS text animation with typing effect

I am struggling with a CSS code that types out text, but it only does so once and I need it to repeat infinitely. Despite adding animation-iteration-count: infinite;, it still doesn't work as intended. Another issue is that it slows down at the end. H ...

htmlcssanimation

Can anyone provide guidance on how to trigger 3 unique functions in a specific order using JavaScript?

I've been troubleshooting this issue for quite some time, but I just can't seem to figure it out. Here's my dilemma: I have three functions - one to shrink a div, one to reload the div with new data, and one to enlarge the div - all triggere ...

javascriptjqueryhtml

The auto-play feature fails to function on iPhone devices when using Reactjs

I am currently working with Reactjs and Nextjs. I have a video on my website that is functioning properly on Android phones but not on iPhones. How can I resolve this issue? I have attempted the following code: <video loop autoplay='' muted> ...

javascripthtmlreactjsiphonenext.js

How to Create a Floating DIV with CSS

Here is the URL I am referring to: Website I want to position the Weather DIV above other content on the page while still maintaining its position when expanded or collapsed. How can I achieve this without affecting the layout of other elements? This is ...

htmlcss