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
Solved

stop navigation from wrapping

Posted on 2016-12-27
7
91 Views
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
http://screencast.com/t/UpDYx7UaZzGa

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

https://nsitedesigns.com
0
Comment
Question by:nsitedesigns
  • 3
  • 2
  • 2
7 Comments
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 250 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.
0
 
LVL 3

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?
0
 

Author Comment

by:nsitedesigns
ID: 41940039
I am using an emulator found here:
http://quirktools.com/screenfly/
0
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 
LVL 83

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.
0
 
LVL 3

Accepted Solution

by:
Edward Jimenez earned 250 total points
ID: 41940399
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
 
LVL 3

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.
0
 

Author Comment

by:nsitedesigns
ID: 41941481
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.

Question has a verified solution.

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

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

839 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