WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Background colour not appearing in nav bar? (6 posts)

  1. mallowtribe
    Member
    Posted 1 year ago #

    I'm probably missing something really glaringly obvious, so could do with another pair of eyes to look at this code and tell me what I'm doing wrong.

    I'm trying to apply a background colour to the nav menu, but the only way I can get it to show up is if I apply it to "li", which means that the colour doesn't continue to the edges of the box.

    If I apply the colour to the nav bar div then I get no background at all.
    See here

    I did manage to apply a colour all the way across, but it involved setting a height for the div, and obviously the div height will depend on the number of menu items.

    The CSS is

    #navigation {
    	width: 820px;
    	margin-left: auto;
    	margin-right: auto;
    	font-weight: bold;
    	font-size: 18pt;
    	z-index: 2;
    	position: relative;
    	top: 18px;
    	color: #FFF;
    	display: block;
    	background-color: #000; /* Show a solid color for older browsers */
    }

    And the HTML/PHP is

    <nav id="navigation" role="navigation">
    <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    </nav>
  2. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    try to clear the floats for instance by adding a div:

    <nav id="navigation" role="navigation">
    <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    <div style="clear: both;"></div>
    </nav>
  3. mallowtribe
    Member
    Posted 1 year ago #

    Tried that, still no background colour though.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Add overflow: hidden; to your #navigation style (CSS);

    E.g

    #navigation {
     overflow: hidden;
     ...
    }
  5. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    the div is to be inserted before the </nav>

  6. mallowtribe
    Member
    Posted 1 year ago #

    Brilliant, thank you!

Topic Closed

This topic has been closed to new replies.

About this Topic