I decided to not go ahead with the auto adding of pages to the nav menu and do it the normal way of creating the clonable page and then creating a pointer page/link under the nested page and it add it to the menu that way.

Now I am wanting to create a nav menu with submenu using bootstrap 4 and integrate couchcms into it but unsure on how to do it

I have created a pointer page in the nested page section on the backend and created the clonable page in that section, below is the coding I am going to use but not sure how to integrate the couchcms tags into it as not done a submenu before with couchcms and bootstrap

UPDATE: I am slowly winning as got the nav menu working with couchcms tags integrated but I have dropdown icons showing on links that don't have a sub menu but good thing is I have the dropdown on the link that does have a submenu link

Code: Select all

<!-- Static navbar -->
            <nav class="navbar navbar-expand-md navbar-light bg-light btco-hover-menu">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <cms:nested_pages masterpage='index.php' extended_info='1' >
   <cms:if k_level_start >
      <cms:if k_level='0'>
                    <ul class="navbar-nav">
                    <li class="nav-item">
                    <a class="nav-link" href="<cms:show k_menu_link />"><cms:show k_menu_title /></a>
                    </li>
                    <cms:else />
          <ul>
      </cms:if>
   </cms:if>
   
   <cms:if k_element_start >
      <li id="item-<cms:show k_nestedpage_name />" class="nav-item dropdown level-<cms:show k_level/><cms:if k_total_children> has-submenu</cms:if><cms:if k_first_child> first</cms:if><cms:if k_last_child> last</cms:if><cms:if k_is_active> active</cms:if><cms:if k_is_current> current</cms:if>">
      <a class="nav-link dropdown-toggle" href="<cms:show k_menu_link />" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><cms:show k_menu_title /></a>
   </cms:if>

   <cms:if k_element_end ></li></cms:if>
   <cms:if k_level_end ></ul></cms:if>
</cms:nested_pages>
                </div>
            </nav>

I have attached a screenshot of what I am getting

UPDATE: I thought the menu was working but just noticed the links are not working, i'll see if I can work it out but any help in the mean time would be really appreciated but hopefully can work it out myself

UPDATE: Finally some good news after taking me all this time and I know i'm stupid at times, I just needed to concentrate and get my head around it, I have finally got the bootstrap working perfect, below is my index.php file in the root and menu.html in the snippets folder just in case anyone wants to do the same thing

index.php
Just before the closing head tag

Code: Select all

<link href="css/bootstrap-4-hover-navbar.css" rel="stylesheet">

Just after the body tag, where you want the menu to appear

Code: Select all

<cms:embed 'menu.html' />

Just before the closing body tag

Code: Select all

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

        <script src="js/bootstrap-4-hover-navbar.js"></script>

menu.html snippets file

Code: Select all

<!-- Static navbar -->
            <nav class="navbar navbar-expand-md navbar-light bg-light btco-hover-menu">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse-1">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbar-collapse-1">
                <cms:nested_pages masterpage='index.php' extended_info='1' >
   <cms:if k_level_start >
      <cms:if k_level='0'>
                    <ul class="nav navbar-nav">
                    <cms:else />
                    <ul class='dropdown-menu' role='menu'>
                    </cms:if>
               </cms:if>
               <cms:if k_element_start >
                  <cms:if k_immediate_children ='0'>
                    <li class="nav-item">
                    <a class="nav-link" href="<cms:show k_menu_link />"><cms:show k_nestedpage_title /></a>
                    <cms:else />
                    <li class="nav-item-dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"><cms:show k_nestedpage_title /><span class="caret"></span></a>
                    </cms:if>
               </cms:if>
               <cms:if k_element_end ></li></cms:if>
               <cms:if k_level_end ></ul></cms:if>
            </cms:nested_pages>
                    </div>
                    </nav>

The css coding is below as could not attach the css file
bootstrap-4-hover-navbar.css

Code: Select all

.navbar-light .navbar-nav .nav-link {
    color: rgb(64, 64, 64);
}
.btco-hover-menu a ,  .navbar > li > a {
    text-transform: capitalize;
    padding: 10px 15px;
}
.btco-hover-menu .active a,
.btco-hover-menu .active a:focus,
.btco-hover-menu .active a:hover,
.btco-hover-menu li a:hover,
.btco-hover-menu li a:focus ,
.navbar>.show>a,  .navbar>.show>a:focus,  .navbar>.show>a:hover{
    color: #000;
    background: transparent;
    outline: 0;
}



/*submenu style start from here*/


.dropdown-menu {
    padding: 0px 0; 
    margin: 0 0 0; 
    border: 0px solid transition !important;
    border: 0px solid rgba(0,0,0,.15);   
    border-radius: 0px;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;

}

/*first level*/
.btco-hover-menu .collapse ul > li:hover > a{background: #f5f5f5;}
.btco-hover-menu .collapse ul ul > li:hover > a, .navbar .show .dropdown-menu > li > a:focus, .navbar .show .dropdown-menu > li > a:hover{background: #fff;}
/*second level*/
.btco-hover-menu .collapse ul ul ul > li:hover > a{background: #fff;}

/*third level*/
.btco-hover-menu .collapse ul ul, .btco-hover-menu .collapse ul ul.dropdown-menu{background:#f5f5f5;}
.btco-hover-menu .collapse ul ul ul, .btco-hover-menu .collapse ul ul ul.dropdown-menu{background:#f5f5f5}
.btco-hover-menu .collapse ul ul ul ul, .btco-hover-menu .collapse ul ul ul ul.dropdown-menu{background:#f5f5f5}

/*Drop-down menu work on hover*/
.btco-hover-menu{background: none;margin: 0;padding: 0;min-height:20px}

@media only screen and (max-width: 991px) {
    .btco-hover-menu .show > .dropdown-toggle::after{
        transform: rotate(-90deg);
    }
}
@media only screen and (min-width: 991px) {

    .btco-hover-menu .collapse ul li{position:relative;}
    .btco-hover-menu .collapse ul li:hover> ul{display:block}
    .btco-hover-menu .collapse ul ul{position:absolute;top:100%;left:0;min-width:250px;display:none}
    /*******/
    .btco-hover-menu .collapse ul ul li{position:relative}
    .btco-hover-menu .collapse ul ul li:hover> ul{display:block}
    .btco-hover-menu .collapse ul ul ul{position:absolute;top:0;left:100%;min-width:250px;display:none}
    /*******/
    .btco-hover-menu .collapse ul ul ul li{position:relative}
    .btco-hover-menu .collapse ul ul ul li:hover ul{display:block}
    .btco-hover-menu .collapse ul ul ul ul{position:absolute;top:0;left:-100%;min-width:250px;display:none;z-index:1}

}

bootstrap-4-hover-navbar.js

Code: Select all

$( document ).ready( function () {
    $( '.dropdown-menu a.dropdown-toggle' ).on( 'click', function ( e ) {
        var $el = $( this );
        var $parent = $( this ).offsetParent( ".dropdown-menu" );
        if ( !$( this ).next().hasClass( 'show' ) ) {
            $( this ).parents( '.dropdown-menu' ).first().find( '.show' ).removeClass( "show" );
        }
        var $subMenu = $( this ).next( ".dropdown-menu" );
        $subMenu.toggleClass( 'show' );
        
        $( this ).parent( "li" ).toggleClass( 'show' );

        $( this ).parents( 'li.nav-item.dropdown.show' ).on( 'hidden.bs.dropdown', function ( e ) {
            $( '.dropdown-menu .show' ).removeClass( "show" );
        } );
        
         if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
            $el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
        }

        return false;
    } );
} );

Hope it helps anyone else who is looking for the same sort of thing