Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 141
  • Last Modified:

stop navigation from wrapping

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
http://screencast.com/t/UpDYx7UaZzGa

960x600 screenshot
http://screencast.com/t/vEPYbLOlreVZ

https://nsitedesigns.com
0
nsitedesigns
Asked:
nsitedesigns
  • 3
  • 2
  • 2
2 Solutions
 
Dave BaldwinFixer of ProblemsCommented:
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.
0
 
Edward JimenezIT Professional/WP DeveloperCommented:
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?
0
 
nsitedesignsAuthor Commented:
I am using an emulator found here:
http://quirktools.com/screenfly/
0
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 the high-speed power of the cloud.

 
Dave BaldwinFixer of ProblemsCommented:
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.
0
 
Edward JimenezIT Professional/WP DeveloperCommented:
I tried that emulator and the home link navigation did not wrap:

960 x 600:
http://www.screencast.com/t/MAEvFKl09B0g

1024 x 600:
http://www.screencast.com/t/Yuh3PEXjn

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:
https://www.screencast.com/t/8BL1dFbPOr
0
 
Edward JimenezIT Professional/WP DeveloperCommented:
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.
0
 
nsitedesignsAuthor Commented:
Hmmm, that is strange.  There must have been some caching going on because now it displays fine.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now