Change the height of the nav, only in desktop

By desktop I'm guessing you only want the changes on computer screen as opposed to hand-held?  Read up here on media queries    https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

You can start by trying something like the following which won't apply to screens smaller than 768px.
@media screen and (min-width: 768px) {
   .navscreenonly {
      height: 5em;
      font-size: xx-large;
   }
}



OM Gang

Thanks, I'll look at that. I couldn't find any good info by looking on google.

OK, I added this to my custom css:
@media screen and (min-width: 768px) {
   .header nav {
      height: 40px;
      font-size: 12px;
   }
}

But I see no changes on the site. I'm on a Dell Inspiron N7010, so I have a very big screen, I should see it. What am I doing wrong?

In my example I was specifying a class named 'navscreenonly'
To apply without using a class remove the class specifier in your CSS.
OM Gang

@media screen and (min-width: 768px) {
    header nav {
       height: 40px;
       font-size: 12px;
    }
 }

But I do want to use a class. I only want this to apply to the header nav class.

Thanks- I'm sorry it took so long to get back to this. I will work on it now.

ok, it is functioning now, I apologize for my dumbness with the class, I know better than that, but sometimes I have a mind-freeze. :)

http://dev2.magickitchen.com/index.html  two things with this: 1. It breaks the page, now the main section is below the right navigation.  2. I can't quite figure out where the white box is in the code, I'll keep looking for that.

Thanks!

ok, I figured out part two, it's just #1 I need help with. Thanks again.

Actually, fixing that fixed the other problem, too. Thanks again!

Thanks for your patience!

Sorry I did not respond but I was out yesterday.  Glad you got it all sorted.
OM Gang