Lavonen Lavonen - 3 months ago 10
CSS Question

How to menu on one line and always in center?

I have a menu that I want to always be in the top-center of the screen. I want the menu to always look the same and be on one line independent on the screen width (I will make it disappear at a certain width). At the moment the menu becomes a two-line-menu at a certain width for some reason.

How do I remove this two-line-menu problem?

Jsfiddle:
https://jsfiddle.net/b91whh0a/

Resize the screen in the jsfiddle and you will understand what I mean.

HTML:

<ul id="menu">
<li><a href="#" class="menu-items1">OM OSS</a></li>
<li><a href="#" class="menu-items1">TJÄNSTER</a></li>
<li><a href="#" class="menu-items1">KUNDER</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;
}

Answer

I've re-structured your HTML/CSS a bit. Pay close attention to 4 and 5 below but, in summary, I...

  1. Changed the CSS hooks to be mostly classes (less dependency on markup in selectors)
  2. Added an HTML5 tag, <nav>, to the markup for better semantics
  3. Removed the <a> tag for one of the menu items to show why I moved the class to the <li> and moved some of the CSS properties to different rules
  4. Added white-space: nowrap; to keep inline-block elements on one line
  5. Added breakpoint at 480px (via media query) to re-format menu when the screen 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="#">OM OSS</a></li>
    <li class="menu-list-item"><a href="#">TJÄNSTER</a></li>
    <li class="menu-list-item"><a href="#">KUNDER</a></li>
    <li class="menu-list-item">ADDRESS</li>
  </ul>
</nav>

JSFiddle version

Comments