Menu bar covering parts of the page

[dqscfs]

Hi guys,

I’m working on the template for our product pages. This is what I have now:
http://beta.dqs-cfs.com/portfolio/test-item/

As a rough draft, it looks fine to me in allmost all screen sizes, except when I select 768px-979px. Then all menu items are still being displayed, but no longer fit next to each other, forcing my logo up. The breadcrumb bar is then covered by the navbar.

To make matters worse, I have a second related problem: I have too much empty space between my headline and the breadcrumbs bar. I can reduce that space by setting the top margin for the section to a negative pixel count, but then in the 768px-979px view, the navbar will even cover part of my headline!

I have quite a bit of custom css in there for the portfolio page, which I’m copying here below just in case you need it:

.single-x-portfolio .entry-featured {
display: none;
}
.single-x-portfolio .entry-title {
display: none;
}
.single-x-portfolio .entry-wrap {
padding-top: 0px;
}.x-portfolio .entry-info {
width: 100%;
}

.x-portfolio .entry-extra {
width: 100%;
margin-top: 1px;
}
.single-x-portfolio .x-container.offset {
width: 100%;
max-width: none;
}

.single-x-portfolio .entry-wrap {
padding: 0;
border: none;
box-shadow: none;
}

.single-x-portfolio .entry-wrap .entry-info {
float: none;
width: 100%;
}

.single-x-portfolio .entry-wrap .entry-extra {
float: none;
width: 100%;
padding: 0px 10px;
}

[jade]

Hi there,

Please try this code:

@media (min-width: 980px) and (max-width: 998px) {
    .x-navbar .desktop .x-nav > li > a {
        font-size: 12.5px;
    }
}

Hope this helps.