1. twisterking
  2. Commercial Templates
  3. Wednesday, 06 January 2016
  4.  Subscribe via email
Hi, I'm using the great artisan template on one of my websites. There is however a small issue when viewed on smaller screens. It sometimes happens that the screensize is not small enough so that it switches to mobile, and then parts of the menu disappear. Sometimes they even dissapear behind the lower dark border.

http://www.bvtilburg.nl/2016/probleem.jpg

The scrollbars on the right side of the screen only scroll the article-area, not the menu.

Best solution would be that the whole page scrolls when the menu gets longer, not just the article.
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Would you have a URL to an example of this issue?

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

To allow you side column to scroll with the content try adding the following to the Custom CSS field of your templates parameters...


.sidebar_wrapper {
position: absolute;
}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
That works but now the sidebar always scrolls with the page.

Isn't there a way to make this only happen if the height of the page is less than 800px (for example)? Then 99% of the visitors would get the normal view and the 1% with the smalle monitors get the scrolling version.
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

You could try placing the suggested CSS within a media query. Something like the following (edit to taste)...


@media only screen and (max-height: 800px) {
.sidebar_wrapper {
position: absolute;
}}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
Still not what I'm looking for. The problem is in the subitems from the menu. If you click on a menu-item which has subitems, the subitems from the last menu-item unfold, and on some smaller screens the bottom subitems disappear behind the lower border. This only happens if a menu has a lot of items/subitems.

What I'm looking for is that the sidebar gets larger (higher) with larger menus. Is there a way to set a custom sidebar height?

If have moved one of the menu-items to a higher position in the menu. This solves my problem for now, Thanks Ciarán for your help and your wonderful templates.

Luc
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Luc

Could I ask you to try using the following instead...



@media only screen and (max-height: 800px) {
.sidebar_wrapper {
position: absolute;
height: auto;
}
#socialmedia, #copyright {
position: relative;
}}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 7
Accepted Answer Pending Moderation
0
Votes
Undo
[img size=600]http://www.bvtilburg.nl/2016/probleem2.jpg[/img]

Not wat I was looking for, the problem still exists.

I just want the height of the sidebar to adjust to the number of menu- and submenuitems in the main menu, or have a sidebar with a minimum height. On larger screens the basic height is enough, but when the screen size gets smaller the sidebar gets smaller but the menu stays the same height. And then the bottom (sub)items get outside the wrapper.

I don't think that there's an easy solution for this problem, and as it will only affect a very small number of visitors I will just move the bottom menu-item to a higher position in the main menu.
  1. more than a month ago
  2. Commercial Templates
  3. # 8
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Luc

One possible alternative option would be to simply hide these items if the screen height is to small. To do so you can add the following to the Custom CSS field of your templates parameters...


@media only screen and (max-height: 800px) {
#socialmedia, #copyright {
display: none;
}}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 9
Accepted Answer Pending Moderation
0
Votes
Undo
DID this topic ever get sorted? my issue is the same, In Smaller screens, longer drop menu items go off screen....
http://www.odellfurniture.com/
  1. more than a month ago
  2. Commercial Templates
  3. # 10
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Patrick

Fixed vertical menus will always be limited to the number of menu items which can be added to them. Would you like the mobile menu to be displayed if there is not enough vertical space to accommodate your menu?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 11
Accepted Answer Pending Moderation
0
Votes
Undo
Yes I would, Thank you Ciaran....How would I do that?
Or is it possible for the menu to just scroll with the page?
  1. more than a month ago
  2. Commercial Templates
  3. # 12
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Patrick

To amend try adding the following to the Custom CSS field of your templates parameters where 700px is the screen height to switch to the mobile menu (edit to taste)...


@media only screen and (max-height: 700px) {
/* Hide default hornav menu */
.hornav {display:none !important;}
/* Show mobile hornav menu */
.slicknav_menu {display:block;}
}


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