Menu icon Foundation
Top Nav and Row/Column Breakpoints

Need some advice ...

First Foundation site - so be kind!: http://columbiacityjazz.com/

Still tweaking some things ...

1. As you decrease browser width, the top nav on the right drops under the left title. Seems that needs to switch to the mobile nav quicker.

2. On an iPad, in horizontal position, my two columns already stack. There's plenty of room for that to stay two columns, so they don't really need to stack until 768. At 768 on the iPad, there seems no padding around the page either.

I'm not touching the main foundation.css file - I'm using a separate "override.css" called after to make adjustments.

I'm using the CSS only version. I've found a couple of spots to adjust breakpoints per several other forum posts, but most of these post don't reference 5.3.3., so what I'm trying only sorta works. What would be considered "best practice" to adjust this? Is there's a couple of additions I could just make to my override.css file?

top navcolumnbreakpoints

Need some advice ...

First Foundation site - so be kind!: http://columbiacityjazz.com/

Still tweaking some things ...

1. As you decrease browser width, the top nav on the right drops under the left title. Seems that needs to switch to the mobile nav quicker.

2. On an iPad, in horizontal position, my two columns already stack. There's plenty of room for that to stay two columns, so they don't really need to stack until 768. At 768 on the iPad, there seems no padding around the page either.

I'm not touching the main foundation.css file - I'm using a separate "override.css" called after to make adjustments.

I'm using the CSS only version. I've found a couple of spots to adjust breakpoints per several other forum posts, but most of these post don't reference 5.3.3., so what I'm trying only sorta works. What would be considered "best practice" to adjust this? Is there's a couple of additions I could just make to my override.css file?

Asif about 5 years ago

Hi,
Why dont you try taking out the logo/company-title out of the Top-Nav? Sometimes this helps. you could have 3 or 4 columns for the logo/company-title (set the columns as per your width) and then have the top-bar with 9 or 8 columns, that way on smaller screens you would be able to control the display of these sections. The top-bar need not have the logo/company title.

Let me know if this helps

-Asif

Les Mizzell about 5 years ago

I really like the way they have it working on one of the example sites:
http://speakr.com/

Here, the logo is contained in the top-nav, but there's a breakpoint set at just the right spot to pop it up over the nav prevent the wrapping issue I have.

Still working out exactly how they did that ... but it's EXACTLY what I want! Suggestions?

I note the switch to mobile happens at the exact same spot as my site.

Asif about 5 years ago

Les,

you could use the following CSS to set the width of the logo section and the navigation section to 100% for medium screens

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
.title-area, .top-bar-section>ul {

max-width: 100%;
width: 100% !important;
background-color: #333333 !important;
}
}

Here is a codepen. hope this helps

http://codepen.io/asif999/pen/cKqFd

-Asif