How to make navbar of bootstrap with few items fit all the page

[lutfiq]

I’m creating a wordpress theme using bootstrap 3, so I used 320press.com theme. I have a main navbar at the top of the page that includes the following:

Home
About Us
Services
Gallery
Offers
Contact Us

I need to make the list of navbar fit with the page (960px wide), the default layout will layout the navbar to the left close to each other. Here is what I need, I have 6 items, so I need each item takes class “col-md-2”, so each item will fit in two columns.

I write this code

    <div>
       <div>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
        <span></span>
        <span></span>
        <span></span>
        </button>

    <a>" href="<?php echo home_url(); ?>">Home</a>
        </div>

    <div class="collapse navbar-collapse navbar-responsive-collapse main-bar">
     <?php wp_bootstrap_main_nav();?>
    </div>    

    </div>

In CSS, I write the following

.main-bar li {
     padding-left: 75px;
    font-size: 1.2em;
}

It’s working fine in wide screen, but in smaller it dose not, such as size 768px or even 1024px.

[Paulie_D]

Codepen.io example please but for one thing…remove that padding.

[lutfiq]

I don’t get you. Please can you describe more? I need to solve that problem

[Paulie_D]

Perhaps you could show us the issue in a Codepen example?

[Author]

Posts