0

I'm using bootstrap CCS3.

I have a larger menu on my page. On some PC's with smaller resolutions my menu is overlapping itself. I would like to have the navbar toggle to change at a higher width to resolve this.

I cannot find anywhere to control the width in which toggle occurs. Where am I going wrong here?

Code:

<div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a runat="server" href="~/">Home</a></li>
                        <li><a runat="server" href="~/page2">page2------------------</a></li>
                        <li><a runat="server" href="~/page3">page3------------------</a></li>
                        <li><a runat="server" href="~/page4">page4------------------</a></li>
                        <li><a runat="server" href="~/page5">page5------------------</a></li>
                        <li><a runat="server" href="~/page6">page6------------------</a></li>
                        <li><a runat="server" href="~/page7">page7------------------</a></li>
                    </ul>
                </div>
            </div>
        </div>

I added --------- to simulate the spacing each item takes. I wasn't permitted to include the original text due to internal policies.

Quilnux
  • 15
  • 1
  • 6
  • 1
    post your code please – Banana Mar 17 '14 at 16:42
  • its alright. so basically what your asking is how to change menu width? or how to check what resolution client has? also, since you didnt include the css, is your menu horizontal? is it supposed to fit 100% of screen? what do you mean by overlapping? if you are are not allowed to post a full example with css, could you provide a picture with the problem shown? also it would be great if you could create a demo in http://jsfiddle.net where we can see the problem recreated. you dont have to use original code, just create the same problem so we can see it. – Banana Mar 17 '14 at 18:25
  • I'm using the original bootstrap CSS (unmodified). Basically when the browser window is in a lower resolution it adds what can't fit to a second line. I'm instead wanting it to change to 3 bars. If I continue to reduce resolution (or browser window width) it will eventually activate toggle. I want to control the width for when toggle gets activated. – Quilnux Mar 17 '14 at 21:35
  • ok im sorry im just trying to understand the question, the bar has 3 states - 1) all of it shown fully in one row, 2) it breaks into two rows, 3) menus disappear. do you want one of those to occur at a higher screen width? – Banana Mar 17 '14 at 21:43
  • Are you familiar with bootstrap? When you reduce the width of the browser window, it will change to toggle mode when the width is reduced to a certain width. I'm wanting to increase the width at which the toggle mode activates in order to cause toggle to become active at a much higher width. I have looked in the bootstrap documentation site but haven't had much luck yet finding it. – Quilnux Mar 17 '14 at 22:36
  • sorry i forgot to include a file and didnt see the effect. i understand our question now, i think you might find an answer here: http://stackoverflow.com/questions/18192082/bootstrap-3-navbar-collapse – Banana Mar 17 '14 at 22:43
  • That worked. Your link referred me to another post which helped me figured out that the reason I was having a problem was because the bootstrap-min.css file was getting in the way. I was editing the bootstrap.css file and not *-min.css. resolved this by editing the *-min.css file. – Quilnux Mar 18 '14 at 03:02
  • Can you add your comment as a response so I can mark it as answered? Thanks – Quilnux Mar 18 '14 at 03:02

1 Answers1

0

adding this as an answer like op asked:

the solution can be found Here

for any people who encounter this issue in the future, i will also add op's comment:

it seems op figured out that he has to edit both bootstrap.css and 'bootstrap-min.css`

Community
  • 1
  • 1
Banana
  • 7,424
  • 3
  • 22
  • 43