Need help? Check out our Support site, then


CSS for navigation menu items

  1. michaelbishop852
    Member

    For this one, I'd like to know the CSS code for the main navigation menu in the Twenty Eleven theme. I'm asking because when I'm on a given page, it is also bolded in its place in the navigation menu.

    Example for michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/017-bluefield/:

    <div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-34" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-34"><a href="http://michaelbishop852.wordpress.com/">Home</a></li>
    <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-35"><a title="About Me" href="http://michaelbishop852.wordpress.com/about/">About Me</a>
    <ul class="sub-menu">
    	<li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a title="Portfolio" href="http://michaelbishop852.wordpress.com/about/portfolio/">Portfolio</a></li>
    	<li id="menu-item-132" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-132"><a title="Influences" href="http://michaelbishop852.wordpress.com/about/influences/">Influences</a></li>
    	<li id="menu-item-133" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-133"><a title="Favorite Quotes" href="http://michaelbishop852.wordpress.com/about/favorite-quotes/">Favorite Quotes</a></li>
    	<li id="menu-item-810" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-810"><a title="Contact Me" href="http://michaelbishop852.wordpress.com/about/contact-me/">Contact Me</a></li>
    </ul>
    </li>
    <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current_page_ancestor menu-item-has-children menu-item-36"><a title="Project Bluefield" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/">Fiction: <em>Project Bluefield</em></a>
    <ul class="sub-menu">
    	<li id="menu-item-468" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-468"><a title="Project Bluefield | Story" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/story-project-bluefield/">Story</a></li>
    	<li id="menu-item-440" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-440"><a title="Project Bluefield | Characters" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/">Characters</a>
    	<ul class="sub-menu">
    		<li id="menu-item-443" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-322 current_page_item menu-item-443"><a title="Project Bluefield | Characters – 017 “Bluefield”" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/017-bluefield/">017 “Bluefield”</a></li>
    		<li id="menu-item-442" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-442"><a title="Project Bluefield | Characters – 016 “Olivier”" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/016-olivier/">016 “Olivier”</a></li>
    		<li id="menu-item-441" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-441"><a title="Project Bluefield | Characters – 015 “Chisari”" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/015-chisari/">015 “Chisari”</a></li>
    		<li id="menu-item-632" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-632"><a title="Project Bluefield | Characters – Kyler" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/kyler/">Kyler</a></li>
    		<li id="menu-item-680" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-680"><a title="Project Bluefield | Characters – [Vaire]" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/vaire/">[Vaire]</a></li>
    	</ul>
    </li>
    </ul>
    </li>
    </ul></div>

    Result:
    <div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-34" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-34">Home
    <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-35">About Me
    <ul class="sub-menu">
    <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49">Portfolio
    <li id="menu-item-132" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-132">Influences
    <li id="menu-item-133" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-133">Favorite Quotes
    <li id="menu-item-810" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-810">Contact Me

    <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current_page_ancestor menu-item-has-children menu-item-36">Fiction: Project Bluefield
    <ul class="sub-menu">
    <li id="menu-item-468" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-468">Story
    <li id="menu-item-440" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-440">Characters
    <ul class="sub-menu">
    <li id="menu-item-443" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-322 current_page_item menu-item-443">017 “Bluefield”
    <li id="menu-item-442" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-442">016 “Olivier”
    <li id="menu-item-441" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-441">015 “Chisari”
    <li id="menu-item-632" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-632">Kyler
    <li id="menu-item-680" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-680">[Vaire]

    </div>

    The blog I need help with is michaelbishop852.wordpress.com.

  2. michaelbishop852
    Member

  3. michaelbishop852
    Member

  4. michaelbishop852
    Member

    EDIT 4:

    Okay, since I can't seem to bold the link text, I'll just use code to display the HTML, to show your what I've seen on the Twenty Eleven blog pages.

    <div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-34" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-34"><a href="http://michaelbishop852.wordpress.com/">Home</a></li>
    <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-35"><a title="About Me" href="http://michaelbishop852.wordpress.com/about/">About Me</a>
    <ul class="sub-menu">
    	<li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a title="Portfolio" href="http://michaelbishop852.wordpress.com/about/portfolio/">Portfolio</a></li>
    	<li id="menu-item-132" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-132"><a title="Influences" href="http://michaelbishop852.wordpress.com/about/influences/">Influences</a></li>
    	<li id="menu-item-133" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-133"><a title="Favorite Quotes" href="http://michaelbishop852.wordpress.com/about/favorite-quotes/">Favorite Quotes</a></li>
    	<li id="menu-item-810" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-810"><a title="Contact Me" href="http://michaelbishop852.wordpress.com/about/contact-me/">Contact Me</a></li>
    </ul>
    </li>
    <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current_page_ancestor menu-item-has-children menu-item-36"><strong><a title="Project Bluefield" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/">Fiction: <em>Project Bluefield</em></a></strong>
    <ul class="sub-menu">
    	<li id="menu-item-468" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-468"><a title="Project Bluefield | Story" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/story-project-bluefield/">Story</a></li>
    	<li id="menu-item-440" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-440"><strong><a title="Project Bluefield | Characters" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/">Characters</a></strong>
    	<ul class="sub-menu">
    		<li id="menu-item-443" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-322 current_page_item menu-item-443"><strong><a title="Project Bluefield | Characters – 017 “Bluefield”" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/017-bluefield/">017 “Bluefield”</a></strong></li>
    		<li id="menu-item-442" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-442"><a title="Project Bluefield | Characters – 016 “Olivier”" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/016-olivier/">016 “Olivier”</a></li>
    		<li id="menu-item-441" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-441"><a title="Project Bluefield | Characters – 015 “Chisari”" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/015-chisari/">015 “Chisari”</a></li>
    		<li id="menu-item-632" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-632"><a title="Project Bluefield | Characters – Kyler" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/kyler/">Kyler</a></li>
    		<li id="menu-item-680" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-680"><a title="Project Bluefield | Characters – [Vaire]" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/vaire/">[Vaire]</a></li>
    	</ul>
    </li>
    </ul>
    </li>
    </ul></div>
  5. If you mean you don't want it bold, add this:

    #access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a {
    font-weight: normal;
    }

    PS Why on earth did you try to copypaste all the above? We can see your menu items, and we can see your HTML and your CSS.

  6. michaelbishop852
    Member

    First: I didn't want to unbold them. I just wanted to find a way to change it because I couldn't use :hover or :active or whatever with them.

    Second: I didn't know that! 8-/

Topic Closed

This topic has been closed to new replies.

About this Topic