Joomla Templates Club 406,261 posts

[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#204512

I received a solution for this problem before in one of the threads that disappeared with the 30 day data loss:

@media (max-width: 768px) {
.uber-header.header-5.affix {
position: static;

The above css adjustment for ACM Module Style 5 in Uber Default (Joomla 3.3.6) in …uber/css/custom.css is intended to keep the sticky menu on larger screens but change to a static menu for smaller mobile devices so that the main menu disappears when you scroll up (if ‘sticky’ it takes up far to much room on a mobile device, especially in horizontal view, making viewing actual content very difficult).

It works very well but I noticed today on the horizontal view of Kindle Fire HD6 the sticky menu remains (it is static and perfectly fine on vertical view), hiding a lot of the content.

The max width above is 768px for static, what width should it be to work with Kindle HD6 in horizontal view?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#562606

You can give me the URL of your site and the screenshot what the problem are you trying to do. I will help you to check it further.

[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#562726

Details sent via PM

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#562914

At this moment, I checked URL of your site and here is my findings:

– In large screens: the menu on your site is fixed on top (sticky)
– In Small screen: with dimension is smaller than 768px, the menu will be collapsed to mobile navigation and change sticky to None.

It’s better if you send me some screenshots illustrating how the menu should be on Kindle Fire HD6 device. I will help you out.

[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#567035

<blockquote>It works very well but I noticed today on the horizontal view of Kindle Fire HD6 the sticky menu remains (it is static and perfectly fine on vertical view), hiding a lot of the content.

The max width above is 768px for static, what width should it be to work with Kindle HD6 in horizontal view?</blockquote>

Sorry for late reply, I checked by viewing the Joomlart site on the Kindle Fire HD6 and there is exactly the same problem (but only on the HD6 horizontal view) so it is probably a Kindle problem Ninja as everything is fine on smaller mobile screens and the Kindle normal/vertical view.

It seems the only problem is switching to a horizontal view on Kindle HD6 where the menu remains when scrolling down.

I will mark this thread as ‘Non JA Issue’ but you may want to check why the Joomlart site does not work in all views on a Kindle Fire HD6 in case there is a bug in the Joomlart code.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#567155

@dealthenuts: Please give me the screenshot and description on that bug, I will help you to detect it.

[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#567293

I will get a screenshot the next time I borrow the Kindle (probably next week though) and transfer/upload the image to here.

[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#568046

Problem solved, solution below for anyone using a Kindle HD.

Ref the question in my initial post:

<blockquote>The max width above is 768px for static, what width should it be to work with Kindle HD6 in horizontal view?</blockquote>

The answer is 810px.

I increased the width in the following code by 10 until I found a solution that worked. 800px is too small, it is between 800 and 810 but 810px is what i am using and everytihng is fine now, sticky above 810px and static below 810px.

@media (max-width: 810px) {
.uber-header.header-4.affix {
position: static;
}
}

I am now using header 4, obviously if anyone is using a different header option in the acm module, change the number in the code to match.

[Author]

Posts