Bootstrap navigation menu styling issues with WordPress

Question

I have a website set up using the Bootstrap framework.

I have a navigation bar with my page items listed from WordPress as such:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <?php wp_list_pages('title_li=');?>        
      </ul>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

This works fine, however I can't style the page elements (<li>) anymore and the styling doesn't appear the same way as if I were to manually list the pages as such:

    <ul class="nav navbar-nav">
   <li><a href="index">Home</a></li>
   <li><a href="index">Home</a></li>
   <li><a href="index">Home</a></li>
   ...
   </ul>

How do I style the elements if I use it the WordPress way? If I make my navbar white then the menu items cannot be seen as they are also white by default and I cannot change them.

EDIT:

This is the HTML output in the source code for the navbar items:

<ul class="nav navbar-nav">
<li class="page_item page-item-2 current_page_item"><a href="http://shabaz.comoj.com/">Home</a></li>
<li class="page_item page-item-11"><a href="http://shabaz.comoj.com/?page_id=11">Portfolio</a></li>
<li class="page_item page-item-46"><a href="http://shabaz.comoj.com/?page_id=46">Services</a></li>
<li class="page_item page-item-21"><a href="http://shabaz.comoj.com/?page_id=21">Gallery</a></li>
<li class="page_item page-item-24"><a href="http://shabaz.comoj.com/?page_id=24">Contact</a></li>
      </ul>

See Source Code Here

Howli · Accepted Answer · 2014-08-14 21:16:56Z

2

Add the following to your style sheet:

.navbar-nav li a
{
    color: #000 !important;
}

that should change the colour of the text to black.

EDIT: To style the current page item use:

.current_page_item a
{
    background: red;
}

edited Aug 14, 2014 at 21:16

answered Aug 14, 2014 at 20:26

Howli

12.5k19 gold badges50 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user3574492 Over a year ago

As I have mentioned, I am using WordPress to generate the pages so standard CSS styling doesn't work

Howli Over a year ago

Is the menu bar not made up the same way? A link within a li tag?

user3574492 Over a year ago

The menu items are called from Wordpress as such: <?php wp_list_pages('title_li=');?>... If that is what you mean?

Howli Over a year ago

I am meaning the html make up it, will still be <ul><li>link</li></ul>?

user3574492 Over a year ago

Right, I see what you mean, you mean the HTML output. Yes you are right, that is the output however your code doesn't do anything I have just tried it

|

Devin · Accepted Answer · 2014-08-14 21:16:03Z

0

well, for starters, you have a missing style.css stylesheet, which is of paramount importance in WordPress. Also, once you have it, make sure the stylesheet is AFTER Bootstrap CSS or you will have trouble changing it.

Additionally, you need to add a space here:

<link href="http://shabaz.comoj.com/wp-content/themes/new-wp-responsive-theme/style.css"rel="stylesheet" type="text/css"/>

to this:

<link href="http://shabaz.comoj.com/wp-content/themes/new-wp-responsive-theme/style.css" rel="stylesheet" type="text/css"/>

(see after style.css")

answered Aug 14, 2014 at 21:16

Devin

7,7306 gold badges43 silver badges56 bronze badges

Collectives™ on Stack Overflow

Bootstrap navigation menu styling issues with WordPress

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related