Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Sharina V. Jones
Sharina V. Jones
11,459 Points

Floating Menu weirdness

Hi all,

I'm trying to add toggle functionality to my menu but it's not working in the way I had hoped.

The actual toggle portion works fine, but I would like for the menu to stay the same size. Right now, it collapses down to the size of the smallest text, nav. When I toggle it, it expands but the color of the background stays the same length as the nav text. The text from the other menu items spills over the color.

Additionally, the logo creeps closer to the menu incrementally every time it's toggled. Then once it gets too close, it jumps back over to its original position and the menu goes to the size I want it.

I'm pretty sure this is an issue with my CSS but I have no idea how to fix it.

Please help.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>SpexCleaner | Professional, Affordable, Clean</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <meta name="author" content="Sharina V. Jones">
    <meta name="keywords" content="Sharina V. Jones, portfolio, web developer, Tampa">
  </head>
  <body>
    <div id="wrapper">
      <nav>
        <ul>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle">Nav</a>
            <ul class="dropdown-menu">
              <li><a href="index.html">Home</a></li>
              <li><a href="services.html">Services</a></li>
              <li><a href="contact.html">Appointments</a></li>
            </ul>
          </li>
        </ul>
      </nav>
      <header>
        <img src="img/spex_logo.png" alt="logo for SpexCleaner.com" class="logo">
        <h1 class="logo">Spex Cleaner</h1>
      </header>
      <section class="main">
        <ul class="slider">
          <li><img src="img/spex_cleaner_small.jpg" alt="woman spraying a skink" class="slider"></li>
          <li><img src="img/cleaning_service.jpg" alt="woman posing with sponge and spray bottle" class="slider"></li>
          <li><img src="img/professional_clean_small.jpg" alt="woman with arms crossed holding a cleaning bucket" class="slider"></li>
        </ul>
        <p>Nothing feels quite like clean! We offer reliable, premium cleaning services for just $17 an hour. Whether you need weekly service or a one-time cleaning to get you over a hump, if you’re in Tampa, we’ve got you covered.</p>
      </section>
      <footer>&copy;2015 Sharina V. Jones</footer>
    </div>
  </body>
</html>

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700,600italic|Maven+Pro:400,500);
/*Bones*/
* {
  box-sizing: border-box;
}
#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 2%;
}
body {
  font-size: 1.0em;
  font-family: 'Maven Pro', sans-serif;
}
header {
  height: 100%;
}

h1, h2, h3, button {
  font-family: 'Josefin Sans', sans-serif;
}

h1 {
  font-weight: bold 700;
  text-align: center;
  color: #fff;
}
/*Header*/
header {
  background: #ffec56;
}

img.logo {
  width: 200px;
  height: 200px;
  border: 5px solid white;
  border-radius: 50%;
  margin: 0 auto;
  display: inline-block;
}

/*****************************
Dropdown Menu
*****************************/

nav {
  background: #CC307D;
  display: inline-block;
  padding: 2.5;
  float: left;
}
nav ul li {
  background: #CC307D;  
  display: inline-block;
  padding: 2%;
  width: 100%;
}
nav ul li a, nav li a:visited {
  background: #CC307D;
  display: inline-block;
  width: 100%;  
  padding: 5%; 
  margin: 2.5%;
  text-decoration: none;
  color: #fff;
}

img.logo {
  clear: left;
}
.main {
  clear: both;
}

img.slider {
  max-width: 100%;
  margin-top: 2%;
  display: inline-block;
}

