Aligning the center of an unordered list for 2 lines

I'm struggling to center align my menu that spans 2 lines.

I'm currently using ul li and I'm not sure if this is the best approach. I've tried various solutions from Stack Overflow, but nothing seems to be working :(

I want the menu to span 2 lines and still be centered

Here's a screenshot of how it currently looks:

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

CSS:

@media only screen and (min-width: 300px) and (max-width: 480px) {
.header-links-mobile {
  display:inline-block;
  width:80%;
  position:absolute;
  top:60px;
  left:0%;
  text-align:center;
}

.header-links-mobile ul {
  width:90%;
  margin:auto;
  padding:0;
  display: flex;
  justify-content: center;
}

.header-links-mobile ul li { 
  color:#fff;
  padding:5px 5px 0 5px;
  display: inline;
  text-align: center;
}

.header-links-mobile ul li a { 
  color:#fff;
}

.header-links-mobile ul li a:hover {
  color:#fff;
}
}

HTML

<div class="header-links-mobile">
  <ul>
    <li>
      <a href="/mass-supply-live/Admin" class="administration">Admin Panel</a>
    </li>
    <li>
      <a href="/mass-supply-live/order/history" class="account"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e1f0d161b1b10153e1d070e161b0c101b0a501d1150041f">[email protected]</a></a>
    </li>
    <li>
      <a href="/mass-supply-live/logout" class="ico-logout">Log out</a>
    </li>
    <li class="ico-account-wrapper">
      <a href="/mass-supply-live/customer/spend-meter" class="ico-logout">My account</a>
    </li>
    <li>
      <a href="/mass-supply-live/cart" class="ico-cart" id="topcartlink">
        <span class="cart-label">Shopping cart</span>
        <span class="cart-qty">(54 ITEM)</span>
      </a>
    </li>
  </ul>
</div>

Answer №1

Can you please implement the following stylesheet?

.header-links-mobile, .header-links-mobile ul {
    width :100%;
}


.header-links-mobile ul {
  flex-wrap: wrap;
}

Here is a link to the fiddle for reference.

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

Understanding the response format in jQuery and AJAX

Can anyone advise on the optimal data format for communication with JavaScript? Should I stick to JSON or use plain HTML instead? Are there any alternatives worth considering? ...

Linking URLs in an Android TextView with the <a href> tag

When creating a TextView dynamically, I encountered an issue with setting the text as linkable. The desired text value was "Google". After referring to various resources on the internet and blogs, such as this one, I attempted different methods but did not ...

The overflow:hidden feature doesn't appear to be functioning as expected

I am struggling to hide the text details within a div containing text and image, organized in ul li structure. Despite applying overflow hidden to the .sbox class, the text details refuse to remain hidden and appear to be overflowing. Explore this issue o ...

Adjusting the tab order dynamically within a navigation menu

I am currently facing an issue where the focus is not being ignored when the drawer is closed. Even with the showDrawer reference set to false, I can still tab through links in the closed drawer. Setting tabindex="-1" on the <nav> element does not pr ...

I have the ability to shift text 50 pixels to the left

My navigation bar is currently aligned to the left, but I'm looking to move the text 50px from the left. Is there a way to achieve this? .navigation { width: 100%; height:35px; background-color: #f1b500; /*f2c255*/ margin-top: 4.4em; } .navig ...

Is it possible to integrate HTML pages as sections within an HTML file using AngularJS?

There are three individuals each working on separate sections of a webpage. One is focusing on moving images, another is devoted to the tab section. This begs the question: 1) Is it feasible to embed all these HTML sections into a single HTML page and dis ...

"Adding a Numeric Keypad to Enhance Security in Password Fields on Devices

I have been encountering a common issue where none of the solutions I have come across seem to work for the devices I am testing. Specifically, Android, iOS, and Windows devices are not implementing the numeric keypad as expected, regardless of whether the ...

What is the method for altering the background color of an input field upon entering text?

As a beginner in Javascript and jQuery, I am struggling to understand why my code is behaving the way it does. I have written two similar functions aimed at changing the background color of an input field. The objective is to set the background color of t ...

Getting the value of a CSS Variable from Radix UI Colors with Javascript/Typescript: A step-by-step guide

Currently, I am attempting to dynamically retrieve the Radix Colors values in JavaScript. The reason for this requirement is that I generate these colors based on user input, resulting in values that are variable. As a result, I cannot hardcode the values. ...

Loading default values into HTML/Jade in an Express/node.js web application

My web application is developed with Express for node.js. I have utilized Jade template files for the HTML views. On one of these views, I want the input fields to be pre-filled with data. The data is stored in a mongodb session store, as well as in anot ...

What about using CSS sprites in place of individual images?

After examining the code for some major websites, such as YouTube and Yahoo, I noticed that they tend to rely heavily on CSS sprites rather than individual image tags. Is this considered a best practice in web development? While using image tags with alt a ...

Transitioning JS/CSS effects when the window is inactive

My latest project involved creating a small slider using JavaScript to set classes every X seconds, with animation done through CSS Transition. However, I noticed that when the window is inactive (such as if you switch to another tab) and then return, the ...

Immediate family members nearby are not an option. We will have to create the form dynamically

On a previous page, there is a form that allows users to input data and define the number of "Attributes" they want to assign to a device by clicking on a button. Users are prompted to specify a name and type for each attribute. If the user selects "Selec ...

Adjust the heights of certain headers in an HTML table, not all of them

Here is the link to my JSBin: https://jsbin.com/xofaco/edit?html,css,output I am facing an issue with an HTML table that has both nested headers and regular headers. My goal is to make all headers equal in height, specifically I want columns labeled "four ...

javascript conceal other sections upon hovering

There are 4 list items (<li>) that I want to use as triggers for linked images. In this project, I am using vanilla JavaScript as jQuery is not allowed. Below is the code snippet: var children = document.querySelectorAll('#resistorContent > ...

developing a fresh node within the jstree framework

Recently, I have been working on creating a node using crrm as shown below $("#TreeDiv").jstree("create", $("#somenode"), "inside", { "data":"new_node" }); This specific function is triggered by a wizard, enabling me to seamlessly create a new node withi ...

Creating an animated CSS growth effect using inline SVG

I'm trying to make these circuits look like they are running downwards. I have the right movement, but I can't seem to start them at their actual size, causing them to appear skewed at the beginning of the animation and then scaling to full size ...

Elements within the Div are perfectly aligned in the center and restricted from moving to either the left or right edges of the

Currently, I am developing a project similar to Gmail. In order to achieve this, I need to design a div container that consists of various components such as Inbox, Send, Draft, etc. However, when I attempt to move these components around, the icons disapp ...

Using Jquery to run a jquery script stored in a variable within jQuery syntax

This question may seem a bit confusing, so allow me to explain further. I am trying to execute a jquery script that is written in a text file obtained through an ajax request. For example, the code I receive from the ajax request looks like this: ($($(" ...

Utilizing Custom Script Tag Types in Visual Studio for Enhanced HTML Template Functionality and Improved Syntax Highlighting

Currently, I am utilizing Visual Studio 2012 for editing HTML and JavaScript. My approach involves inserting templates using partial views in inline script tags (view code below). The use of AngularJS, a Javascript framework, dictates that the type must be ...