Is there a way to have the menu displayed on a single line and consistently centered?

I am working on a menu that needs to stay centered at the top of the screen, with a consistent appearance and just one line, regardless of the screen width. However, I'm encountering an issue where the menu mysteriously transitions into a two-line format at a certain width.

Any suggestions on how to resolve this problem with the two-line menu?

JSFiddle

Try resizing the screen in the JSFiddle link provided above for better insight into the issue.

HTML:

<ul id="menu">
  <li><a href="#" class="menu-items1">ABOUT US</a></li>
  <li><a href="#" class="menu-items1">SERVICES</a></li>
  <li><a href="#" class="menu-items1">CLIENTS</a></li>
  <li><a href="#" class="menu-items1">ADDRESS</a></li>
</ul>

CSS:

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
    margin-left:29%;
    margin-right:29vw;
}

li {
    display:inline-block;
    float: left;
    margin-right: 1px;
}

li a {
    font-family: "Open Sans", sans-serif;
    font-size: 11px;
    letter-spacing:2px;
    display:block;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #000;
}

.menu-items1 {
    min-width:90px;
    margin-top:1.5px;
}

.menu-items2-1 {
    margin-left:20px;
}

.menu-items2-2 {
    margin-left:20px;
    margin-top:0.5px;
}

.menu-items2-3 {
    margin-left:10px;
}

.menu-items2-4 {
    margin-left:30px;
    margin-top:0.5px;
}

li:hover a {
    text-decoration:none;
  color: rgba(153, 153, 153, 1);
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
}

li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}
cssmenu

Answer №1

I have made some adjustments to your HTML/CSS structure. Pay special attention to points 4 and 5 detailed below, but in summary, I...

  1. Modified the CSS hooks to primarily use classes (reducing reliance on markup in selectors)
  2. Included an HTML5 tag, <nav>, in the markup for improved semantics
  3. Eliminated the <a> tag for one of the menu items to demonstrate why I relocated the class to the <li> and reassigned certain CSS properties
  4. Applied white-space: nowrap; to maintain inline-block elements on a single line
  5. Inserted a breakpoint at 480px (via media query) to reorganize the menu layout when the screen size is too small

.menu-list {
  display: block;
  padding: 0px;
  list-style-type: none;
  text-align: center;
  white-space: nowrap;
}

.menu-list-item {
  display: block;
  min-width: 90px;
  font-family: "Open Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-align: center;
  line-height: 50px;
  color: #000;
}

.menu-list-item a {
  display: block;
  cursor: pointer;
}

.menu-list-item:hover a {
  text-decoration: none;
  color: rgba(153, 153, 153, 1);
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

@media(min-width: 480px) {
  .menu-list-item { display: inline-block; }
  .menu-list-item a { min-width: 90px; }
}
<nav>
  <ul class="menu-list">
    <li class="menu-list-item"><a href="#">ABOUT US</a></li>
    <li class="menu-list-item"><a href="#">SERVICES</a></li>
    <li class="menu-list-item"><a href="#">CLIENTS</a></li>
    <li class="menu-list-item">ADDRESS</li>
  </ul>
</nav>

JSFiddle version

Answer №2

To ensure they always stay in a single line, you can utilize table display:

#menu {
    display: table;
}
.menu-items {
    display: table-cell;
}

Here is an updated version of your example: https://jsfiddle.net/25brdx7r/

Answer №3

Centering text can be achieved by using text-align: center; instead of margin percentages.

  1. Eliminate the margin-left and margin-right properties from your ul.
  2. Add width: 100%, text-align: center;, and white-space: nowrap; to your ul.
  3. Remove the float: left; style from your li elements.

html, body {
    width: 100%; height: 100%;
    margin: 0;
    padding: 0;
}

/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
width: 100%;
        text-align: center;
        white-space: nowrap;
}

/*Create a horizontal list with spacing*/
li {
display:inline-block;
margin-right: 1px;
}

/*Style for menu links*/
li a {
font-family: "Open Sans", sans-serif;
    font-size: 11px;
    letter-spacing:2px;
display:block;
height: 50px;
text-align: center;
line-height: 50px;
color: #000;
}

.menu-items1 {
min-width:90px;
margin-top:1.5px;
}

.menu-items2-1 {
margin-left:20px;
}

.menu-items2-2 {
margin-left:20px;
margin-top:0.5px;
}

.menu-items2-3 {
margin-left:10px;
}

.menu-items2-4 {
margin-left:30px;
margin-top:0.5px;
}

/*Hover state for top level links*/
li:hover a {
text-decoration:none;
  color: rgba(153, 153, 153, 1);
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
}

/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
<ul id="menu">
  <li><a href="#" class="menu-items1">ABOUT US</a></li>
  <li><a href="#" class="menu-items1">SERVICES</a></li>
  <li><a href="#" class="menu-items1">CLIENTS</a></li>
  <li><a href="#" class="menu-items1">ADDRESS</a></li>
</ul>

JSFiddle

Answer №4

Switch your layout to inline. Block elements are displayed on a separate line.

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

Error: The term "Particles" has not been defined

