For the menu, try this custom.css:

#moomenu {

	text-align: center;

}

Great thanks that worked fine.

...and do you have any ideas for the responsive logo?

Regards,

Gary

About the logo image: You might want to crop the image to the appropriate height (i.e. 500px) before uploading. Set the width to 100%, the height to auto.

But I'm not quite sure. I don't know the Chelsea template.

Thanks for your suggestion but other J51 templates have an option to have a different logo for the responsive option, so I will wait for Ciaran to get back to me on this as Chelsea doesn't have this option.

Hi Gary

This is a little tricky as you appear to be using the background image option for your logo which is limited and is designed so that the background is always filled rather than ensuring the complete image is displayed. To replace the image you could try adding the following to the Responsive Custom CSS fields within the General -> Responsive Options tab of your template settings. For more details on using these fields may I suggest the following article... https://joomla51.com/tutorials/template-parameters/applying-custom-css-to-a-screensize-device

(replace # with a URL to your mobile image)

#container_header .vegas-slide-inner {

    background-image: url("#") !important;

}

Ciaran

https://test.nepal-systems.com/

Hi Ciaran,

Thanks for this - I see what you mean about using the background image, as putting a mobile logo in as you suggested just resulted in it being very pixelated, and overflowing left and right on the device display.

So I have changed it to using the logo image in the template and now the mobile logo looks much better by adding custom css as per your tutorial. But I did like the fact that background image filled the whole width of the screen - is it possible to get the logo image to do this?

Also I notice that for the responsive display on some devices there is a lot of blank space below the menu logo and above the mobile logo - is there a way to minimize this blank space.

Thanks as always.

Gary

Hi Gary

Presuming I understand you correctly, you could try resizing your header depending on the screen size. SO using the same fields as above, use the following CSS editing to match your image ratio against the viewport width..

#container_header .wrapper960 {

    min-height: 300px;

}

Cairan

Hi Ciaran,

Thanks for this but I am not quite sure I understand.

If I set the .wrapper to 360 which is the width of a smartphone and change the min-height where there is a lot of blank space between the menu and the image then this doesn't appear to do anything - it just stays the same.

I am obviously doing something wrong but not sure what.

Thanks again.

Gary

Hi Gary

No problem. May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will set up the CSS for you. For our reference please paste a link to this post in your email.

Ciaran

Thank you

I have disabled the slideshow script and added the following to your Custom CSS field which should hopefully give you the desired result...

#container_header .wrapper960 {

    min-height: 0;

}

#logo {

    position: relative;

}

Ciaran

Thanks Ciaran that works great - much appreciated as usual.

Best regards,

Gary