Menu icon Foundation
Adjusting TopBar Nav Breakpoint and not the rest

I want TopBar go to mobile version sooner, at 48 or 49em, but want everything else to continue to break at 40.063em. I do not currently use SASS (haven't turned that corner), so I need some direction on what to change in the CSS. I tried to find just the places that control TopBar, but it didn't seem to work properly.

You can see in image below, the Nav is bumping "Register Here" behind the slider. At this point (around 764px), I want the nav to either scale down on one line or to go to the mobile, but I want the things underneath it to stay in 3 columns until we get all the way to small.

http://www.pcgnashville.com

Let me know if you have some advice.

Screen shot 2014 03 18 at 6.03.08 pm

topbarnavNav Breakpoint

I want TopBar go to mobile version sooner, at 48 or 49em, but want everything else to continue to break at 40.063em. I do not currently use SASS (haven't turned that corner), so I need some direction on what to change in the CSS. I tried to find just the places that control TopBar, but it didn't seem to work properly.

You can see in image below, the Nav is bumping "Register Here" behind the slider. At this point (around 764px), I want the nav to either scale down on one line or to go to the mobile, but I want the things underneath it to stay in 3 columns until we get all the way to small.

http://www.pcgnashville.com

Let me know if you have some advice.

Screen shot 2014 03 18 at 6.03.08 pm

Jay Thatcher gave the most helpful answer for this post
Jay Thatcher about 5 years ago

@Charlie I actually had to go find it again on another project. With latest Foundation 5 download. It's on line 1229 & 1529. Or search for these areas:

meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:48em)/";
width: 58.75em; }

.js-generated {
display: block; }

@media only screen and (min-width: 48em) {
.top-bar {
background: #333333;
overflow: visible; }

(I changed these to 48em above)

Michael Degli-Angeli over 5 years ago

Search for "topbar" in the app.css. I'm using the sass version but if I search my app.css it seems to be at line 7091.

Jay Thatcher over 5 years ago

Thanks Michael. I'm using the foundation.css, and topbar & top-bar is a large chunk of code. We've made several adjustments already to skin it. I'm just not sure which levers to pull for it to toggle top bar to mobile sooner without changing the medium breakpoint for everything else. — foundation.css only goes up to about 5,060 lines in the code. Thank you though.

Jay Thatcher over 5 years ago

I figured out the 2 places to adjust it in the CSS. Thanks.

Charlie Chauvin over 5 years ago

@Jay Thatcher, can you tell me the 2 places you adjusted it?

A friend suggest I go back re-download the foundation code after I manually change the Top Bar Break on the custom build page. This didn't change anything. I've also tried other things but it still breaks around 640 no matter what I have tried.

I am on the CSS version. I've seen the other posts on this issue but the code doesn't match up so other fixes don't seem so straight forward.

Jay Thatcher about 5 years ago

@Charlie I actually had to go find it again on another project. With latest Foundation 5 download. It's on line 1229 & 1529. Or search for these areas:

meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:48em)/";
width: 58.75em; }

.js-generated {
display: block; }

@media only screen and (min-width: 48em) {
.top-bar {
background: #333333;
overflow: visible; }

(I changed these to 48em above)