0

I can't seem to figure out how to center & change the width of my whole navigation bar for my website

-I'm using the slate bootswatch theme

2 Answers2

0
<div class="navbar navbar-default" style="
    width: 600px;
    position: absolute;
    left: 35%;
">
...............
  <div class="navbar-collapse collapse navbar-responsive-collapse" style="
    width: 500px;
    position: absolute;
    left: 10%;
">

Change the number to fix as you want, not really a good way but maybe you want to see

Lex Nguyen
  • 401
  • 11
  • 23
  • It kind of works but now my slot machine is touching the navigation bar? –  Jul 21 '14 at 06:56
  • – Lex Nguyen Jul 21 '14 at 08:17
  • Thank you for help. It seems to not stay in position when I zoom in or out. Is their a simple fix for this? –  Jul 21 '14 at 09:33
  • I checked your website, it's OK when zoom in and out, so, what's the problem? – Lex Nguyen Jul 22 '14 at 00:41
  • It's fixed but now when I go on mobile and click the menu icon it won't retract back? –  Jul 22 '14 at 00:44
  • On PC , it work well, so the reason is your device browser,let try in another device, or another browser of your device – Lex Nguyen Jul 22 '14 at 02:13
  • I used google chrome and tried safari on the iPhone5c & tried the galaxy s4 but when I press on the menu button it will not retract back after pressing it –  Jul 22 '14 at 04:46
  • $(".Games").attr('class','Games open') this to open $(".Games").attr('class','Games') this to close let try to implement when you click on game menu, and test on mobile – Lex Nguyen Jul 22 '14 at 05:38
0

You may have to add additional css to tweak the bootstrap css:

.navbar-nav{           
    display: inline-block;  
    float: none; 
} 

.navbar-collapse {
    text-align: center;
}

and remove the class navbar-right from the navigation ul

to change the width of each menu item, target the .nav > li > a

e.g., .nav > li > a { width: 150px;}

qtgye
  • 3,580
  • 2
  • 15
  • 30