Results 1 to 2 of 2

Thread: Change navbar width

  1. #1
    Junior Member
    Join Date
    Mar 2015

    Change navbar width


    i can't change the navbar width on my website,

    i want to delete the padding only in the navbar
    i don't find it in bootstrap.css

    If someone has an idea,


  2. #2
    Junior Member
    Join Date
    Mar 2015
    Hello, what you need to do is find this class and its relative style rules in your bootstrap.css:

    .navbar {
    position: relative;
    min-height: 30px;
    border: 1px solid transparent; }

    and simply add a declaration for width, so if you want the width of the navbar to be halfway across the screen simply add the line width:50%

    bare in mind, this does not affect the style rules of the navigation link 'li' elements themselves, so if you have long text names for links and a high number of them, for instance Home---About Us----Our Services----Our Philosophy----Projects----Workshops----E-Store---- etc etc

    they will 'break out'.

    What you might want to experiment with is adding a line to your bootstrap css file, just add it right at the end - below all the other styles so you can change and save accordingly:

    like follows:

    .navbar-nav li {padding-right:<a chosen value> } then save, and refresh and observe whats happening.

    If all hell breaks lose - just go back and delete that line and save - and you're okay lol

    but yeah, thats how I 'tweaked' it myself not long ago when I had to make the nav bar shorter in width and then I had the headache of creating new media queries with new rules on how to space out the individual li elements with the right margins, padding and even had to change the font sizes etc.

    hope that helps.



Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts