Header width

musicalpictures · February 26, 2015

Hi

I'm new to the forum and to SmugMug, so apologies if I seem a bit clueless. I'm on the trial and have 12 days left to take a plan. I'm currently on Photoshelter but like the SmugMug experience so far and will probably commit - just need to sort out a couple of things.

First up, leftquark, thanks so much for all your contributions. I've been to your site and used some of your code and it works really well - thanks again.

The customisation I really need to get to work is the alternative header for small screens/tablets. My temporary site looks terrible on an iPad. I could really use something a bit like you've done, only retaining a top horizontal header and navigation. Unfortunately I'm pretty clueless when it comes to CSS so just copying and pasting your code and changing it to suit a pair of alternative horizontal headers isn't really an option. Would there be an alternative you could maybe suggest? I'd really appreciate it.

My site is here for the time being: www.musicalpictures.smugmug.com - please note I appreciate it's far from the finished article, I'm just getting used to the interface and what Smugmug offers and the site isn't really intended for public consumption just yet.

One more question: at the moment I have a permanent 'admin bar' above the header for making changes. I get why it's there when I want to work on the site and am logged into SmugMug, but it seems impossible to view my site without it - even logged out of my account and using a different machine. Is there any way of seeing the site without the top admin bar, or is that only an option if I commit to a plan?

If these questions have been asked before or are extremely common then please forgive me. I'm new around here and have tried to follow this thread - but there is so much code and cross posts that it's really hard trying to keep track of what's what.

Many thanks in advance for any help you can give me..

Simon

denisegoldberg · February 26, 2015

The top admin bar is easily removed, as is the smugmug footer (other than the copyright notice). Click Customize, Content and Design, Settings. Set the SmugMug header to off and the SmugMug footer to mini.

leftquark has supplied a starting point for CSS that targets smaller screens. You can find that at http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations. If you can identify exactly what you want to change on smaller screens then someone will be able to help with the CSS.

This site allows you to see what your site looks like on different devices - http://quirktools.com/screenfly/.

--- Denise

musicalpictures · February 27, 2015

Thanks
Thanks for your reply Denise and for moving my post.

I've sorted the admin bar and the footer and checked out the link to Aaron's site - plus the link to the quirk tools site was extremely handy. I guess I'd just need to shrink my logo by quite a bit to make it fit an iPad in portrait orientation.

The more I think about it, the more inclined I am to feel a solution that starts with a vertical navigation structure might be a better option. I will continue to experiment, but you've certainly given me a steer in the right direction.

Thanks again

Simon

denisegoldberg · February 27, 2015

musicalpictures wrote: »

The more I think about it, the more inclined I am to feel a solution that starts with a vertical navigation structure might be a better option. I will continue to experiment, but you've certainly given me a steer in the right direction.

I'm glad I could help (even though it was likely just a little bit!).

Don't hesitate to post back with more questions!

--- Denise

musicalpictures · February 28, 2015

denisegoldberg wrote: »

Don't hesitate to post back with more questions!

Well, Denise, since you kindly offered!!

With your guidance and the excellent resources on Aaron's site, I'm making some headway and think I can make something that will look alright.

I've used the code to change the look of the header for smaller screens. For a screen width of 1024 or less, I've hidden social media icons as they didn't format very well. However, I'm now left with dead space where the icons were and the menu sits too far left, especially for an iPad in portrait.

The navigation is currently split into three responsive sections (logo, menu, social). What I'd like to do for a screen width of 1024 or less is to have that as two sections only (logo, menu), with the menu set to align right. I'd really appreciate guidance on what code I'd need for that please.

My fledgeling site in its current guise is below. I still have plenty of work to do.

Many thanks.

Simon

www.musicalpictures.smugmug.com

denisegoldberg · March 1, 2015

musicalpictures wrote: »

I've used the code to change the look of the header for smaller screens. For a screen width of 1024 or less, I've hidden social media icons as they didn't format very well. However, I'm now left with dead space where the icons were and the menu sits too far left, especially for an iPad in portrait.

The navigation is currently split into three responsive sections (logo, menu, social). What I'd like to do for a screen width of 1024 or less is to have that as two sections only (logo, menu), with the menu set to align right. I'd really appreciate guidance on what code I'd need for that please.

I haven't done much playing with that level of code, but I believe you would need to add CSS to the section for screens of that size calling out the div for the menu entries and specifying the alignment.

Another options would be to move the social media icons to somewhere other than the header for your site as displayed everywhere and set up the menu items to be on the right side of the header.

--- Denise

ABPhotography · March 1, 2015

denisegoldberg wrote: »

I haven't done much playing with that level of code, but I believe you would need to add CSS to the section for screens of that size calling out the div for the menu entries and specifying the alignment.

Another options would be to move the social media icons to somewhere other than the header for your site as displayed everywhere and set up the menu items to be on the right side of the header.

--- Denise

Hi,

I've been searching for answers on this for a while and now...

I have a very similar problem with the appearance of the header on my website. Like musicalpictures I'm still during my trial period and if I can sort this out I'm sold. Everything, well almost everything, else is great.

My page is: http://alexbradburyphotography.smugmug.com

On a big screen the header looks great - the nav menu / logo are positioned correctly etc. On a mobile it works great to - the menu 'collapsed for mobile' option is selected and does the job fine. What I want to do is make the collapsed menu appear when the screen is shrank to a size that the menu links don't start appearing over the top of my logo. This way it won't look so terrible on an iPad.

I'm sure there must be a way of doing this with CSS but unfortunately I'm not that clued up on this either.

Any ideas on this?

Thanks in advance

Header width

Comments