Editing Top Menu Navigation

  • Hey all,

    So I’d like my top bar navigation to resemble Deloitte’s:

    https://www.deloitte.com

    Basically, the top level of pages is displayed in a row. Then each of those drop down into the 2nd level of pages. Then, some of those options expand to the right with a 3rd level of pages.

    Currently, my top navigation bar doesn’t display all 2nd level pages, and doesn’t seem to have the capacity for dispalying 3rd level pages uniquely.

    How can I edit the template to do this? Is there a plug-in that enables this? Our site is at https://nwucase.net76.net

Viewing 6 replies - 1 through 6 (of 6 total)

  • there are a couple plugins available – heres one:
    https://www.dontdream.it/en/dropdown-menus-for-wordpress/

    maybe search for “suckerfish wordpress”

    suckerfish refers to one of the first clean XHTML implementations of drop down menus

    Thread Starter nwucase

    (@nwucase)

    Hi zeniph,

    Thanks for your response, that’s exactly what I was looking for!

    However, the CSS is really messed up (not because it came that way, because I haven’t been able to customize it correctly yet!)

    It’s almost as if the CSS for the menubar is clashing with the CSS for the WordPress template, but the instructions for installation don’t say I have to edit any WordPress template CSS.

    Here’s the site again: https://nwucase.net76.net

    Our menubar CSS is here:

    https://nwucase.net76.net/wp-content/plugins/menubar/Suckerfish/wpm.css

    And the template CSS is here:

    https://nwucase.net76.net/wp-content/themes/corporate-theme-v2/style.css

    Thank you!!

    yes a conflict – both style sheets are trying to style the same elements

    I guess the plugin author cant know ahead of time what theme it might be used on they wouldnt bother giving specific instructions

    perhaps simplest if you edit the themes style.css and try disabling (comment out or delete) anything that looks like:

    #nav, #nav ul, #nav ul li etc

    and let wpm.css take over doing all the styling of the menu

    Thread Starter nwucase

    (@nwucase)

    Ah, that helped a lot!

    Now I would like one small tweak…if you go to this page, you’ll see that each level of the navigation retains the “darker” active color.

    https://htmldog.com/articles/suckerfish/dropdowns/example/

    On my page however, only the first level retails the darker active color. As soon as I move off the 2nd level to the 3rd level, the 2nd level rolls back to a lighter color, losing the visual cue of being active.

    Any ideas?

    adding

    //kill any existing a tag bg styling
#nav ul li a {background-color:transparent}
//add hover bg color for LI tags
#nav ul li.sfhover {background-color:red}

    or something similar should be about right. The class “sfhover” is dynamically added and removed as you hover (mainly for IE6 non-hover support).

    …but I see now the pluggin also uses the window onload event – this might be a prob with all the external calls the WP makes – the drop downs wont kick until everything loads. I’ve not used that plugin btw – just the first one I came accross with a search – there may be better options for you.

    onDocumentReady by jQuery (or similar javascript library) is better than onLoad but thats another part of the pandorras box of web dev that you may not want to know about…

    Thread Starter nwucase

    (@nwucase)

    Looks like upgrading took care of this problem…

    Thank you for your help!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Editing Top Menu Navigation’ is closed to new replies.