we_universal

Frequently Asked Questions

Adjust the header button hide threshold for small screens

The we_universal style features seveveral function buttons above and below the header image. The size of the buttons is primarily determined by the length of the text labels, which vary according to the language used. It is also possible to add or remove buttons.

On small screens, such as phones, it is possible that under some conditions, the buttons will overflow the space available, which becomes ugly. We_universal previously switched off the buttons and enabled a drop-down menu for all devices with a display less than 700 pixels wide. More recent versions of we_universal have (by default) reduced the screen width threshold for hiding the buttons, but it is not possible to have a universally correct setting.

The button hide thrshold can be adjusted in the file theme/custom.css:
/*
* Button hide threshold
* The max-width here adjusts the screen widths for which the header buttons are replaced by a dropdown menu
* set this value higher if the screen buttons start to wrap, or the text becomes ugly in your language.
* The valid range of this value is 319px to 699px.
* a value of 319px works for me, but if you have added buttons, or a language with long button labels, a higher
* value ma be better.
*/
@media only screen and (max-width: 549px) {
.inventea-menu li > a {
display: none;
}

.inventea-mobile-dropdown-menu {
display: block;
}
.inventea-dashboard img {
padding-top: 4%;
padding-bottom: 4%;
}
}
The highlighted number can be adjusted between 319px and 699px. I recommend choosing a number at the lower end of the range. It is useful to be aware of the pixel widths commonly provided by mobile devices when choosing a number