1. gevans
  2. Commercial Templates
  3. Thursday, 12 December 2013
  4.  Subscribe via email
Is it possible to change the height of the menu bar so that on smaller screens menu items will roll round onto a second line.
At the moment (see attachment) on smaller screens the FAQs and Logout Here items go onto a second line and are hidden behind the Colne Engaine words.
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Would you have a URL to an example of your menu?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

It is possible however it would look rather unsightly more the majority of visitors on your site as there would be a large space under each menu items on the most common screen size.

An alternative option is to have the mobile menu display on all screen sizes that your menu items do not all fit? Would this be suitable?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you for your reply.
I am happy to try the mobile menu display suggestion.
What do I need to do?
I already have Responsive Layout set to Yes.
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
To do so try adding the following to the Custom CSS field of your templates parameters...


@media only screen and (min-width: 960px) and (max-width: 1200px) {
/* Hide default hornav menu */
#hornav{display:none !important;}

/* Show mobile hornav menu */
#container_hornav_mobile{display:inline; z-index: 99; margin-top:13px;}
.js #mobile { display: none; }
#hornav_mobile {margin-top:0px;}
}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks for that. It does the trick; I just need to see how my "end users" feel about it.
One little tweak I would like:
Only the top half of the "Tap Here for Menu" message appears [image attached]; how to enlarge the height?
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
Could you try adding the following to the Custom CSS field of your templates parameters...


.js .selectnav {
height: auto !important;
padding: 5px 10px;
}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 7
  • 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.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok