6 replies to this topic

[suecrawfordesign]

When you make the browser page smaller (command-minus on Mac), the main nav wraps to a second line instead of getting smaller at the same proportion with the feature image or the width of the rest of the site. I have tried widening the feature image but it doesn't help.

 

What do I need to do to prevent this?

 

http://www.parenting...essnetwork.org/

[Danny]

Hi,

 

I am not quite sure what the issue is here, command and minus is simply zooming out. Also Platform Pro is not responsive. Can you explain further what the issue is and how you would like it to look please.

[suecrawfordesign]

I would ike the main nav to not wrap to a second line when you zoom out. I have screen shots but I don't see how to add them to this post.

 

Thanks for any advice you can offer.

 

Sue

[James B]

Hi Sue,

 

I'm not seeing the same results when I zoom out - http://screencast.com/t/8cVHPjUX

 

I'm not sure what the purpose of zooming out is though, are you trying to replicate a mobile view? If so I'd suggest using browserstack to test your site on other browsers including mobile - http://screencast.com/t/8cVHPjUX However as Danny stated platform pro isn't a responsive site, so you'd probably have to use css to edit the navbar to correct any issues you're seeing in the display.

 

Hope that helps

[Rob]

To supplement what James has correctly pointed out,  there are several factors which contribute to the wrap, all of which are completely under your control:

1.  The padding/margins set on the left and right side of each menu item;

2.  The selection of fonts, weight and color - determine how wide each menu label is;

3.  The text itself - larger words make for a wider menu item; shorter words mean less chance of wrap.

 

If you adjust these things, you can easily make the changes via your Dashboard or, via CSS.

[suecrawfordesign]

Thanks, everyone, for your help. This doesn't have anything to do with mobile. And I find that I don't get that result on Firefox, but I do on other browsers. I am trying to address a complaint from the website's owner organization members. I guess because they have old small monitors and what they see equates to what I see when I zoom way out. In other words, without zooming way out, they cannot see the whole site on their screens.

 

I don't know why it is doing this, but I guess that the easiest way to address the issue (not the most elegant, but the easiest) is to adjust the font, etc. to make the nav less wide, as Rob pointed out.

 

Thanks,

Sue

[James B]

I think editing the margins would work well to keep it all in alignment. Strange thing is i logged back in and this time i saw the error, didn't appear before. I think it's related to the below code, editing to 2.1em seemed to fix, but have a play and see what happens.

 

Hope that helps

 

 
ul.sf-menu a.sf-with-ul {
    min-width: 1px;
    padding-right: 2.1em;
}