Support » Themes and Templates » Editing the top navigation bar

  • Resolved mgray1122


    I am using a child theme from Sandbox for my site, I’d like to edit some things on the page navigation bar at the top of the screen, but am having some trouble. When I hover over parent pages (“Schedule” and “Special Events”), there are drop-down menus that display child pages AND the child pages of the first child pages. In the case of the “Friday, September 21” child page, its child pages are displayed horizontally instead of vertically, so some if its child pages are hidden.

    What I’d like the menu to look like is this: When you hover over a parent page (i.e., “Schedule”), a drop down menu comes down vertically and lists the child pages (“Friday,” Saturday,” and “Sunday”). Then, when you hover over those child pages, their child pages show up in a drop-down menu listed vertically (i.e., when you hover over “Friday,” a drop-down menu will show up listing “Opening Celebration,” “Readings and Presentations,” and “Ongoing Events”).

    This site, which is also a Sandbox child theme, has a nav bar that does what I want mine to do:

    Is there any way to edit my nav bar to do this, or do I have to create a new list? And do I have to use .css or .php? I haven’t worked much with .php, so I’m a little weary about changing those files.

    Thank you!

Viewing 12 replies - 1 through 12 (of 12 total)
  • Moderator Andrew Nevins


    Forum moderator

    This sounds like a CSS issue.
    Can you try floating none those list items?

    div#menu li li {
     float: none;

    Thanks for your response.

    I just tried the float: none property, but the navigation bar still looks the same.

    Moderator Andrew Nevins


    Forum moderator

    What code did you try?
    It’s just I can see some float: none; styles applied to anchor tags, rather than the list items.

    Yes, your are right- I did apply it to the wrong things. Thank you for catching that stupid mistake!

    I just applied float:none to the through page-item-276, which would be the child pages under “Special Events.” Unless my code is wrong (which it may be, since I don’t have much experience with lists), it still didn’t work.

    That is very strange. Do you know how to go about fixing that?

    Thanks for pointing that out!

    The error says that it’s not finding the parent stylesheet linked to here:

    @import url("../Sandbox/style.css");

    so perhaps your file path or file structure is wrong? Or perhaps the stylesheet is not in the parent theme where it belongs?

    I fixed the parent stylesheet link problem, but the list issues on the top navigation menu are still there. The top navigation bar is displaying a dropdown of all of the child pages, but it’s not taking into account the fact that some of those child pages are child pages of other child pages. All of the child pages, despite their parent, are in the class “children.” When I try to look this issue up online, everything says to just make a custom menu. However, my parent theme, Sandbox, does not support the custom menu function, so I can’t edit it that way. I’ve taken a look at the functions.php file in the parent theme, but I’m really not sure what to do to fix this problem through .php.

    Is this what you’ve looked at?

    Looks like that theme has not been updated in over 3 years — so you may want to consider another theme — as you may run into other problems:

    I went ahead and switched it over to a Twenty Eleven child theme- the default nav bar was already exactly how I wanted it once I made the switch!

    Thanks a million for all your help!

    No problem — probably a good decision. No sense in making things harder due to outdated coding issues :)!

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Editing the top navigation bar’ is closed to new replies.