techgump commented 8 years ago

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 commented 8 years ago

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

techgump commented 8 years ago

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

gsuez commented 8 years ago

ok, I will fix, thank you!

gagnonjeanfrancois commented 8 years ago

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 commented 8 years ago

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

gagnonjeanfrancois commented 8 years ago

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 under480px

under 767px under767px

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...

gsuez / master-bootstrap-3

Menu covers part of page content. #15

brand, #brand img {