Custom Menu Issue

  • I’m using an old theme called Bubbles Squared…no longer supported. ??

    Anywho, it didn’t support custom menus so I found an article on google that recommended adding the following to functions.php:

    add_action( 'init', 'register_my_menu' );

function register_my_menu() {
	register_nav_menu( 'primary-menu', __( 'Primary Menu' ) );
}

    And I added this to my header.php to display the menu:

    <?php wp_nav_menu(); ?>

    So my problem is the menu doesn’t drop down. I have a primary tab (Called Media) with 6 Sub-Items. They display on the page instead of a dropdown.

    You can see this at:

    https://www.northernskiesoutfitters.com/

    Any ideas on how to make it a dropdown?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter horizon70s

    (@horizon70s)

    I should also note I deactivated all the plugins and still had the issue…I know plugins can cause issues like this at times.

    FYI

    You don’t have css to support the child list items. This is what you have now.

    #navigation {
    background: url(“images/navbar.jpg”) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #fff;
    font-size: 14px;
    margin: 0 auto;
    width: 1000px;
    }
    #navigation ul {
    height: 30px;
    margin: 0;
    padding: 0 0 0 75px;
    }
    #navigation ul li {
    color: #fff;
    display: inline;
    float: left;
    list-style-type: none;
    padding: 0 15px;
    }
    #navigation ul li a, #navigation ul li a:link, #navigation ul li a:visited {
    color: #a2a2a2;
    }
    #navigation ul li a:hover {
    color: #ffffff;
    }

    code like this below will put those will put this sub menu items into a straight horizontal line and that may not be the way you want it. There are numerous tutorials on the web that you can fine by searching “simple horizontal drop-down menu” and hopefully you’ll find the way you’d like to display it there.

    /*sub menu*/
    #navigation ul li ul {
    display:none;

    width: 1000px;
    }
    #navigation li:hover ul {
    position: absolute;
    display: inline;
    left: 20px;
    width: 100%;
    margin-top:20px;
    padding: 0; }

    Thread Starter horizon70s

    (@horizon70s)

    I’m using the following code based on what you posted:

    #navigation ul li ul {
    display:none;
	height:32px;
float:left;
}
#navigation li:hover ul {
   position:relative;
        display:block;
        left: 10px;
        width: 100%;
        margin-top:0px;
        padding: 0;
float:right; }

    It’s pushing the rest of the site down when it drops. Any ideas on how to make it float “over” the rest of the site?

    Check out this post on my blog. WordPress Custom Menu

    I’m not sure about the above post, but I think you’re going to need to use z-index, which is a CSS property that affects the stacking of individual elements, so that you can basically overlap like you need to with the drop-down menu. Here’s a link, you can Google z-index if this tutorial doesn’t help you.

    https://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Custom Menu Issue’ is closed to new replies.

Tags