CSS for navigation menu items

  • Author
    Posts
  • #1595454

    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.

    #1595513
    #1595514
    #1595515

    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>

    #1595524

    justpi
    Member

    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.

    #1595580

    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-/

The topic ‘CSS for navigation menu items’ is closed to new replies.