Hi Nick

To fix your mobile menu to the top try adding the following to the Custom CSS field of your templates parameters...

.slicknav_menu {

    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);

    position: fixed;

    right: 0;

    z-index: 100;

}

For the background image try adding the following to the Custom CSS field of your templates parameters where ### is the URL to your new image...

@media only screen and (max-width: 1024px) {

#body_bg {

    background: url("###");

}}

Ciarán

Hi Ciarán,

Thanks for that info, I've had some success with it, but still haven't totally solved the problem.

The menu position:
It does indeed track now with scroll, although it did overlap the logo, so I added the "top:100px" value to offset it to just below. The issue is the template style i'm using on the landing page has them menu/logo header float up and lock into place on scroll down. This looks great on the desktop site but not so much on mobile due to the limited screen space, and the fact it floats in space till the header locks to the top of the page. Can I disable this behaviour on mobile only?

Background for mobile:
The code you provided will only trigger bkg img changes on resolutions less than 1024px across. This doesn't really help the problem with modern devices that have minimum 1080 in portrait mode. It did sitch when I increased the resolution cap, but still scaled the image very badly. I experimented with the "background-size:" property, but it does not seem to respect the % percentage values. Any insight

Also, I can't seem to find the template.css file in the editor window? Where can I find it?

I've included screenshots to avoid any confusion.
Thanks for you help,
Nick

HI Nick

To disable the sticky header div on mobile devices could you try adding the following to the Custom CSS field of your templates parameters..

@media only screen and (max-width: 1024px) {

#container_header {

    position: relative !important;

}}

As the template loads modernizr an alternative solution for the background image on just touch devices would be to use the following....

.touch #body_bg {

    background: url("###");

}

In recent template releases the template.css has been integrated in to the templates nexus.css. This is to reduce the number off CSS files been loaded.

Ciarán

Can I use the .touch property to disable the sticky header on mobile as well? Otherwise I run into the same problem again using the resolution on devices with 1080p screen or higher.

Thanks,
Nick

Hi Ciarán,

So after a deeper investigation the background behaviour is different depending on the mobile browser. With none of the custom css you provided added Firefox Mobile displays the full res bkg images, but scrolls it along the page(it does not remain static). Chrome mobile, and Safari mobile display the overly scaled background, but do scroll it as you pan down. With the custom css added I can change the image, but it still stretches it to the same dimensions as the original, which is the issue. There must be a better solution for this. Any ideas?

The header stuff sorta works by making it scroll with the page. I was hoping, for mobile only, I could lock it to the top of the page,and avoid the scroll then lock to top behaviour thats on the desktop version(and on your demo page)

One last question, how can I shrink the logo size on mobile only?

EDIT: After more investigating, I've isolated the cause of the bkg being stretched. The longer the pages(i.e. more articles on display), the more stretched the background image becomes. Its scaling to the length of the page, not the width. How can we make this a static size?

Thanks Again,
Nick

Hi Nick

Regarding the background image may I suggest the following forum post.. http://www.joomla51.com/forum/8-commercial-templates/5757-can-you-view-correctly-on-iphone-using-lifestyle#12385

Checking your site again your header is fixed on non touch devices however scrolls on touch device. We have checked your site across a number of desktop browsers and on each the header is fixed to the top of the browser.

Regarding your logo could you try adding the following to the Custom CSS field of your templates parameters...

.logo img {

    max-width: 100%;

}

Ciarán

Hi Ciarán,

Thanks for your input, that has solved my background issues.

The header behaviour I was referring too was the sticky functionality on the main landing page, not the position of the header on mobile/desktop on all other pages. If you visit http://www.newcastletimber.ca/home, you'll notice i've managed to hide the header after it scrolls to the top, and only have the menu visible as you scroll down the page. The issues is that it pops on top of the logo header when reaches the top, instead of the menu locking into place as it reaches the top of the page. I sorta hacked it into working because the sticky functionality is jquery stuff, and i'm not sure where it is being invoked. Can you give me a better way of accomplishing this?

Thanks,
Nick

Hi Nick

In your templates scripts.php you will find the following code..

<script type="text/javascript" >

  jQuery(window).load(function(){

    jQuery("#container_hornav").sticky({ topSpacing: 122 });

  });

  jQuery(window).load(function(){

    jQuery("#container_header").sticky({ topSpacing: 0 });

  });

</script>

Presuming I understand you correctly could you try changing this to the following...

<script type="text/javascript" >

  jQuery(window).load(function(){

    jQuery("#container_hornav").sticky({ topSpacing: 0 });

  });

</script>

Ciarán

Thats exactly what I was looking for, now working great.

Thanks for all your help!

Nick

Hell Ciaran,

I have the same issue! It is not possible to scroll down the menu. The website is http://weathercyprus.com/
Can you see an easy solution on this.

Kind Regards

Hello

To amend try adding the following to the Custom CSS field of your templates parameters...

#container_hornav {

    position: relative;

} 

Ciarán

Hello Cirian,

It still does not work. When I click a menu item, I still can see all the sub-menu items.

I believe, the problem is the

.slicknav_menu {
position: fixed!important;
}

which we added so that the menu button sticks at the top

Hello

Strangely we are unable to replicate this issue. On which device are you viewing your site?

A bit of a shot in the dark but try adding the following to the Custom CSS field of your templates parameters...

.slicknav_menu {

    z-index: 9999;

} 

Ciarán

Hello Ciaran,

I have extensivelly tested. The problem exists in all devices on Adroid and iOS.

Try the website: http://www.weathercyprus.com and the try to access the submenu Larnaca-> October
It will not be possible because the menu does not scroll down

Ah thank you... I now understand your issue.

Fixing the menu does restrict you on the number of menu items that can be displayed on smaller screen sizes. One option to increase the number of items you can display is to reduce their size. To do so try adding the following to the Custom CSS field of your templates parameters...

.slicknav_menu .slicknav_nav .slicknav_item,

.slicknav_menu .slicknav_nav a {

    padding: 2px 14px;

}

Ciarán