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

The edges of the cube are not joined together

Looking for a 3D transform cube that can freely flip left and right, with the button fitting into it perfectly. I've found the CSS code to achieve this, but when I set the width of the ".cube" below 200px, the borders of the cube don't connect. I ...

htmlcss

Create a dynamic HTML page using JavaScript

When I click on the following links: How can I create a new page using JavaScript? Create and dynamically append elements I'm looking to dynamically add HTML elements with JavaScript within a div, but I don't want my code to become overly comp ...

javascripthtmlcss

The Vue 3 page does not allow scrolling unless the page is refreshed

I am encountering an issue with my vue3 web app. Whenever I attempt to navigate to a page using <router-link to ="/Dashboard"/> Here is the code for Dashboard.vue: <template> <div class="enquiry"> <div class= ...

cssvue.jsvuejs3bootstrap-vuevue-composition-api

Stretching Images on Circular Images - Utilizing Bootstrap and SCSS styling

Can anyone assist me with this problem? I am currently utilizing bootstrap cards to create a section on my website. However, I am encountering an issue with the circular images of the cards. I want to prevent my images from getting stretched when placed i ...

csssassresponsive-designbootstrap-4responsive-images

How to create a full-page background image using Bootstrap?

Take a look at this example: In the provided example, there is a background landing page that expands to fit the width of the viewport, remains responsive, and does not take up the full width of the page. How can you utilize bootstrap to manually code an ...

htmlcsstwitter-bootstrap-3

Splitting a list of accordions into two columns with CSS and React - a step-by-step guide!

I am looking for a way to showcase a list of Accordions in a two-column layout. Each Accordion consists of both a Summary and Details section, with the Details being visible only when the Summary is clicked. Unfortunately, I won't delve into the imple ...

htmlcssreactjscss-grid

Maintaining Order with SCSS and Compass - Is it Possible?

Does compiled SCSS using Compass preserve the order of declarations? Can Compass guarantee the order of properties (assuming it's the way Compass operates that determines this)? This is mainly important when there are multiple definitions with the s ...

csssasscompass

Issue with CKEditor within a ColorBox dialog box

Could someone please assist me? I am facing an issue with my HTML page where I have incorporated a ColorBox modal popup. Inside the ColorBox popup, there is a CKEditor. The problem is as described below: In Internet Explorer, the CKEditor functions proper ...

htmlcssckeditorcolorbox

Struggling with implementing a materialize modal?

I am encountering a problem with Materialize. This time, I am trying to create a modal div, but it doesn't seem to be working. The button is created, but when I click on it, nothing happens. I have made sure to link all the necessary Materialize files ...

javascriptcssmaterialize

Fade out at varying speeds

As I delve into CSS3 animations, I have been experimenting with some example code. Here is the link to the code: http://jsfiddle.net/chricholson/z7Bg6/67/ I am curious about how to adjust the duration of animations when un-hovering. Currently, it seems th ...

htmlcss

I am looking to create a split div with a diagonal line running through

Is there a way I can create this Mockup using html5 and css3, but also add diagonal lines to divide the div? Any suggestions on how to achieve this? ...

htmlcss

How can the front design of Material-UI's Card header be customized?

Currently, I am facing an issue with the Material-UI card header as the background color is affecting the readability of the default font. My aim is to use the typography prop h4 for the header, but I am struggling to achieve this. https://i.stack.imgur.c ...

javascripthtmlcssreactjsmaterial-ui

A method to ensure that inline <div> elements occupy the entire available width

The typical solution for this issue is using float, however, it does not work in my situation. I attempted to utilize flexbox and overflow:hidden for the parent element, but unfortunately, it did not resolve the issue. Currently, I am dealing with three i ...

htmlcss

Embedding an iframe with vertical scrolling enabled

Could you explain why I am unable to scroll the full width of the website? Here is a link: http://codepen.io/anon/pen/EKPaao?editors=1100. Also, what do you think about using this solution for adjusting iframes on different screen sizes? My iframe seems to ...

htmlcssiframe

Utilizing React and Material-UI to Enhance Badge Functionality

I am exploring ways to display a badge icon when a component has attached notes. I have experimented with three different methods and interestingly, the results are consistent across all of them. Which approach do you think is the most efficient for achiev ...

javascripthtmlcssreactjsmaterial-ui

Expanding Div Heights that Adjust to the Browser's Width

Looking to set up a responsive height for a div, almost there but facing some distortion when resizing the browser. Here is the fiddle file for reference: https://jsfiddle.net/td5n8ky9/10/ The issue lies in the bottom 2 divs - aiming for a grey bar the wi ...

htmlcssresponsive-design

Choosing pseudo-elements with CSS styling rules

I have been utilizing the Brave browser to block online ads. However, certain websites have found a way to insert ads into their HTML on the server-side, bypassing my ad-blocking efforts in Brave. Currently, Brave only offers the ability to block elements ...

csscss-selectorspseudo-elementadblock

use css to align multiple div elements

I am struggling to line up more than five div tags on the same line. Here is my CSS: <style> #yes { float: left; width: 18%; margin:1px; } </style> Example of HTML code: echo '<div id="yes">'.'<b>'.'Job T ...

htmlcss

Avoid showing an image when it is outside the div container

Within a single div, I have an assortment of images that are dynamically repositioned using JQuery. $("#"+carElem).css({"left": pos.left+50 +"px"}); I am currently utilizing absolute positioning (although relative positioning yields the same outcome). Is ...

javascriptjquerycss

Combining a Hyperlink with a Table Target

I'm currently trying to find a way to target both a table cell (TR > TD) and a hyperlink within the same row. Here's an example of the HTML: <div class="CourseLayout"> <table width="100%" border="0" cellpadding="0" cellspacing="0"&g ...

htmlcss