使导航菜单响应

Question

When viewing my website from different screen sizes the menu going out of the screen. how to make it responsive? here is the link to the site I have added the html and css for your reference. Thanks.

html

<div class="wrapper">
  <p class="menu">
    <a href="#" class="animBtn themeB hastip" title="<h2>Who We Are</h2>">Who We Are</a>

    <a href="#" class="animBtn themeB hastip" title="<h2>What We Do</h2>"Loree Do</a>

    <a href="/forum" class="animBtn themeB hastip" title="<h2>Step Into Our Community</h2>">Forum</a>

    <a href="#" class="animBtn themeB">Contact US</a>
  </p>
</div>

css

.menu {
  position: absolute;
  top: 50%;
  height: 300px;
  margin-left: 950px;
  margin-top: 10px;
}

a.animBtn:link, a.animBtn:visited {
  position: relative;
  display: block;
  width: 220px;
  margin: 10px auto 0;
  border-radius: 10px;
  font-size: 21px !important;
  padding: 14px 15px;
  border: 2px solid #608B82;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(159,192,181,1);
  text-align: center;
  text-decoration: none;
  text-transform: note;
  overflow: hidden;
  letter-spacing: .08em;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
a.animBtn:link:after, a.animBtn:visited:after {
  content: "";
  position: absolute;
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
  height: 0%;
  left: 50%;
  top: 50%;
  width: 100%;
  z-index: -1;
  -webkit-transition: all .3s ease 0s;
  -moz-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
}
a.animBtn:link:hover, a.animBtn:visited:hover {
  color: rgba(159,192,181,1);
  text-shadow: none;
}
a.animBtn:link:hover:after, a.animBtn:visited:hover:after {
  height: 420%;
}

a.animBtn.themeB:after {
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

Answer 1

There is more than one solution to this problem. In your case you might want to try using CSS3 media rules .

If we look at your CSS for the menu:

.menu {
  position: absolute;
  top: 50%;
  height: 300px;
  margin-left: 950px;
  margin-top: 10px;
}

The margin-left is pushing your menu out of smaller screens. So for smaller screens you want a smaller margin. You can set this by appending the following rule to your CSS code:

@media all and (max-width: 600px) {
    .menu {
        margin-left: 250px;
    }
}

This will override your menu styling if the browser detects a screensize smaller than 600px.

I saw W3schools is also offering some other solutions over here .

Answer 2

Okay. Here we go. The below code is for just for mobile and screen larger than mobile. But for fluid layout which work in every standard device, you may need to apply media screen for all standard devices.

Here is the HTML

<p class="menu">
<a href="#" class="animBtn themeB hastip" title="">Who We Are</a>

<a href="#" class="animBtn themeB hastip" title="">What We Do</a>

<a href="/forum" class="animBtn themeB hastip" title="">Forum</a>

<a href="#" class="animBtn themeB">Contact US</a>
</p>

CSS

@media screen and (max-width:320px){ /*For Mobile*/
.menu {
position: absolute;
top: 50%;
height: 300px;
margin:auto;
margin-top: 10px;
}

@media screen and (min-width:321px){ /* for screen larger than mobile*/
.menu {
 position: absolute;
top: 50%;
height: 300px;
margin-left: 70%;
margin-top: 10px;
}
}

Customize the position for each screen as per your need. Here is the DEMO Do come back if any issue. Hope this help you.