Andrew Struppa Andrew Struppa - 3 years ago 105
CSS Question

Change navigation from floating right to centered when resized

I've searched and searched and found similar issues, but none of the previous threads could help me solve my problem. On my desktop home page, I have the navigation menu floating to the right. However, when resized or viewing on mobile device, I want the menu items to be centered rather than floating right, as it looks messy. I've tried various suggestions from other posts, but nothing seems to be working and it's driving me nuts. I've tried media queries to change the alignment below a certain size and have been unsuccessful so I must be doing something wrong. Also, it is not as big a priority, but I noticed that the header logo gets ever-so-slightly clipped in the mobile version, so it would be great if anyone could help me with that as well. Thank you in advance for the help!

Please see attached screen shots.
Desktop Version
Mobile Version

Edit: Sorry I forgot to post the code. This is for a college class, so right now CSS and HTML combined into one document, but will later have a separate style sheet. Also, live version can be seen at geocities.ws/dinetown



<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">

<style>

#container {
min-height: 100%;
position: relative;
}

#header {
padding: 1em;
color: white;
background: black;
text-align: left;
}

#content {
padding-bottom: 50px;
}

footer {
height: 50px;
line-height: 50px;
left:0px;
bottom:0px;
position: absolute;
width: 100%;
display: inline-block;
color: white;
background: black:
font-family: Majesti;
background: black;
text-align: center;
vertical-align: center;
}

.header img {
float: left;
background: black;
width:100%;
overflow: hidden;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
background-color: rgb(190, 30, 45);
font-family: Athelas;
}

li {
float: right;
}

li a {
float: right;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: maroon;
}

html,
body {
margin: 0;
padding: 0;
height: 100%;
font-family: Athelas;
color: white;
background: rgb(65, 57, 61);
}

p {
padding-left: 30px;
padding-right: 30px;
padding-top: 15px;
padding-bottom: 15px;
}

</style>

<title>Welcome to Town</title>

</head>


<body style="margin: 0;">
<div id="container">

<div id="header">
<img src="images/logo.svg" width="400px">
</div>

<div id="content">
<ul>
<li><a href="contact.html">CONTACT</a></li>
<li><a href="about.html">ABOUT US</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="social.html">SOCIAL HOUR</a></li>
<li><a href="menu.html">MENU</a></li>
<li><a class="active" href="index.html">HOME</a></li>
</ul>


<section style="margin: 0;">
<img src="images/dining_room.png" width="100%" overflow="hidden">
</section>

<article>
<p align="center">
Our mission is to bring <b><i>quality</i></b>, <b><i>style</i></b> and the wish for
<b><i>good fortune</i></b> to all of our guests. We provide a high-end dining
experience through Chinese cuisine.
</p>
</article>
</div>

<footer>
&copy; 2017 Andrew Struppa
</footer>


</div>
</body>
</html>




Answer Source

Add a min-width media query and put the float:right of the navigation menu in there. If you want the position of the navigation to be centered, give it a set width, display:block and margin:auto; In the min-width media query you can make the width:auto to counteract the set width.

Edit: Now that I see you have updated your post with code, you can remove the float from the li, add display:inline-block and have the media query be on the ul to text-align center and right. Without the float, you'll have to re-order your menu though.

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">

<style>

#container {
 min-height: 100%;
 position: relative;
}

#header {
 padding: 1em;
 color: white;
 background: black; 
 text-align: left;
}

#content {
 padding-bottom: 50px;
}

footer {
 height: 50px;
 line-height: 50px;
 left:0px;
 bottom:0px;
 position: absolute;
 width: 100%;
 display: inline-block;
 color: white;
 background: black:
 font-family: Majesti;
 background: black; 
 text-align: center;
 vertical-align: center;
}

.header img {
  float: left;
  background: black;
  width:100%;
  overflow: hidden;
}

ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 width: 100%;
 background-color: rgb(190, 30, 45);
 font-family: Athelas;
 text-align:center;
}

li {
 display:inline-block;
}

li a {
 float: right;
 display: block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}

li a:hover {
 background-color: maroon;
}

html,
body {
 margin: 0;
 padding: 0;
 height: 100%;
 font-family: Athelas; 
 color: white;
 background: rgb(65, 57, 61);
}

p {
 padding-left: 30px;
 padding-right: 30px;
 padding-top: 15px;
 padding-bottom: 15px;
}
@media screen and (min-width: 768px) {
ul{
text-align:right;
}
</style>

  <title>Welcome to Town</title>

</head>


<body style="margin: 0;">
<div id="container">

 <div id="header">
  <img src="images/logo.svg" width="400px">
 </div>

  <div id="content">
   <ul>
    <li><a href="contact.html">CONTACT</a></li>
    <li><a href="about.html">ABOUT US</a></li>
    <li><a href="gallery.html">GALLERY</a></li>
    <li><a href="social.html">SOCIAL HOUR</a></li>
    <li><a href="menu.html">MENU</a></li>
    <li><a class="active" href="index.html">HOME</a></li>
   </ul>


   <section style="margin: 0;">
    <img src="images/dining_room.png" width="100%" overflow="hidden">
   </section>

   <article>
    <p align="center">
     Our mission is to bring <b><i>quality</i></b>, <b><i>style</i></b> and the wish for 
     <b><i>good fortune</i></b> to all of our guests. We provide a high-end dining 
     experience through Chinese cuisine.
    </p>
   </article>
 </div>

<footer>
&copy; 2017 Andrew Struppa
</footer>


</div>
</body>
</html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download