Note that there are some explanatory texts on larger screens.

plurals
  1. PONot able to set background color for navigation menu
    primarykey
    data
    text
    <p>I am currently working on underscores.me(by Automattic wordpress team) starter theme to create a new wordpress theme(my first theme). </p> <p>I was setting the styles for my theme but stuck at a point where i want to set background color for navigation menu</p> <pre><code>/* =Menu ----------------------------------------------- */ .navigation-main { clear: both; display: block; } .navigation-main ul { list-style: none; margin: 0; padding-left: 0; } .navigation-main li { float: left; margin: 0.5em 0; position: relative; background-color: #ffffff; } .navigation-main a { display: block; color: #5fbfe7; margin-right: 20px; text-decoration: none; } .navigation-main ul ul { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); display: none; float: left; position: absolute; top: 1.5em; left: 0; z-index: 99999; } .navigation-main ul ul ul { left: 100%; top: 0; } .navigation-main ul ul a { width: 200px; } .navigation-main ul ul li { } .navigation-main li:hover &gt; a { } .navigation-main ul ul :hover &gt; a { } .navigation-main ul ul a:hover { } .navigation-main ul li:hover &gt; ul { display: block; } .navigation-main li.current_page_item a, .navigation-main li.current-menu-item a { } /* Small menu */ .menu-toggle { display: none; cursor: pointer; } .main-small-navigation ul { display: none; } @media screen and (max-width: 600px) { .menu-toggle, .main-small-navigation ul.nav-menu.toggled-on { display: block; } .navigation-main ul { display: none; } } </code></pre> <p>And this is the header.php file of Theme i am working on:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html &lt;?php language_attributes(); ?&gt;&gt; &lt;head&gt; &lt;meta charset="&lt;?php bloginfo( 'charset' ); ?&gt;" /&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt;&lt;?php wp_title( '|', true, 'right' ); ?&gt;&lt;/title&gt; &lt;link rel="profile" href="http://gmpg.org/xfn/11" /&gt; &lt;link rel="pingback" href="&lt;?php bloginfo( 'pingback_url' ); ?&gt;" /&gt; &lt;!--[if lt IE 9]&gt; &lt;script src="&lt;?php echo get_template_directory_uri(); ?&gt;/js/html5.js" type="text/javascript"&gt;&lt;/script&gt; &lt;![endif]--&gt; &lt;?php wp_head(); ?&gt; &lt;/head&gt; &lt;body &lt;?php body_class(); ?&gt;&gt; &lt;div id="page" class="hfeed site"&gt; &lt;?php do_action( 'before' ); ?&gt; &lt;header id="masthead" class="site-header" role="banner"&gt; &lt;hgroup&gt; &lt;h1 class="site-title"&gt;&lt;a href="&lt;?php echo esc_url( home_url( '/' ) ); ?&gt;" title="&lt;?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?&gt;" rel="home"&gt;&lt;?php bloginfo( 'name' ); ?&gt;&lt;/a&gt;&lt;/h1&gt; &lt;h2 class="site-description"&gt;&lt;?php bloginfo( 'description' ); ?&gt;&lt;/h2&gt; &lt;/hgroup&gt; &lt;nav id="site-navigation" class="navigation-main" role="navigation"&gt; &lt;h1 class="menu-toggle"&gt;&lt;?php _e( 'Menu', 'lemon' ); ?&gt;&lt;/h1&gt; &lt;div class="screen-reader-text skip-link"&gt;&lt;a href="#content" title="&lt;?php esc_attr_e( 'Skip to content', 'lemon' ); ?&gt;"&gt;&lt;?php _e( 'Skip to content', 'lemon' ); ?&gt;&lt;/a&gt;&lt;/div&gt; &lt;?php wp_nav_menu( array( 'theme_location' =&gt; 'primary' ) ); ?&gt; &lt;/nav&gt;&lt;!-- #site-navigation --&gt; &lt;/header&gt;&lt;!-- #masthead --&gt; &lt;div id="main" class="site-main"&gt; </code></pre> <p>There is no problem when i set background color of list or a tag but nothing happens when i set background color for ul tag or .navigation-main.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload