troubleshooting Question

Creating a responsive navigation menu

Avatar of orlakelly
orlakelly asked on
Web Development SoftwareWeb ServicesWeb Applications
5 Comments1 Solution551 ViewsLast Modified:
Hi Folks

I am creating a responsive website and can't seem to get my nav bar responsive, I have tried numberous code to no avail. Help would be much appreciated. Code below

HTML
            <div class="nav">      
                        <ul class="mainNav">                  
                              <li> <a class="active" href="#">Home</a></li>
                              <li><a href="aboutus.html">About Us</a></li>
                              <li><a href="news.html">News</a></li>
                              <li><a href="artshop.html">ArtShop</a></li>
                              <li><a href="artists.html">Artists</a></li>
                              <li><a href="contact.html">Contact Us</a></li>
                        </ul>            
                  </div>
 

CSS
/* This applies to NavBar */
.navBar
{
      background-color: #dd3e3e;
      width: 95%;
      float: left;
      height: 50px;
      margin-right: 20px;
      margin-left: 20px;
      border-radius: 10px;

}
.mainNav ul

{

width:90%;
            
            
}
.mainNav li a

{
      text-decoration: none;
      font-family: garamond;
      font-weight: bold;
      font-size: 1.25em;
      color: #fff;
      float: left;
      width: 16%;
      text-align: center;
      line-height: 50px;
      text-decoration: none;
      
}

.mainNav li a:hover

{
      background-color: white;
      color: #dd3e3e;      
}

media query
/* Smartphones (portrait and landscape) ----------- */
@media handheld only screen
and (max-width:480px) {

.mainNav li a
 {

      width:100%;
      
}       
}
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 5 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros