I’ve already attempted to get this sorted (thanks @ralphm and @cpradio for your help to date) but I’m still stuck.
I have a Discourse instance with custom header links. It works great on some devices but it’s broken for many mobiles.
This is what it looks like on an iPhone6+ (which is how it should look on all devices)
But this is what it looks like on an iPhone6 (and apparently a Nexus5 so likely other devices as well). The bar is covering some of the header items and I don’t actually know where that HOME link is coming from – I thought I’d removed it from everywhere!
Here is my CSS:
// header links
.mobile-view .hidden-for-mobile {
display: none;
}
.add-header-links {
margin-left: 0 !important;
}
@media screen and (max-width: 940px) {
.nav-link-container {
display: none;
}
}
@media screen and (max-width: 830px) {
.nav-link-container {
display: none;
}
}
@media screen and (max-width: 743px) {
.nav-link-container {
display: none;
}
}
@media screen and (max-width: 667px) {
.nav-link-container {
display: none;
}
}
@media screen and (max-width: 650px) {
.nav-link-container {
display: none;
}
}
@media screen and (max-width: 525px) {
.nav-link-container {
display: none;
}
}
.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;
}
}
}
And from the </head>
<style>
/* These are here so that they display in the admin screens also */
.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;
}
}
}
.d-header .icons .icon {
float: right;
color: #EC7825;
}
.add-header-links {
float: left;
padding-left: 0;
}
</style>
<script type="text/discourse-plugin" version="0.2">
api.decorateWidget('home-logo:after', helper => {
const showExtraInfo = helper.attrs.minimized;
if(!showExtraInfo) {
return helper.h('ul.nav-link-container', [
helper.h('li.hidden-for-mobile', [
helper.h('a.nav-link', {
href:'https://www.feverbee.com/resources',
text:'RESOURCES',
target:'_blank'
})
]),
helper.h('li.hidden-for-mobile', [
helper.h('a.nav-link', {
href:'https://experts.feverbee.com/',
text:'DISCUSSIONS',
target:'_self'
})
]),
helper.h('li.hidden-for-mobile', [
helper.h('a.nav-link', {
href:'http://newyork.feverbee.com/',
text:'EVENTS',
target:'_blank'
})
]),
helper.h('li.hidden-for-mobile', [
helper.h('a.nav-link', {
href:'http://ondemand.feverbee.com/',
text:'TRAINING',
target:'_blank'
})
]),
helper.h('li.hidden-for-mobile', [
helper.h('a.nav-link', {
href:'http://www.feverbee.com/consultancy',
text:'CONSULTANCY',
target:'_blank'
})
]),
helper.h('li.hidden-for-mobile', [
helper.h('a.nav-link', {
href:'http://www.feverbee.com/about-us',
text:'ABOUT',
target:'_blank'
})
]),
helper.h('li', [
helper.h('a.nav-link', {
href:'http://www.feverbee.com',
text:'HOME',
target:'_self'
})
])
]);
}
});
</script>
Where things are getting complicated is that responsive emulators aren’t rendering the mobile version of the CSS, which is:
@import "theme_variables";
.d-header .icons .icon {
color: $header_primary;
}
// header links
.mobile-view .hidden-for-mobile {
display: none;
}
.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;
}
Can anyone see where I’m going wrong?