I'm sure this has been asked but I can't seem to find an example that isn't using SASS. I just have a regular CSS file that I'm working with. I want the burger menu to change to the horizontal menu on the larger size.(@media only screen and (min-width: 64.063em)) I've seen a few posts saying to update the settings.scss file like this(http://foundation.zurb.com/forum/posts/1483-customize-topbar-breakpoint-in-scss) but again I'm not using SASS for this project. I just can't seem to figure out what is triggering the menu to change from mobile to desktop: media queries or javascript.
If you want to use CSS you can override the Foundation CSS in a separate CSS file (ie:styles.css) section that follows the foundation.css
@media only screen and (max-width: 64.063em) {
.top-bar {
overflow: hidden;
height: 2.8125rem;
line-height: 2.8125rem;
position: relative;
background: #333;
margin-bottom: 0;
}
.top-bar-section {
left: 0;
position: relative;
width: auto;
transition: left 300ms ease-out;
}
.top-bar-section ul {
padding: 0;
width: 100%;
height: auto;
display: block;
font-size: 16px;
margin: 0;
}
.top-bar .toggle-topbar.menu-icon {
top: 50%;
margin-top: -16px;
display:block;
}
.top-bar .title-area {
float: none;
}
}