I'm attempting to integrate code from a website into my project, but encountered an error when the particles failed to run after adding it. I downloaded and installed particle.js from "https://github.com/marcbruederlin/particles.js/issues" for this pu ...

javascripthtmlcssparticlesparticles.js

Unable to eliminate top margin in Bootstrap 3 affix feature

Struggling to locate the source of the margin-top when utilizing the affix plugin on my Navbar. You can view [my website here] for better understanding. Should I be implementing Javascript to solve this issue? My current skills in that area are not very ...

javascriptcsstwitter-bootstraptwitter-bootstrap-3

Track the cursor's movement

Looking to add an animation effect to my website. I want the navbar to follow the cursor within a limited space when hovered over. Check out this example for reference: . Here's the code I have so far, but it's not quite achieving the desired res ...

javascripthtmlcss

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

Selection tool for Material UI Fields

Is there a way to design something similar to this layout using Material UI? I'm looking to create a selection between fields. Any advice on how to achieve this in Material UI? ...

cssreactjsmaterial-ui

Is there a way to confirm if all div elements have a designated background color?

I have a scenario where I have dynamically added several divs with a specific class to my webpage. These divs change color when the user hovers over them. I am trying to trigger a specific function once the last div has been set to a particular backgroun ...

javascriptjqueryhtmlcss

No matter how many times I modified the code in the ReactDOM.render() method within my index.js file, the end result remained unchanged

When I ran npx create-react-app my-app, and then proceeded to cd my-app and npm start, a browser opened on localhost:3000. While looking at the index.js file, I noticed that the ReactDOM.render() method included the following code: ReactDOM.render( <Rea ...

javascriptphphtmlcssreactjs

The functionality of onClick or onChange seems to be malfunctioning in the preline user interface select component

I recently integrated the preline UI library into my React project to enhance the design of my website. However, I encountered an issue where using the "select" element with the data-hs-select attribute as suggested by preline UI seemed to cause problems w ...

htmlcssreactjsformiktailwind-ui

Applying CSS selectors to target child elements within a select option

I am looking to apply a CSS selector only on select option child values. I have assigned an id to the selector and now I want to apply different CSS styles to each child (child 1, child 2, etc). <select name="options[81]" id="select_81" class="required ...

htmlcss

The $mdSticky feature in AngularJS Material seems to be malfunctioning

It's been a challenge for me to get the md-toolbar to stay in the top position. I decided to create a custom directive using the $mdSticky service in AngularJS. var app=angular.module('app',['ngMaterial']); app.controller(&apos ...

javascriptcssangularjsangular-materialsticky

Styling child elements in Angular using css from its parent element

I have a question: Regarding the structure below <component-parent> <first-child> <second-child> <third-child></third-child> </second-child> </first-child> </component-parent> Now I want t ...

cssangular

Issues arise when trying to integrate Bootstrap modal with bootcards

I am currently implementing a modal with bootstrap: <div class="modal" id="contact-update-view"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-head ...

htmlcsstwitter-bootstrapmodal-dialogz-index

Tips for emphasizing the current element without disrupting existing styles

Is there a way to highlight an element with a border without causing it to shift? The script seems a bit glitchy when detecting mouse leaving the area. I'm unable to override parent element properties like border or outline. I also can't use pse ...

javascripthtmlcss

Footer displaying page numbering

I recently installed dompdf 0.83 and have been able to generate documents successfully. However, I am struggling to create a footer that displays the page number out of the total number of pages. Both css and script methods have not been effective for me s ...

cssdompdf

Add JavaScript and CSS files from the node_modules folder to enhance a static HTML webpage

Currently, my development server is set up using node's live-server. However, for production, I plan to use a LAMP server. Within my node_modules directory, I have the normalize.css file. In my index.html, I currently link to it like this: <link ...

cssnode.jsnpm

Various image dimensions cause divs to shift unevenly

Here is the current setup: <div class="row"> <div class="col-md-4 content-column"> <img class="btn-center btn-desktop" src="images/buttons/btn-desktop.svg" alt="desktop button"> <h2 class="btn-deskt ...

htmlcss

Is it possible to create HTML tables without including paragraphs within the cells using docutils rst2html?

If my input rst file looks like this: +--------------------------------+ | Table H1 | +-------------+------------------+ | Table H2a | Table H2b | +=============+==================+ | a1 | b1 | +------ ...

pythonhtmlcssrestructuredtext

Within a container, there are two divs separated by a white bar

Hello everyone, I am in need of creating a unique slideshow for my website and I want to start by splitting a div into two sections using a slightly skewed diagonal line that is either semi-transparent black or solid white. I have searched extensively onli ...

htmlcss

Tips for implementing code to function across several images in HTML and CSS

Hey there, I'm currently working on a website project for my friend and I sometimes refer to www.w3schools.com for help with coding. I'm having trouble implementing a gallery feature where users can click on images to view them fullscreen. I foun ...

javascripthtmlcss

Seamlessly transition between various states within a React component for a fluid user experience

I'm currently working on a simple component structured like this: var component = React.createClass({ render: function(){ if (this.props.isCollapsed){ return this.renderCollapsed(); } return this.renderActive() }, ren ...

javascriptcssreactjscss-transitions