We help IT Professionals succeed at work.

Creating a responsive navigation menu

541 Views
Last Modified: 2014-05-10
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%;
      
}       
}
Comment
Watch Question

Top Expert 2014
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Cheers really appreciate it :) I have done that much recoding I'm losing track of what's what on it !!

Author

Commented:
Hi

I got it working by using one of the links you sent on

thanks
Top Expert 2014

Commented:
Thats Great News...

Regret I was busy with other things so haven' got time to look after your sent code.

Anyways, Thanks for your rating..

Good Luck for your further development :)
Scott FellDeveloper
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
Before you get too far, I would look at  using a responsive framework like http://getbootstrap.com/ or http://foundation.zurb.com/.  There are starter templates http://getbootstrap.com/examples/starter-template/ and specific instructions for the navbar http://getbootstrap.com/components/#navbar

There is some learning curve in using either of these, but in the end it is much faster to use a proven framework especially when going from  project to project.

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Open in new window

Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.