Specialized Header Needed

roheenieroheenie Registered Users Posts: 1 Beginner grinner
in SmugMug Support
I have created my first web website via Smugmug. A Smugmug hero suggested I direct my issue to this forum. Here is the issue: I LOVED the header I created, but when viewed on a smaller screen, it did not resize appropriately. My desire is to have my header all one line, which I created using three different content blocks: one for logo, one for menu and one for social icons. I lined up the left and right margins with the edges of my slideshow and all was perfect. When a friend opened it on an iPad, the three content blocks overlapped as it did on other devices. I contacted a smugmug hero who told me: "What you are asking is quite difficult to accomplish with the variety of display sizes, from huge 30-inch monitors to phones. A 1200-pixel header, for example, will look minuscule on a large monitor, and way too big on a phone. Showing three content blocks on the same row will always be problematic, especially if you have many items in the menu.
You have the option in the menu content block to set the menu to not collapse on mobile, but if you want to show the logo, menu AND social icons on a smallish phone, you might run out of space.
You might be able to display different headers on different display sizes, with some advanced CSS. However, this is beyond the scope of what we can help you with on the help desk."

So........can anyone give me some help? Here's my website. The current header is the one created by the Smugmug hero. It works on most devices but it's not what I want. i look forward to your suggestions!

www.robineshlemanphotography.com

Comments

Sign In or Register to comment.