Skip navigation
Currently Being Moderated

Responsive nav bar

Jun 21, 2013 3:52 AM

Im trying to make my website device friendly and am in the process of changing my spry menu bar to a responsive nav bar from www.responsive-nav.com. I've replaced the old menu bar with the new one but am having a few problems altering the design of the bar. What i'd like is for the menu to run horizontally along the top, currently they are listed vertically. What do i need to do to change that? Also i dont seem to be able to change the colour of the text?

 

Thank you in advance for any help.

 

www.milesmemorials.com/index3.html

 

CSS for menu bar -

 

#nav ul {

          background-image: url(Images/buttonbanner.jpg);

          background-repeat:no-repeat;

          margin-left:auto;

          margin-right:auto;

          margin-top:0;

  padding: 0;

  width: 100%;

  display: block;

  list-style: none;

  font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;

  font-size:16px; color:#FFF;

}

 

 

#nav li {

  width: 100%;

  display: block;

}

 

 

.js #nav {

  clip: rect(0 0 0 0);

  max-height: 0;

  position: absolute;

  display: block;

  overflow: hidden;

  zoom: 1;

}

 

 

#nav.opened {

  max-height: 9999px;

}

 

 

@media screen and (min-width: 40em) {

  .js #nav {

    position: relative;

  }

  .js #nav.closed {

    max-height: none;

  }

  #nav-toggle {

    display: none;

  }

}

 
Replies
  • Currently Being Moderated
    Jun 21, 2013 4:19 AM   in reply to Ness_quick

    Use the CSS below for the navigation. Scroll down to <!-- CSS STARTS HERE --> I've put a color bg behind the menu for now on the #nav <div> - background-color:#C93; - you can remove that as the background image should show.

     

    You then use media queries to alter the appearance of the navigation for mobile devices. You'll see a couple in the css below (scroll right down) What you need to change goes in the media query. So for instance if you want to change the bg image for a smart phone  you just append it to #nav like below:

     

    @media screen and (max-width:480px)

    {

     

    #nav {

    background-image: url(Images/smartPhoneImage.jpg);

    }

     

    }

     

     

    <!-- CSS STARTS HERE -->

     

    <style type="text/css">

    #content {

    max-width: 1000px;

    margin: 0 auto;

    }

    #nav {

    overflow: hidden;

    background-color:#C93;

    background-image: url(Images/buttonbanner.jpg);

    background-repeat:no-repeat;

    }

     

    #nav ul {

        margin: 0;

        padding: 0;

    }

    #nav li {

    margin: 0;

    padding: 0;

    float: left;

    list-style: none;

    width: 20%;

    }

    #nav li a {

    font-size: 16px;

    display: block;

    font-weight: bold;

    color: #fff;

    text-align: center;

    text-decoration: none;

    padding: 5px 5px;

    }

     

    @media screen and (max-width:680px)

    {

    #content {

    max-width: 90%;

    min-width: 300px;

    margin: 0 auto;

    }

     

    #nav li {

        float: none;

    width: 100%;

     

     

    }

    #nav li a {

    border-bottom: 1px solid #fff;

    }

     

    }

     

    @media screen and (max-width:480px)

    {

    #nav ul {

    margin: 0;

    padding: 0;

    }   

    #nav li {

    float: none;

    width: 100%;

     

     

    }

    #nav li a {

    border-bottom: 1px solid #fff;

    }

    }

     

    </style>

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 21, 2013 5:26 AM   in reply to Ness_quick

    Ness_quick wrote:

     

    And also when the page is opened in normal size (desktop) the bar does stretch out right the way across the top, is it possible to make it go the full width?

     

    You don't need the js file now do you?

     

    <script src="responsive-nav.js"></script>

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 21, 2013 5:36 AM   in reply to osgood_

    The background would be better served on the <li> tag:

     

    #nav li {

    margin: 0;

    padding: 0;

    float: left;

    list-style: none;

    width: 20%;

    background-image: url(http://www.milesmemorials.com/Images/buttonbanner.jpg);

    background-repeat:no-repeat;

    }

     

    and remove from:

     

    #nav {

    overflow: hidden;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 21, 2013 5:57 AM   in reply to Ness_quick
     
    |
    Mark as:
  • Currently Being Moderated
    Jun 21, 2013 6:33 AM   in reply to Ness_quick

    You just need the 2 scripts:

     

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

    <script src="http://malsup.github.io/jquery.cycle2.js"></script>

     

    The only css you need is the below:

     

    <style type="text/css">

    /* set border-box so that percents can be used for width, padding, etc (personal preference) */

    .cycle-slideshow, .cycle-slideshow * {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

    .cycle-slideshow {

    width: 100%;

    min-width: 200px;

    max-width: 1000px;

    margin: 10px auto;

    }

    .cycle-slideshow img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    display: block;

    }

     

    @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

    .cycle-slideshow { width: 200px;}

    }

    </style>

     

     

    Then obviously swap the default images for your own images:

     

     

    <div class="cycle-slideshow">

    <img src="http://jquery.malsup.com/cycle2/images/p1.jpg">

    <img src="http://jquery.malsup.com/cycle2/images/p2.jpg">

    <img src="http://jquery.malsup.com/cycle2/images/p3.jpg">

    <img src="http://jquery.malsup.com/cycle2/images/p4.jpg">

    </div>

    </div> <!-- #main -->

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points