Jump to content
Sign in to follow this  
suecrawfordesign

Main nav doesn't scale proportionately with site

Recommended Posts

suecrawfordesign    1
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.parentingsuccessnetwork.org/

Share this post


Link to post
Share on other sites
Danny    1,327
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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
suecrawfordesign    1
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

Share this post


Link to post
Share on other sites
James B    436
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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Rob    547
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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
suecrawfordesign    1
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

Share this post


Link to post
Share on other sites
James B    436
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;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • bnapoli
      By bnapoli+
      http://731.34b.myftpupload.com/ this website is using the NavPro navigation in Platform 5. It has a lot of menu items, so it breaks to two lines when the window is sized down. What is the media query to make the navigation either a) switch to "mobile mode" at a higher width, or b ) expand the nav into two lines. Thanks
    • nadielp
      By nadielp+
      Hi Everyone,
      I am trying to get a single navigation item to center. I am using a scroll menu in the navigation component of Impulse. I would like to have the item in the center of the page but it defaults right. I tried setting the item to center a few different ways and nothing is working. I added {
        display: inline-block;
        position: relative;
        text-align: center;
      }
      but that didn't work...any help would be appreciated. Site is at http://vetpaw.org/new
       
      Thanks!
      Daniel
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      I have noticed that all thumbnails on www.michaelkummer.com are scaled down in CSS or HTML, rather than on the backend by Jetpack's Photon. See https://db.tt/vNJCn7Gh and https://db.tt/3ZpkHM7G. 
      Any idea why Pins sets the image width and height to something much larger than what's shown on the screen? Is there any way to fix this so that Photon can do a better job in rescaling the images on the backend before they are delivered to the browser?
      Thanks
      Michael 
    • yemoonyah
      By yemoonyah+
      I just installed and added the Flipper section to my home page and it makes my navigation/menu bar items disappear.
      They do show up again when scrolling down and everything seems normal on the other pages.
      http://yemoonyah.com
      Thanks.
       
    • Houston Haynes
      By Houston Haynes+
      I'm still "piercing the veil" of platform 5, with page navigation the current subject of interest. I worked with a few plugins (the most useful being Next Page Not Next Post) but I wanted to take a step back and start with an example - and see if I could get a bit of help "inside the beltway". 
      What I'm looking to do is substantially similar to the pagelines docs pages - see my annotated screenshots attached. At the top of a "child" page I want a link back to the "parent" page - and at the bottom of that "child" page I want to place a similar link to the "grandchild" page. At the bottom of each grandchild page I want there to be navigation "buttons" to sibling pages in the hierarchy. 
      "Next Page Not Next Post" handles what I'm expecting for "sibling" navigation, but I'm having a bit of trouble getting over the logistical hump of applying that functionality to my page "Template C" instance only. And per the attached examples, while researching how to solve this problem I see on the Pagelines site *itself* that the navigation elements are in place - and I especially like the oval button formatting of the sibling page navigation.
      So - really, my question is two-part:
      Are there plugins/code snippets/tutorials/threads here that show how Pagelines achieved their page hierarchy nagivation, and  Is there a tutorial (or advice from generous contributors here) on how to use the PHP templates to override the content portion of the page to add the navigation elements? Thanks in advance!


×