Okay, here's the thing: I recently completed a site for a client (bradsdesigns.com) that he designed himself. He wanted his nav bar to match his logo, and on a desktop, it does this. (btw, he mainly wanted customers to look at it from a computer; he said he couldn't care less about mobile optimization) I made it responsive anyway (for free) using bootstrap, and modified it to look the way he wanted it. Here it is. It looks good on a pc. However, the problem shows up when I look at it on my phone. You see, I had to use a Vertical bar. I tricked it into thinking it was another link on the nav bar. This is what I mean: li>| (first < is gone to make it show up here)... Now, with the collapsed navbar on mobile, when you click on the expand button, it shows up like this: 2nd picture. Is there anyway I can get it to not do this? He said that he didn't care that it looked like this, but it doesn't look good for me. Like other people will see that, and think that I am not very good. Any help would be much appreciated.
Asked
Active
Viewed 54 times
-2
-
Please add some code to your post. HTML and CSS related to your question. – service-paradis Nov 21 '15 at 23:52
1 Answers
0
You can remove the .navbar-nav {margin-left: 100px;} (For example, change it to .navbar-nav {margin-left: initial;}) and also set .nav>li {display: inline-block;} on the mobile version.
Alon Eitan
- 11,997
- 8
- 49
- 58