Link to home
Get AccessLog in
Avatar of orlakelly
orlakelly

asked on

Creating a responsive navigation menu

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
Avatar of Md Shah
Md Shah
Flag of India image

Link to home
membership
This content is only available to members.
To access this content, you must be a member of Experts Exchange.
Get Access
Avatar of orlakelly
orlakelly

ASKER

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

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

thanks
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 :)
Avatar of Scott Fell
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