WordPress.org

Ready to get started?Download WordPress

Forums

WP Bootstrap Menu
[resolved] Sub Menu Items (6 posts)

  1. arturocivit
    Member
    Posted 1 year ago #

    Hi, great great plugin but on my case, the only thing that is not working are the sub menu items, just placed the menu hook up and the top level items were working wonderfully but not the sub ones, any idea what's missing on my end?

    Thanks so much!

    Arturo

    http://wordpress.org/extend/plugins/wp-bootstrap-navmenu/

  2. arturocivit
    Member
    Posted 1 year ago #

    This is my current code with the hook up

    <div class="navbar">
    <div class="navbar-inner">
    <div class="container">
    <ul class="nav">
    <?php if (function_exists('getNavMenu')): ?>
    <?php echo getNavMenu('main','hover'); ?>
    <?php endif; ?>
    </ul>
    </div>
    </div>
    </div>

    and this is how the menu works using HTML

    <div class="navbar">
    <div class="navbar-inner">
    <div class="container">
    <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">History</a></li>
    
    <li class="dropdown active"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Guides</a>
    
    <ul class="dropdown-menu">
    
    <li><a href="#">SUB MENU ITEM 1</a></li><br>
    <li><a href="#">SUB MENU ITEM 2</a></li>
    
    </ul>
    
    </li>
    
    <li><a href="#">Request a Quote</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    </div>
    </div>
    </div>
  3. arturocivit
    Member
    Posted 1 year ago #

    Nevermind, just placed the top menus with # as links and it worked, at this point it is ok because those top links won't have any contents at all, just they are triggers to display the sub menu, but it would be interesting to have that as an option in some control panel, great great job!

    Arturo

  4. NormanBird
    Member
    Posted 12 months ago #

    Thanks @arturocivit

    I didnt know that we had to put the # as a link using custom menu, in order to get the sub menu's to show. Solved all my issues. Kinda weird though, I guess that is a bootstrap coding thing?

    Norman

  5. arturocivit
    Member
    Posted 12 months ago #

    Hey Norman, glad it worked for you, I think its some kind of solution for touch screen devices,

    Good luck!

    Arturo

  6. sajjadrad
    Member
    Plugin Author

    Posted 10 months ago #

    I said before,You must use some codes for showing sub menu in hover mode.For example add this css to you style or your bootstrap style:

    .dropdown-menu .sub-menu {
        left: 100%;
        position: absolute;
        top: 0;
        visibility: hidden;
        margin-top: -1px;
    }
    
    .dropdown-menu li:hover .sub-menu {
        visibility: visible;
    }
    
    .dropdown:hover .dropdown-menu {
        display: block;
    }
    
    .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
        margin-top: 0;
    }
    
    .navbar .sub-menu:before {
        border-bottom: 7px solid transparent;
        border-left: none;
        border-right: 7px solid rgba(0, 0, 0, 0.2);
        border-top: 7px solid transparent;
        left: -7px;
        top: 10px;
    }
    .navbar .sub-menu:after {
        border-top: 6px solid transparent;
        border-left: none;
        border-right: 6px solid #fff;
        border-bottom: 6px solid transparent;
        left: 10px;
        top: 11px;
        left: -6px;
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.