Dev Diary: ITP Day 9

Today I’m going to address the issues that cropped up in the more narrow widths of the desktop browser, specifically, the logo floating to the right and overlapping the navigation.

The solution should be for the navigation to hide and the menu icon to be displayed much like it does on a mobile device. I need to figure out why that is not happening automatically and either make it work or come up with an alternative solution.

758px vs 759px

What a difference one pixel makes. At 759 pixels wide (and above), the layout has the normal single bar style. At 758 pixels and below, the layout shifts to a dual bar layout - header (logo / nav) and search. The problem is when the window gets down below 590 pixels wide, the navigation begins to overlap the logo. Not good.

Do I think that someone will view the site in a 590 pixel window on their desktop? No.

Can I move on knowing that the problem is there? That’s the question. It might be time to break open some of this responsive web design books that I have.

So, instead of moving on, I decided to try and learn why the problem was exhibiting itself. I used the following resources:

An Alternate Solution

Ultimately, I don’t really think I figured out what the root of the problem was but I came up with a solution that I could live with.

Responsive Header GIF

I gave the logo and navigation minimum widths and added a left margin equal to the width of the logo to the navigation div. This eliminated the overlap issue that I was dealing with. I also decreased the size of the fonts and decreased the padding between the navigational links.

283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
.logo {
          min-width: 180px;
}
 
.logo h1 {
          text-align: left;
          padding: 10px;
          font-size: 90%;
}
 
.navigation {
          margin: 0 0 0 170px;
          min-width: 300px;
          font-size: 75%;
 }

I’m sure there was a better solution, like getting the drop-down navigation menu icon to display as I discussed at the opening of this entry. Unfortunately, I was getting bogged down trying to figure that out.

⇠ Next Article Previous Article ⇢

About The Author

G. Brad Hopkins's avatar
  • G. Brad Hopkins
  • About Me: I bought my first computer - an Apple Performa 6320 - when I was in college and have been building websites ever since. These days I spend most of my time writing code and helping to bring interesting projects to life.
  • @gbradhopkins