CSS / Header Styling

Hello, We are using code below to update css/header for mobile to display an additional icon, next to search-icon:

<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('header-icons:before', helper => {
return helper.h('li', [
    helper.h('a#home-button.icon', {
        href:'https://help.appybuilder.com/',
        title: 'AppyBuilder Help Docs'
        ,target: 'helpDoc'
    }, helper.h('i.fa.fa-question-circle-o.home-button-icon.d-icon')),
  ]);
});
</script>

However, on smaller screen sizes, the icons wrap on 2nd line:
image

Is there any suggestion on how to handle this (e.g. auto-remove the help (?) icon when space is limited OR use smaller fa icon?

To checkout: community.AppyBuilder.com

Thanks

You can either remove the icon, or make the icons smaller — it’s a matter of preference. It’s helpful to ask yourself how important that link might be to a mobile user. If it’s important, you might prefer to keep it.

An easy way would be to make all the icons a little smaller, you’d do it like this:

@media screen and (max-width: 425px) {
  .d-header-icons {
    font-size: 0.9em;
  }
}

You might need to experiment with the value a little bit. 0.9em might work, or you might need to go smaller.

To remove the icon entirely you’d want this:

@media screen and (max-width: 425px) {
  a#home-button.icon {
    display: none;
  }
}
4 Likes

@awesomerobot Thanks for your reply.

Should that code be added in side the script?

You’d want to add it to your theme’s mobile CSS:

Admin > Customize > Themes (select your current theme) > Edit CSS > Mobile > CSS

2 Likes

@awesomerobot You are good :+1: Took the 1st approach for making it smaller
THANKS

1 Like