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%;
      
}       
}
Web Development SoftwareWeb ServicesWeb Applications

Avatar of undefined
Last Comment
Scott Fell

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Md Shah

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
orlakelly

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

ASKER
Hi

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

thanks
Md Shah

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 :)
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
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