Menu of SmugMug website with background (picture)

jakubmatejeccom · April 23, 2017

Hi All,

I would like to ask you if it is possible to have Menu of SmugMug website with background (picture)? Example of this here:
https://www.whiteshutterphotography.com/weddings
or
http://www.honzamartinec.com/svatby-wedding/

Currently I am working on my SmugMug website for Wedding Photography and this menu with background of wedding picture is very common (e.g. Squarespace, WIX, etc).

I already asked SmugMug Heroes support on this topic. But I received answer that it requires some advanced customization codes.

Based on your experience, please do you have any idea how to implement or if there is already some existed CSS code for this? Please could you help with this?

I think that it can be very beneficial feature/improvement of SmugMug website also for others users.

Many thanks,
Jakub
www.jakubmatejec.com

Hikin' Mike · April 23, 2017

You'll have to change your site-wide layout to "Stretchy" first (Entire Site > Layout > 'Stretchy'). In the 'Margins', set your "Side Margins" to 0. In 'Sections', set your "Header Width" to 0 auto if it isn't set already. Set the other two to a width or leave it.

You'll need the URL for the picture you want to use as the Header/Menu picture. Use the 'Share' feature. Now you'll have to add this to your site's theme CSS changing the yourpictureURLhere.jpg to the URL of your picture:

.sm-user-ui .sm-page-layout-region-header {
    background: url( 'yourpictureURLhere.jpg' );
    }

That should get you started.

Menu of SmugMug website with background (picture)

Comments