WordPress.org

Ready to get started?Download WordPress

Forums

zAlive
Third-level menu (33 posts)

  1. fish911
    Member
    Posted 5 months ago #

    Hello can anyone possibly give me some guidance as to how to add a third level menu to this theme? "zalive"

    I'm aware there are other users whom are searching for this same answer with the same question.

    Thanks in advance.

    My url is http://www.jrjbroofing.org

  2. Maria Antonietta Perna
    Member
    Posted 5 months ago #

    Hi, I haven't downloaded this theme, therefore I don't know if it offers any options in the admin panel in this regard. If it doesn't the way to go is by adding and placing the menu items in the WP menu panel in the dashboard, and then styling the menu with CSS. There's a video tutorial on how to build a WP theme and the design has a third level menu. Here's the URL:

    http://webdesign.tutsplus.com/series/adaptive-blog-theme-from-photoshop-to-wordpress--webdesign-9242

  3. Andrew
    Forum Moderator
    Posted 5 months ago #

    @fish991, looks like you need to make a PHP edit for this. Can you start by creating a Child Theme: http://codex.wordpress.org/Child_Themes ?

  4. Andrew
    Forum Moderator
    Posted 5 months ago #

    Btw, @antonietta456, the code from themes distributed on WordPress.org can be found here: http://themes.svn.wordpress.org/ , which is helpful because I hardly ever have to download a theme to support it ;)

  5. fish911
    Member
    Posted 5 months ago #

    Thanks for the response Andrew & antonietta 456
    I've created the child theme. I will now follow the links suggested and read more on the issue.
    I'll get back if I have any further questions.

    Thanks again for the help!

  6. Andrew
    Forum Moderator
    Posted 5 months ago #

    Hang on, I don't think you need to follow that webdesign tutorial.

  7. Andrew
    Forum Moderator
    Posted 5 months ago #

    Can you create a folder inside your Child Theme and name it "template"? Then within that folder, can you create a file and name it "header.php"?

    E.g. replicating this: http://themes.svn.wordpress.org/zalive/1.2.9/template/header.php

  8. Andrew
    Forum Moderator
    Posted 5 months ago #

    Then in your Child Theme "header.php" file (within the "template" folder) can you paste all of the code from this PasteBin page into it: http://pastebin.com/ZP40U4Nu ?

  9. fish911
    Member
    Posted 5 months ago #

    I will do that now and get back to you.

    Again thanks for the help!

  10. fish911
    Member
    Posted 5 months ago #

    I did as you suggested just to be clear, i created everything using the cpanel. Should I switch my theme to the child theme in wp-admin while I'm working on this?

  11. Andrew
    Forum Moderator
    Posted 5 months ago #

    Should I switch my theme to the child theme in wp-admin while I'm working on this?

    Sure, or wait until after you've done the steps

  12. fish911
    Member
    Posted 5 months ago #

    Ok all the steps are completed and I'm working inside the child theme. My menu has changed some but I can fix that simply by adding the pages back to the correct location. Should I be able to see a third menu option yet?

    I can't thank you enough for taking the time to help?

  13. Andrew
    Forum Moderator
    Posted 5 months ago #

    In the dashboard if you go to Appearance > Menus and then set up your menu there, you should be able to create your 3 levels of depth. Before, the theme was constraining the depth to "2".

  14. fish911
    Member
    Posted 5 months ago #

    Thank's I'll work on it and get back to you soon and update the thread.

  15. fish911
    Member
    Posted 5 months ago #

    I think I'm getting close? The menu changed and now it allows me to place a third page in the menu column under appearance, menu tab. It changed the color of the new menu but I fixed that with a little css. The only thing now is how to I get the third column to move to the left more?

  16. Andrew
    Forum Moderator
    Posted 5 months ago #

    Sounds like you can tweak that with CSS too, e.g:

    .nav ul ul {
     ...
    }
  17. fish911
    Member
    Posted 5 months ago #

    Guess it's going to take some time for me to figure this one out? I'm trying to edited it using firebug but i'm not having much luck. I'm pretty new to this css styling. I'm not sure what code to use to complete the snippet of code you supplied me with above.

  18. Maria Antonietta Perna
    Member
    Posted 5 months ago #

    Andre, thanks for the themes' URL, it's very helpful.

  19. Andrew
    Forum Moderator
    Posted 5 months ago #

    What do you want to achieve exactly with the 3rd level menu?

  20. fish911
    Member
    Posted 5 months ago #

    I'm trying to get it to perform like the 2nd level. It does not shift to the right far enough and it should have a grey box that appears when hovering over the text. I'm sure I'll figure this out, it'll just take a little time...lol

    I can't thank you enough for all your help. I'll update this thread as to how i fixed it once completed.

  21. Andrew
    Forum Moderator
    Posted 5 months ago #

    Add this to the bottom of your Child Theme style.css file:

    #header .dropdown-menu li a {
     color: #fff;
     line-height: 30px;
    }
    
    .dropdown-menu li a {
     display: block;
     padding: 3px 20px;
     clear: both;
     font-weight: normal;
     line-height: 20px;
     color: #333333;
     white-space: nowrap;
    }
    
    #header .dropdown-menu li a:hover,
    #header .dropdown-menu li a:focus,
    #header .dropdown-submenu:hover a,
    #header .dropdown-submenu:focus a {
     background: none repeat scroll 0 0 #E7E7E7;
     color: #5E7349;
     filter: none;
    }
    
    .nav ul ul {
     margin:0;
    }
  22. fish911
    Member
    Posted 5 months ago #

    Close but it's preforming like the 2nd level again.

  23. Andrew
    Forum Moderator
    Posted 5 months ago #

    I'm sorry it's not clear what you want:

    I'm trying to get it to perform like the 2nd level

  24. fish911
    Member
    Posted 5 months ago #

    Sorry i'll try to be more clear. Under the (areas serviced) tab on the menu there are 4 more tabs that display on the drop down menu when the (areas serviced) tab is hovered over, the bottom 3 are Pasco county roofing, Apollo beach roofing and Tampa Bay roofing these tabs should be hidden behind the top tab (service areas) and only shown when the service areas tab is hovered over.

    I hope that helps!

  25. Andrew
    Forum Moderator
    Posted 5 months ago #

    Try adding this:

    .nav ul ul {
     display: none;
    }
    
    .nav ul a:hover ~ ul {
     display: block;
    }
  26. fish911
    Member
    Posted 5 months ago #

    So close I can almost touch it. The 3 tabs are now hidden behind the service areas tab but they don't shift right when the tab is hovered over. They just appear underneath the service areas tab.

  27. Andrew
    Forum Moderator
    Posted 5 months ago #

    So try adding this instead:

    #header .dropdown-menu li a {
     color: #fff;
     line-height: 30px;
    }
    
    .dropdown-menu li a {
     display: block;
     padding: 3px 20px;
     clear: both;
     font-weight: normal;
     line-height: 20px;
     color: #333333;
     white-space: nowrap;
    }
    
    #header .dropdown-menu li a:hover,
    #header .dropdown-menu li a:focus,
    #header .dropdown-submenu:hover a,
    #header .dropdown-submenu:focus a {
     background: none repeat scroll 0 0 #E7E7E7;
     color: #5E7349;
     filter: none;
    }
    
    .nav ul ul {
     display: none;
     /* The "20px" here controls how far left you want it */
     margin-left: 20px;
    }
    
    .nav ul li:hover ul {
     display: block;
    }

    Take note to the line of code below this comment:

    /* The "20px" here controls how far left you want it */

  28. fish911
    Member
    Posted 5 months ago #

    Hey Andrew I really do thank you, I'm satisfied with what I've accomplished with your guidance. I can tweak it from here "I think" .

    Thanks!

  29. a145026
    Member
    Posted 4 months ago #

    Excuse me.
    Sorry but i don't like create a new topic for my small case.
    I want to resize W*H of slide. Smaler than present

    Picture

    Thanks

  30. a145026
    Member
    Posted 4 months ago #

Reply »

You must log in to post.

About this Theme

About this Topic