weird position nav bar

Question

Hi guys so a site I've been working on is acting up and has randomly re-positioined itself wierdly on the top bar and I have no idea why. I thought everything was fine before, however recently I saw the site and it just so happened that theres a wierd space at the top of the page between the nav bar and the window url. Can someone inspect it and help me figure out whats causing this and if there would be a quick or easy fix. The site is www.omegadesignla.com and any help would be appreciated, thanks.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Omega Design | LA</title>
    <meta name="description" content="Web development and printing services serving the greater los angeles area">
      <meta name="keywords" content="web development, printing, graphics design, los angeles, santa clarita">
    <link rel="stylesheet" href="stylesheets/app.css" />
    <link rel="stylesheet" href="stylesheets/foundation-icons.css" />
    <link rel="stylesheet" href="css/normalize.css" />
  </head>
  <body>
    <nav class="top-bar" data-topbar>
          <ul class="title-area">
            <li class="name">
              <span><a href="index.html"><img class="logo" src="img/logofinal.png"></a><span>
            </li>
            <li class="toggle-topbar menu-icon">
              <a href="#">Menu</a>
            </li>
          </ul>
          <section class="top-bar-section">
            <ul class="right">
              <li><a href="#about">About us</a></li>
              <li><a href="#" data-reveal-id="myModal">Contact us</a></li>
                <li class="has-dropdown">
                  <a href="#">Services</a>
                  <ul class="dropdown">
                    <li><a href="services.html#printing">Print Media</a></li>
                    <li><a href="services.html">Web Development</a></li>
                   <!--  <li><a href="services.html">Promotional Items</a></li> -->
                    <!-- <li class="active"><a href="#">Active link in dropdown</a></li> -->
                  </ul>
                </li>
            </ul>
          </section>
        </nav>    
  <div class="container">
    <header>

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* line 392, ../bower_components/foundation/scss/foundation/components/_global.scss */
html,
body {
  font-size: 100%;
}

/* line 396, ../bower_components/foundation/scss/foundation/components/_global.scss */
body {
  background: #fff;
  color: #222;
  padding: 0;
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1.5;
  position: relative;
  cursor: auto;
}

/* line 409, ../bower_components/foundation/scss/foundation/components/_global.scss */
a:hover {
  cursor: pointer;
}

/* line 412, ../bower_components/foundation/scss/foundation/components/_global.scss */
img {
  max-width: 100%;
  height: auto;
}

Answer 1 · 2015-02-03T18:15:32Z

February 3, 2015 6:15pm

Could you post your CSS too? The code looks fine and the issue is almost certainly in the CSS. I inspected the element with Firebug through Firefox, and it seems that there is a ::before and ::after pseudoclass that may be causing an issue with the nav bar, or it could be a padding issue. I'd suggest inspecting the page yourself with whatever software you're comfortable with, and focusing on that particular section. Try commenting out some of the pseudoclasses or padding/margin and see what happens. The issue is more than likely with the top-bar-section class so focus on that to start. I can help you more after looking over your CSS.

Welcome to the Treehouse Community

Looking to learn something new?

Ryan Hellerud

Ryan Hellerud

weird position nav bar

1 Answer

Jamie Allison

Jamie Allison

Ryan Hellerud

Ryan Hellerud