cell phone navigation

[davy_yg]

Hello,

I am having a problem here.

I have two version of navigation that I have created: one for pc and the other one is for cell phone.

I have to leave the viewport setting like this:

    <meta name="viewport" content="width=1280">

if I change it like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

everything will be out of proportion.

The only thing that I want to change is the navigation.

How the system could decide whether this is a pc or a cell phone and choose the right navigation ?

Anyclue?

I heard my friend mention using js or jquery - user agent or something like that but have not find the exact solution.

Please help.

[gentlemedia]

You DON'T create two versions of your navigation! I told you (in one of your other four threads regarding this same issue) that you have to REPLACE the markup (HTML) from your current navigation with the navbar markup that comes with Bootstrap out of the box. The classes on that Bootsrap navbar will handle the responsiveness for your mobile nav. The only thing that you have to to do is change the default design of the navbar to that of your current navigation.

Check these two Bootsrap navbar examples.
https://bootsnipp.com/snippets/Oe7QM
The first is the default and the second the inverse version. The mobile version of the navigation is baked in the Bootstrap CSS file (which you load twice by the way on http://www.purelineliving.com/ - Get rid of one!!!). You don't have to do much else!

You use Bootstrap so STICK to the HTML (markup) & CSS (classes) of the framework and certainly if you don't have any clue what you're doing.
https://getbootstrap.com/docs/4.0/getting-started/introduction/

I also mentioned before that you have horizontal scrollbars on tablet and mobile screens, because your images are not responsive. They have all defined width and height attributes in the markup, so they won't shrink once the screen gets smaller.

[davy_yg]

just one problem if I use:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

which turns everything into mobile size view in cell phone. Everything else turns out too big for the cell phone. I have to change the whole website into bootstrap. While as of now, I only want to change the navigation into bootstrap while everything else remains as it is.

Any clue?

[gentlemedia]

Yes, that's what that meta viewport decleration does and that's the one you need to get a responsive menu. With the current viewport decleration the whole page gets crammed/shrinked into the small screen on mobile, so everything is way too small to read anyway unless users pinch/zoom
If they want a better user experience on mobile, then you have to include the new meta viewport declaration and making the layout of all the pages responsive. And to be honest this is out of your league.