var main = function() {
  /*Font page*/
  /*Menu is hidden by default*/
  $('.dropdown-menu').toggle();
  $('.dropdown-toggle').click(function() {
    $('.dropdown-menu').toggle();
  });
  /*Services Page
  Change the description on the screen when the buttons are clicked
  */
  $('button#kitchen').click(function() {
    $('section.services ul li').remove();
    $('section.services ul').append('<li>Wash all dishes or load them in the dishwasher</li>').append('<li>Sanitize the sink, counter tops, and handles</li>').append('<li>Clean the microwave inside and out</li>').append('<li>Clean the exterior of all appliances</li>');
  });

  $('button#bedroom').click(function() {
    $('section.services ul li').remove();
    $('section.services ul').append('<li>Change bedding if clean bedding is provided</li>').append('<li>Cleaning all mirrors</li>').append('<li>Clean and polish furniture as needed</li>');
  });

   $('button#bathroom').click(function() {
    $('section.services ul li').remove();
    $('section.services ul').append('<li>Clean and disinfect the toilet, tub, shower, and sinks</li>').append('<li>Cleaning all mirrors</li>');
  });

  var $sliderItem = $('ul.slider li img.slider');
  $sliderItem.each(function() {
    $(this).fadeToggle(600);
  });


};

$(document).ready(main);

2 Answers

Jasper van der Stoop
Jasper van der Stoop
2,214 Points
Jasper van der Stoop
Jasper van der Stoop
2,214 Points

You need to remove the padding from:

style.css 
nav ul li {
  background: #CC307D;  
  display: inline-block;
  padding: 2%;
  width: 100%;
}

So:

style.css 
nav ul li {
  background: #CC307D;  
  display: inline-block;
  width: 100%;
}
Sharina V. Jones
Sharina V. Jones
11,459 Points

That didn't solve my issue. That just made everything appear bunched together. The nav element is still not holding its form.

Jasper van der Stoop
Jasper van der Stoop
2,214 Points

Are you sure you edited the right CSS? Removing that line did the trick for me.

Sharina V. Jones
Sharina V. Jones
11,459 Points

When I followed your link the problems I was experiencing were still present. The menu grows and shrinks when clicked which is what I meant when I said it was collapsing. You can also see two the background color applied twice.

Jasper van der Stoop
Jasper van der Stoop
2,214 Points

Which browser are you using? Are you perhaps using IE? The problem is not showing in google Chrome with the removed padding.

Sharina V. Jones
Sharina V. Jones
11,459 Points

I'm using Chrome. And I fixed it. The problem was the menu needed a width to keep from collapsing. Thanks for trying.

Sharina V. Jones
Sharina V. Jones
11,459 Points
Sharina V. Jones
Sharina V. Jones
11,459 Points

I've narrowed the scope a bit. I think part of the problem has to do with the fact that there are two ul elements. The larger element is a smaller container because it only has one element, the nav link.

I've increased the padding in li.dropdown and gave it an definitive width:

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700,600italic|Maven+Pro:400,500);
/*Bones*/
* {
  box-sizing: border-box;
}
#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 2%;
}
body {
  font-size: 1.0em;
  font-family: 'Maven Pro', sans-serif;
}
header {
  height: 100%;
}

h1, h2, h3, button {
  font-family: 'Josefin Sans', sans-serif;
}

h1 {
  font-weight: bold 700;
  text-align: center;
  color: #fff;
}
/*Header*/
header {
  background: #ffec56;
}

img.logo {
  width: 200px;
  height: 200px;
  border: 5px solid white;
  border-radius: 50%;
  margin: 0 auto;
  display: inline-block;
}

/*****************************
Dropdown Menu
*****************************/

nav {
  background: #CC307D;
  width: 100px;
  float: left;
}

li.dropdown {
  padding: 5px;
}
li.dropdown ul.dropdown-menu {
  background: #cc307d;
  display: block;
  padding: 2%;

}

nav ul li a, nav li a:visited {
  background: #CC307D;
  width: 100%;  
  padding: 2% 5%; 
  text-decoration: none;
  color: #fff;
}

img.logo {
  clear: left;
}
.main {
  clear: both;
}

img.slider {
  max-width: 100%;
  margin-top: 2%;
  display: inline-block;
}
Jasper van der Stoop
Jasper van der Stoop
2,214 Points

An UL in another UL is perfectly correct as long as the second UL is wrapped in a LI, which it is. However, you do have some duplicate stuff in your stylesheet. Also, currently it's no problem but it's best if you update; "nav ul li a, nav li a:visited"; to be "nav ul li a, nav ul li a:visited".

Do you have the code uploaded somewhere?