1. rogimon
  2. Commercial Templates
  3. Saturday, 01 October 2016
  4.  Subscribe via email
Hello,

I have created a new header module according to the instructions given here https://www.joomla51.com/tutorials/item/creating-a-new-module-position-in-the-header-area-of-your-template

However, after centering it for desktop view, the new module covers the logo in mobile view.

My thoughts were to hide it on mobile devices but hidden-phone doesn't work for this module or the other header modules for that matter. (It works for the side col modules). I wanted to hide the newmodule on phones, duplicate it in the header-2 position and hide the duplicate on desktop. But hidden-desktop doesn't work either.

My ultimate aim is to have the newmodule line up beneath the logo on mobile view.

How can I accomplish this? View website here

Thanks
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

To hide this module on smaller screen devices try adding the following to the Custom CSS field of your templates parameters....


@media only screen and (max-width: 767px) {
#newmodule {display: none;}
}


You can then have a second instance of your module in an alternative module position set to only display on mobile devices.

CiarĂ¡n
  1. more than a month ago
  2. Commercial Templates
  3. # 1
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.