WordPress.org

Ready to get started?Download WordPress

Forums

trouble with formatting of additional second menu (3 posts)

  1. maxedleson
    Member
    Posted 3 years ago #

    Ok, hopefully this will be helpful for others too......
    I am developing a twentyten child theme and I am trying to add a second navigation bar that shows up below the header image and primary nav bar, and at the top of page content so that it acts as a second tier, more specific navigation bar.

    Following helpful tutorials, I have created the second menu and succesfully pasted the original twentyten nav bar code into the top of my custom page template (note: no longer in header.php where it originally was.....), and simply changed the theme_location to call the new menu as shown.....

    <div id="container" class="one-column">
    	<div id="content" role="main">
    	        <div id="access" role="navigation">
    			<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'Kiko' ) ); ?>
     		</div><!-- #access -->
    
          .... page template code .....
            </div>
    </div>

    This works great..... but when I follow the Digital Raindrop Tutorial suggestion to create a new menu style so that I can begin to customize the look of the second menu.... things start to go a little crazy.

    More specifically, when I have copied all the "access" CSS definitions into my child theme style.css and change the name to a new CSS definition: example "secondmenu" and then reference that in my div id definition, the problem shows up. Rather than showing the menu horizontally, it lists the pages in the menu vertically with list bullet points. Somehow, something is missing in the attempted customization from access to secondmenu.

    I am relatively new to CSS so there might be some simple oversight.... hopefully finding the solution will also help others.

    Here is more information for those interested in trying to find the fix... so I change the above quoted code to:

    <div id="container" class="one-column">
    	<div id="content" role="main">
    	        <div id="secondmenu" role="navigation">
    			<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'MyCustomizedAuthorMenu' ) ); ?>
     		</div><!-- #secondmenu -->
    
          .... page template code .....
            </div>
    </div>

    and then I copy and pasted everything from twentyten's original menu css into my child theme styles.css .....

    /* =Menu
    -------------------------------------------------------------- */
    
    #access {
    ...... the rest of the access definitions to end ......
    * html #access ul li.current-menu-parent a,
    * html #access ul li a:hover {
    	color: #fff;
    }

    so that it looks like

    /* =Customized Menu
    -------------------------------------------------------------- */
    
    #secondmenu {
    ...... the rest of the access definitions to ending with ......
    * html #secondmenu ul li.current-menu-parent a,
    * html #secondmenu ul li a:hover {
    	color: #fff;
    }

    Like I said, when I change the div id reference to this new style definition, the nav bar goes from being horizontal to vertical with list bullet points.

    Until we launch around January 10, 2011, you can see the example of the page with a functioning, but stylistically equal menu at:
    http://handprintpress.dreamhosters.com/authors/kiko-denzer/
    and I will leave an unlinked example of the page where I am trying to stylize the menu without success (note: I have not tried to change any of the CSS attributes yet): http://handprintpress.dreamhosters.com/thank-you-to-the-blessed-soul-who-has-arrived-at-this-page-to-help/

    I will be very grateful to anyone who can offer suggestions! Thank you in advance.

  2. alchymyth
    Forum Moderator
    Posted 3 years ago #

    you lost the space in these styles between the css id and the css class - corrected below:

    #secondmenu .menu-header ul,
    div.menu ul {
    	list-style: none;
    	margin: 0;
    }
    #secondmenu .menu-header li,
    div.menu li {
    	float: left;
    	position: relative;
    }

    just to be sure, double check the other styles as well.

  3. maxedleson
    Member
    Posted 3 years ago #

    That did it!!!! You are a generous genius @alchymyth!
    Moral of the story for others trying to do what I was trying to do.... be meticulous as you change the original access styles to the new name to preserve the spaces.... A good search and replace will probably do better than my hack-job.

Topic Closed

This topic has been closed to new replies.

About this Topic