WordPress.org

Ready to get started?Download WordPress

Forums

Making Horizontal Menu with Twenty Ten theme. (29 posts)

  1. AndresL
    Member
    Posted 3 years ago #

    I am currently modifying the Twenty Ten theme for a specific site and have been trying to modify the main navigation so instead of being a vertical dropdown it becomes a horizontal dropdown. I have edited the style sheet in different ways but none of them seem to work.

    After looking through the forum, I found a similar issue with another user who said there was an element overwriting something in the #access style but didn't say what it was. The thread said "resolved" even though no solution was ever posted. I am probably needing to modify the same element I just don't know what it is.

    Any help with this would be appreciated.

  2. esmi
    Forum Moderator
    Posted 3 years ago #

    Don't edit the Twenty Ten theme. Your changes will be over-written the next time you upgrade WordPress. For this reason, it is recommended that you consider creating a child theme for your customisations. Once your child theme is active, we should be able to help with the customisation.

  3. AndresL
    Member
    Posted 3 years ago #

    Done. Now what should I do? Still having the same problem.

  4. esmi
    Forum Moderator
    Posted 3 years ago #

    Now we need a link to your site using this theme.

  5. AndresL
    Member
    Posted 3 years ago #

    The site is: http://shawlsmithlondon.com/newssl/?page_id=35

    Basically, the main navigation is on top, right beneath the banner. It is a vertical dropdown. I want to make a horizontal menu so it shows up right under the main navigation on hover. I also noticed that it seems to be doing two 'home' pages. The page that shows up when the site is opened (index) is different than the page when you click 'home'. But I can fix that later. For now the navigation is the main thing.

  6. esmi
    Forum Moderator
    Posted 3 years ago #

    I want to make a horizontal menu so it shows up right under the main navigation on hover.

    Nor sure I follow...

    I also noticed that it seems to be doing two 'home' pages.

    See Creating_a_Static_Front_Page.

  7. AndresL
    Member
    Posted 3 years ago #

    The default navigation for Twenty Ten is a vertical dropdown menu. I need it to be a horizontal dropdown menu. Also, there now seem to be menu items showing up that are not supposed to be, like the links for sub-pages (spring, summer). I don't know why that is.

  8. esmi
    Forum Moderator
    Posted 3 years ago #

    How can you have a horizontal drop down menu?

  9. AndresL
    Member
    Posted 3 years ago #

    I don't know what this is even doing. The menu I see on the site doesn't match what's on the dashboard. (Edit: Never mind, I got this one. It was the wrong theme location.)

    Here's an example of what I mean by horizontal dropdown menu:

    http://www.cssnewbie.com/example/css-dropdown-menu/horizontal.html

  10. esmi
    Forum Moderator
    Posted 3 years ago #

    Try something like:

    #access .sub-menu li {
    display:inline;
    float:none;
    }
  11. AndresL
    Member
    Posted 3 years ago #

    Okay, but where do I call up the sub-menu class?

    I tried adding it to the stylesheet, then calling up on:

    <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'sub-menu', 'theme_location' =>

    Not sure if that works, but so far it doesn't make any difference.

  12. esmi
    Forum Moderator
    Posted 3 years ago #

    WordPress adds that class automatically.

  13. AndresL
    Member
    Posted 3 years ago #

    Still nothing. My stylesheet looks like this:

    [CSS moderated as per the Forum Rules. Please just post a link to your site.]

    That's all the code for the menu. I've tried just about everything I can think of.

  14. Digital Raindrops
    Member
    Posted 3 years ago #

    First thing is use pastebin for long blocks of code!

    The sample code has it's own class (id) #navbar, where it looks like #navbar is the menu ul.

    Instead of changing twenty tens menu why not just add the other themes menu to twenty ten?

    As you are using a child theme and can play with code with no damage.

    Copy header.php to your child theme,
    Copy the styles from your linked sample page to the child themes style.css

    Copy the script to the <head> </head> section of header.php

    Then look at the options for wp_nav_menu();

    <?php
    $args = array(
       'theme_location'  => 'primary',
       'container_id'    => '',
       'menu_id'         => 'navbar'
    );
    
    wp_nav_menu($args);
    ?>

    Untested but good luck!

    Edited: just navbar which is the UL

    David

  15. AndresL
    Member
    Posted 3 years ago #

    Still no luck. There just has to be something in the ul or li declarations that's messing it up.

  16. AndresL
    Member
    Posted 3 years ago #

    I found another bit of the CSS code that might help to figure this out:

    http://pastebin.com/vyr13gzA

    This comes up under the navigation class. I think it might be related.

    For those that couldn't see it, the previous code was:

    http://pastebin.com/tufGX4jE

  17. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    a possible modification of the css to show the sub menues drop down parallel to the horizontal menu:

    http://pastebin.com/5aQp8c3a

    (not cross browser compatibility tested; seems to work in firefox)

  18. keyaspects
    Member
    Posted 2 years ago #

    Once again alchymyth produces the goods. nice one!

  19. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    @keyaspects
    could you post a link to show the menu?
    i would love to see it live in someones site ;-)
    and to check how it works in IE ...

  20. keyaspects
    Member
    Posted 2 years ago #

    will do as soon as I have the site live, currently on localhost

  21. keyaspects
    Member
    Posted 2 years ago #

    @alchymyth

    don't have a link up yet but here is a screen shot. http://tinyurl.com/3frsq6s

    only reason I put this up is regarding an issue and better to try and explain with a picture than nothing at all...

    when hovering left to right over the menus. when you hit the first menu, in this case 'wondering menu'. the 3 sub menus appear (menu 1, menu2 . menu3) like they should but if you continue to scroll across the TOP menus, the second and third menus do not explode until you take the mouse right away from all menus and then back to the one you want to see the sub menus for.

    a bit frustrating if you just want to flick quickly between the 3 top menus to see their contents.

    code matches yours with slight dimension changes:
    css: http://pastebin.com/DXTQyUG6
    code: http://pastebin.com/D11KJdVT

    any suggestions to get this to work more fluidly would be appreciated, will upload a direct link asap
    thanks again alchymyth

  22. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    http://pastebin.com/EwDJTwgC

    new code and new edits are marked in the code; the issue was possibly caused by some 50px padding somewhere.

    obviously not tested in your theme (i was shortly puzzled by the narrow size)

  23. keyaspects
    Member
    Posted 2 years ago #

    very nice! thanks again, works perfectly. yes narrow size due to it being the second menu system on the site located within the main content area.

  24. keyaspects
    Member
    Posted 2 years ago #

    Here's the link to the online version of the menu. Works nicely. Sorry to drag this topic up again but thought it would be useful for people to see the final version.
    http://www.thehuntedgourmet.com.au/menus

    Thanks again

  25. LanaQ
    Member
    Posted 2 years ago #

    I am new to WordPress. I have taken over a blog which uses the Twenty Ten theme and changes were made to it. How do I create a child theme and hook it up to my existing pages? Also, is there an easy way to move my changes to the style sheet to my child theme?

  26. esmi
    Forum Moderator
    Posted 2 years ago #

    @LanaQ: It is considered impolite to interrupt another poster's thread. Please post a new topic.

  27. Kingzgold
    Member
    Posted 2 years ago #

    Hi alchymyth, I just used the code you provided, but it seems not to be working fine. can you please check it @ http://www.liveghana.net and help me solve the problem now.

    Thx alot...

  28. Diana
    Expert e diva
    Posted 2 years ago #

    Thanks a lot,

    I wish though...

    When setting .pink, .blue classes to set colors to a parent item,
    the sub-menu could expands to full width, hiding any current submenu. Is that possible?!

  29. Diana
    Expert e diva
    Posted 2 years ago #

    Hello again, for those who want something alike what alchymyth did, I made this:
    http://pastebin.com/0XKAqh0C

    But need somehelp on this:

    How is:
    http://img826.imageshack.us/img826/367/68194553.jpg

    How should be:
    http://img196.imageshack.us/img196/5192/23472248.jpg

Topic Closed

This topic has been closed to new replies.

About this Topic