Support Forum

Hi,

I’ve checked your site and it seems you have made some changes that override the theme’s default styling and it’s affecting the menu.

There is a file responsible for phones and tablets. You can find it in the theme’s folder > framework > css > responsive.css

Cheers!
Chris

I had problems with the main menu as the far right sub-menu disapeared to some extent in 19 inch ultra wide screens (1440 Max resolution screens) or less (17 inch screens = 1024 Max resolution). Therefore I added a new definition in the responsive.css file for such screens, which I am happy to share.

/* —————————————————– */
/* 19″ wide or lower Screens */
/* —————————————————– */
/* Width of 1024px to Max Width of 1560*/
/* —————————————————– */

/* Note: Design for a width of 1024px to a max width of 1560*/

@media only screen and (min-width: 1024px) and (max-width: 1560px) {
.container {
width: 1024px;
}
.container .column, .container .columns {
margin-left: 10px;
margin-right: 10px;
}
.column.alpha, .columns.alpha {
margin-left: 0;
margin-right: 10px;
}
.column.omega, .columns.omega {
margin-right: 0;
margin-left: 10px;
}
.alpha.omega {
margin-left: 0;
margin-right: 0;
}
.container .one.column, .container .one.columns {
width: 28px;
}
.container .two.columns {
width: 76px;
}
.container .three.columns {
width: 124px;
}
.container .four.columns {
width: 172px;
}
.container .five.columns {
width: 220px;
}
.container .six.columns {
width: 268px;
}
.container .seven.columns {
width: 316px;
}
.container .eight.columns {
width: 364px;
}
.container .nine.columns {
width: 412px;
}
.container .ten.columns {
width: 460px;
}
.container .eleven.columns {
width: 508px;
}
.container .twelve.columns {
width: 556px;
}
.container .thirteen.columns {
width: 604px;
}
.container .fourteen.columns {
width: 652px;
}
.container .fifteen.columns {
width: 700px;
}
.container .sixteen.columns {
width: 748px;
}
.container .one-third.column {
width: 236px;
}
.container .two-thirds.column {
width: 492px;
}
/* Offsets */
.container .offset-by-one {
padding-left: 48px;
}
.container .offset-by-two {
padding-left: 96px;
}
.container .offset-by-three {
padding-left: 144px;
}
.container .offset-by-four {
padding-left: 192px;
}
.container .offset-by-five {
padding-left: 240px;
}
.container .offset-by-six {
padding-left: 288px;
}
.container .offset-by-seven {
padding-left: 336px;
}
.container .offset-by-eight {
padding-left: 384px;
}
.container .offset-by-nine {
padding-left: 432px;
}
.container .offset-by-ten {
padding-left: 480px;
}
.container .offset-by-eleven {
padding-left: 528px;
}
.container .offset-by-twelve {
padding-left: 576px;
}
.container .offset-by-thirteen {
padding-left: 624px;
}
.container .offset-by-fourteen {
padding-left: 672px;
}
.container .offset-by-fifteen {
padding-left: 720px;
}
#wrapper {
width: auto;
}
.recent-blog-content {
width: 294px;
}
.recent-blog-content img {
width: 274px;
}
.featured-work .four figure, .featured-work .four img {
width: 172px;
height: 130px;
}
.featured-work .eight figure, .featured-work .eight img {
width: 364px;
height: 200px;
}
.featured-work .one-third figure, .featured-work .one-third img {
width: 236px;
height: 130px;
}
.sf-menu li {
margin: 0 5px;
}
.header-tagline h3 {
font-size: 15px;
}
.header-tagline {
width: 353px;
}
#featuredslider {
width: 1024px;
}
#featuredslider .captions, #featuredslider p {
width: 1118px;
}
.recent-blog-content {
width: 115px;
}
.footer-left-column, .footer-middle-column {
margin-right: 20px;
padding-right: 20px;
}
.footer-left-column, .footer-middle-column, .footer-right-column {
width: 195px;
}
.footer-middle {
width: 968px !important;
padding-left: 20px;
padding-right: 20px;
}
.twitter-container {
width: 700px;
}
.twitter-feed {
padding-left: 53px;
}
.tweet {
width: 645px;
}
.newsletter {
display: none;
}
.entry-content, .entry-thumb, .entry-gallery, .entry-thumb img {
width: 478px;
}
.entry-meta {
width: 466px;
}
.entry-thumb, .entry-gallery, .entry-thumb img {
height: auto;
}
}