Making Horizontal Menu with Twenty Ten theme.

  • 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.

Viewing 15 replies - 1 through 15 (of 28 total)

  • 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.

    Thread Starter AndresL

    (@andresl)

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

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

    Thread Starter AndresL

    (@andresl)

    The site is: https://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.

    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.

    Thread Starter AndresL

    (@andresl)

    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.

    How can you have a horizontal drop down menu?

    Thread Starter AndresL

    (@andresl)

    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:

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

    Try something like:

    #access .sub-menu li {
display:inline;
float:none;
}
    Thread Starter AndresL

    (@andresl)

    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.

    WordPress adds that class automatically.

    Thread Starter AndresL

    (@andresl)

    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.

    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

    Thread Starter AndresL

    (@andresl)

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

    Thread Starter AndresL

    (@andresl)

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

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

    https://pastebin.com/tufGX4jE

Viewing 15 replies - 1 through 15 (of 28 total)
  • The topic ‘Making Horizontal Menu with Twenty Ten theme.’ is closed to new replies.