Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


stop navigation from wrapping

Posted on 2016-12-27
Medium Priority
Last Modified: 2017-01-17
How do i set the css so that on mobile devices which measure 1024 x 600, my site's navigation does not go to two lines.  The home button goes down a line.  

I like how the navigation works on devices that measure 960x600 where the entire navigation is centered  BELOW the logo.

1024 x 600 screenshot

960x600 screenshot

Question by:nsitedesigns
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
LVL 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 1000 total points
ID: 41939429
I can't get it to do that in any browser or mode.  However, your SiteLock image covers your phone number.  And on my older version of Chrome on this XP computer, it always shows the 'mobile' view with the 'hamburger' nav icon even at full screen.  On Windows 7, it acts as it should.

Expert Comment

by:Edward Jimenez
ID: 41939582
Hi nsitedesigns,

my browser does not split up the navigation onto 2 lines when view at that dimesion (1024 x 600).  I'm using Chrome version 54 on Linux.  What browser are you using?

Author Comment

ID: 41940039
I am using an emulator found here:
Put Machine Learning to Work--Protect Your Clients

Machine learning means Smarter Cybersecurity™ Solutions.
As technology continues to advance, managing and analyzing massive data sets just can’t be accomplished by humans alone. It requires huge amounts of memory and storage, as well as high-speed processing of the cloud.

LVL 84

Expert Comment

by:Dave Baldwin
ID: 41940342
I can't get it to do that even with that emulator.  I am not in favor of using the browser emulators that I have seen.  I use the 'real' browsers which is why I have too many computers.  My Mac Book died so I don't have a 'real' Safari anymore.

Accepted Solution

Edward Jimenez earned 1000 total points
ID: 41940399
I tried that emulator and the home link navigation did not wrap:

960 x 600:

1024 x 600:

Did you make any changes to the styling? Maybe you are looking at a cache version of the styles applied?  When I manually changed the width for the header .widget-area to 500px, then I did see the navigation menu wrap, but under normal circumstance, when viewing it with different devices, the navigation menu did not wrap:

Expert Comment

by:Edward Jimenez
ID: 41940407
use the web tools that comes with Chrome.  Aside from using various emulators, you can also see the page source code and temporarily make changes to the code to see the results which you can then apply to your real code.

Author Comment

ID: 41941481
Hmmm, that is strange.  There must have been some caching going on because now it displays fine.

Featured Post

Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will learn how to count occurrences of each item in an array.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question