Media queries for header links


#1

Continuing the discussion from How to add header menu links:

I have recently updated my header links to work for the header now that it has been migrated to Virtual DOM and everything is working ok, unless you’re on an iPhone 6.

My experience with media queries is very limited. Can anyone that knows their way around them give me a clue as to why it’s not working for that specific device?

Here is the relevant code:

.mobile-view .hidden-for-mobile { 
    display: none; 
}
.add-header-links {
    margin-left: 0 !important;
}

@media screen and (max-width: 940px) {
    .nav-link-container li:nth-child(1) {
        display: none;
    }
}
@media screen and (max-width: 830px) {
    .nav-link-container li:nth-child(2) {
        display: none;
    }
}
@media screen and (max-width: 743px) {
    .nav-link-container li:nth-child(3) {
        display: none;
    }
}
@media screen and (max-width: 667px) {
    .nav-link-container li:nth-child(4) {
        display: none;
    }
}
@media screen and (max-width: 650px) {
    .nav-link-container li:nth-child(5) {
        display: none;
    }
}
@media screen and (max-width: 525px) {
    .nav-link-container li:nth-child(6) {
        display: none;
    }
}

This is what it looks like on an iPhone6 at the moment.


(Ralph Mason) #2

What are you hoping to see, compared with what’s there now?


#3

That header bar shouldn’t be covering the content.

This is what it looks like on my iPhone6+


(Ralph Mason) #4

Hm, some invalid CSS code has gotten into the head of your pages (Sass gone wrong?):

.nav-link-container {
    display: inline;
    li { 
        display: inline-block;
        float: right;
        a {
            color: rgb(255, 255, 255);
            text-decoration: none;
            text-align: center;
            font-family: 'Open Sans'; 
            line-height: 48px;
            min-width: 90px;
            font-size: 15px;
            padding: 0 1em;
        }
    }
}

I’m not sure what it’s for, but removing it does fix the overlap issue on iPhone 6.

A more valid version of that CSS code would be something like this:

.nav-link-container {
  display: inline;
}
.nav-link-container  li { 
  display: inline-block;
  float: right;
}
.nav-link-container  a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  text-align: center;
  font-family: 'Open Sans'; 
  line-height: 48px;
  min-width: 90px;
  font-size: 15px;
  padding: 0 1em;
}

I did notice that there are header layout issues on iPad, though. :grimacing:

See the search items top right. These fixed layouts are a bugger to control. :frowning:


(cpradio) #5

For the record, that is due becuase iPad’s request the Desktop View, not the Mobile View. Would likely need an additional media query somewhere to hide some of those links to make it show properly. SP has the same issue :wink:


(Ralph Mason) #6

Hm, it doesn’t have that problem on my iPad.


(cpradio) #7

Maybe they fixed it with the latest upgrade (I’ve been using the Mobile view for a while to avoid the problem). :slight_smile: