Additionally - I just checked the site on mobile and the logo and background image look terrible.

Hi bluedove

This can be achieved by creating 2 different styles of your template. One for the homepage with the 'Header Vertical Spacing' set to the required amount (eg. 250) and another for the rest of your site with the 'Header Vertical Spacing' set to 0. For details on creating multiple styles may I suggest the following tutorial... http://www.joomla51.com/tutorials/item/creating-multiple-template-styles

Ciarán

The background uses the 'background-size:cover' property which can act differently to what you may expect on some mobile devices. You could try adding the following to the Custom CSS field of your templates parameters which will disbale this property on mobile devices..

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

#body_bg, #container_header {

-webkit-background-size: auto !important;

-moz-background-size: auto !important;

-o-background-size: auto !important;

background-size: auto !important;

}}

#body_bg {

    background-position: 0 0;

}

Ciarán

Thanks. I will test that out.

Now I'm having another challenge. I set up a style for the interior pages and made the logo smaller. However, I seem to be missing some styling. When I first click on one of the interior pages -- About, Green Building, etc -- basically anything but the home button, the logo and menu appear like they are supposed to. After you scroll down the page, the menu pops down. I have been all over the CSS and cannot find what I need to change.

http://bludovedemo.com/carter/

Please advise.

Thanks

Hello

In your templates scripts.php (../templates/j51_lifestyle/php/scripts.php) could you try editing (reducing) the following where 122 is the height your top menu sits at when scrolled...

jQuery(window).load(function(){

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

});

Ciarán

Hi:

Thank you. I changed it to what I wanted and it worked for the interior pages. However I have a different sized logo on the home pages than what I do on the rest. I have 2 style sheets in the template manager in Joomla and have them assigned to the different pages.

Now on the home page, when I scroll, the navigation covers the logo and doesn't look right. What would be the best way to go about solving this? Does there need to be an additional line of code in the script file that somehow says that if you are on the home page, scroll will be a certain way and if you aren't then it will be something else?

Alternatively - could there a way to make the logo area "shrink" as it scrolls up?

Not sure if this makes sense. I'm attaching a screenshot of the result so far.

Thanks,
Lisa

The only work around for this I can think of is to remove the following from your templates scripts.php....

<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>

This code you have removed you can then add to each of your templates styles using the 'Body Custom Code' field in the 'Custom Code' tab of your templates parameters, editing to your own taste in each of the styles.

Ciarán