Menu covers part of page content.

[techgump]

Absent an image loaded near the page head, the menu covers content like the breadcrumbs, top blocks, and/or page content itself, when viewed on smaller screens. For example, a page like: http://www.masterbootstrap.com/documentation When on a Chromebook (1024 x 576), at 90%-150%, variable amounts of content are hidden under the menu when scrolled at top of page. That hidden content is never visible.

UPDATE: I've tested this on other computers, and in other browsers. It happens on all of them. Issue can be experienced by zooming in in any browser on devices where screen resolution large. The padding-top for a middle sized screen is missing in css.

[gsuez]

Hi, I think that you can fix, adding media queries in css file.

[techgump]

Sure. I've already fixed it. Just letting you know for a future update ;)

[gsuez]

ok, I will fix, thank you!

[gagnonjeanfrancois]

Hi,

I was going to report this bug, then I saw the report of @techgump ... So I confirm the issue :)

Thanks @gsuez for your template.

[gsuez]

Hi! next version - very soon - will be fixed. You have a Chromebook too?

[gagnonjeanfrancois]

I use Chrome, Firefox, and Edge and my width is around 1900px. Everithing look fine over when we are over 1200px. If I take http://www.masterbootstrap.com/documentation I get this :

under 480px

under 767px

over767px

under1200px

For my logo : instead of 100% height and 80% width I also set the logo height to 80% otherwise my logo will shrink.

@media (max-width: 480px) { #brand, #brand img { width: 80% !important; height:80% !important; } }

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) { 
}
/* Landscape phones and down */
@media (max-width: 480px) {
    #brand, #brand img {
    width: 80% !important;
    height:80% !important;
}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    section {
    margin-top: auto;
    padding-top: 100px;
}

.navbar-nav > li > a {
    line-height: 30px !important;
    padding-bottom: 5px !important;
    padding-top: 5px !important;
}
}
/* Portrait tablet to landscape and desktop */
@media (max-width: 768px) { 
    section {
    margin-top: auto;
    padding-top: 130px;
    }
}
/* Large desktop */
@media (min-width: 993px) {
    section {
    margin-top: auto;
    padding-top: 160px;
}
}
@media (min-width: 768px) and (max-width: 992px) {
    section {
    margin-top: auto;
    padding-top: 240px;
}
}

My solution will work for our configuration, but if someone is using a larger logo he will get some trouble with the breadcrumbs, because the menu will break the line much quicker...