Have header menu drop below logo at 1024 resolution

BB Theme
1

Hello,
My header menu is wrapping at 1024 (screenshot here - https://www.dropbox.com/s/1z7iu4jcbuzdi8u/Screenshot%202015-07-30%2009.45.54.png?dl=0).

I’d rather not reduce the font size or padding between menu items.

Is there any way to have it kick into responsive mode at 1024 like it does around 800?
Like this…https://www.dropbox.com/s/8dfifv8xplrf6op/Screenshot%202015-07-30%2009.47.30.png?dl=0

Thanks!
Craig

2

Hey Craig,

Thanks for getting in touch! Sorry but there’s really no easy way to achieve that. You’ll have to override a lot of styling via custom CSS. I’m thinking you don’t want to adjust the font size and padding because it affects the desktop view as well(> 1024px). I would suggest adjusting it only when the screen size is within 992px to 1024px. 992px below is when the header changes layout. You can wrap your CSS with media query like this.

@media (min-width: 992px) and (max-width: 1024px) {
  /*CSS HERE*/
}

If you could share the URL of the site maybe I can give you a more accurate one. :slight_smile:

Ben

3

Hi Ben,
It’s accessible to the public yet, but I think I’ll just target that media query you posted.

Thank you!

4

Hey Craig,

No worries! Let us know if you need anything further! :slight_smile:

Ben

5

Hey Ben,
Quick followup…

I’m using a child theme and dropped this into style.css…

@media only screen and (min-width: 992px) and (max-width: 1024px) {
.fl-page-nav .navbar-nav, .fl-page-nav .navbar-nav a {font-size: 14px !important;}
}

I flushed the server cache - but it wasn’t taking effect.

I dropped the same code into the customizer (css code area) and it worked fine.

I’ve got a few lines of CSS in CSS Hero, but I haven’t put anything into the child theme style.css – could something be overriding it?

We’re fine for now, but maybe when the site goes live I’ll shoot you a link.

Thanks again,
Craig

6

That’s weird. It might just be that it got overridden. Definitely let us know when the site is live so we can check. :slight_smile:

Ben