Responsive Menu (Slick Nav) Position

[Porter]

I've implemented the Slick Nav menu, as found in this tutorial. I've customized it a bit, and it looks great on mobile. I currently have it displayed on the normal site as well, so I can firebug it and change some css (if anyone knows a mobile tool for android, let me know!).

Anyway, the only issue I'm having at this point, is the position of the menu. I implemented a sticky / fixed header for the site, which requires specific css to offset the the header for the rest of the content. The issue, on mobile, this offset is a different height. The other issue, is the widths of these areas:

.title-area
.site-header . widget-area

On desktop, by default, it's 400 width for the logo, and 800 for the remaining area (widget area), for a total of 1200 width. On mobile, that puts the menu below, rather than side by side. I added some media queries to change the width of those areas depending on the resolution, and it seems to work, but I'm still ironing out the kinks. Another odd thing I've noticed, is that on a Kindle Fire HD, the device has a 1280x800 display, yet when testing my site on the device, I set the two areas (title-area and-widget-area) to 400 and 400, and it broke the layout. It's seems as if Genesis is blowing up the image or something, at a ratio I don't know. I had to use 280 and 120 to get my setup to work on a display that should be 800px wide.

My major question, am I going about solving this issue right? Are media queries for special widths the proper way to go, or is there a better solution? As for the fixed header and the changing height, I assume I just need to find out the height on mobile (how do I do this, screenshot?) and add media queries for the offset when on mobile?

Any information would be greatly appreciated, as I feel I'm doing the right thing, but I'm out of my comfort zone and could use the guidance. Thanks!

anightinburlington.com

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Porter]

Still looking for some insight into this situation.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Tonya]

Hi Porter,

I test my media queries in both Firebug (Firefox) and Nuts and Bolts Media. The latter gives you a quick view into the popular devices.

Yes, you need to use media queries to adjust you content areas within the header. There are multiple paths you can go, but one of the easiest I find is to the following:

.header-image .site-title > a {
background: url(images/logo.png) no-repeat 0 0;
float: left;
min-height: 30px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Notice that I'm setting the logo to fill the parent, which is .site-title. Then you can adjust the width of the .site-title for each of the devices. I typically like to use percentages for my widths, as they are more flexible.

Hope this helps.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Author]

Posts