• Resolved RBX

    (@rbx)


    This is a great theme and this is the third time I’m using it for a project.

    I needed a left sidebar this time, and used a custom bootstrap menu for this which should appear collapsed on mobile, but it doesn’t work as I’d like it to, and it seems that Virtue implements it in a way different than the standard, and they perhaps have overridden some of the classes which provide bootstrap menu functionality.

    Does anyone know how I can successfully make a sidebar vertical menu which shows full view upto md but becomes collapsed in sm and smaller?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hey,
    The theme shouldn’t be overriding any bootstrap settings. It Uses bootstrap to run the collapse for it’s mobile menu. Can you post a link to your site so I can see the menu set up you have?

    Kadence Themes

    Thread Starter RBX

    (@rbx)

    I’m sorry for any misunderstanding. I’m a bootstrap noob, and certainly don’t know what I’m talking about. What I tried was code made available on wp-bootstrap-navwalker page, and had to make a few modifications to get it to work, but wasn’t able to set collapse setting to be different on desktop and mobile view.
    After analyzing the Virtue code, it appears that two different menus are required for mobile and desktop (and hence a mobile navigation menu location is provided in options).

    The website isn’t online yet, but I was able to copy code from Virtue menus to make this, which works, but I’m not sure it would if I replace the IDs to be unique.

    function create_sidebar_menu($name) {
    	?>
    	<nav id="nav-main" class="hidden-sm hidden-xs hidden-ss">
    		<h3><?php _e($name) ?></h3>
    		<?php
    		wp_nav_menu([
    			'theme_location' => 'bwit_lsb_nav',
    			'menu_class'     => 'sf-menu sf-js-enabled',
    		]);
    		?>
    	</nav>
    	<nav class="navbar navbar-right" role="navigation">
    		<div id="mobile-nav-trigger" class="nav-trigger">
    			<button class="nav-trigger-case mobileclass collapsed" data-toggle="collapse"
    			        data-target=".kad-nav-side-collapse">
    				<span class="kad-navbtn"><i class="icon-reorder"></i></span>
    				<span class="kad-menu-name"><?php _e($name) ?></span>
    			</button>
    		</div>
    
    		<div id="kad-mobile-nav" class="kad-mobile-nav">
    			<div class="kad-nav-inner mobileclass">
    				<div style="height: 0px;" class="kad-nav-side-collapse collapse">
    					<?php
    					wp_nav_menu([
    							'theme_location' => 'bwit_lsb_nav',
    							'depth'          => 0,
    							'container'      => false,
    							'menu_class'     => 'kad-mnav',
    							'fallback_cb'    => 'wp_page_menu',
    							'walker'         => new wp_bootstrap_navwalker()]
    					);
    					?>
    				</div>
    			</div>
    		</div>
    	</nav>
    	<?php
    }

    I can help you with css if you can post a link. do you have a timeframe for when you will have the site online?

    You will want to change the ids. but that should only mean css changes.

    Kadence Themes

    Thread Starter RBX

    (@rbx)

    Thankyou for offering such great level of support even on free version of your theme. I’d definitely purchase your premium themes once I start making some money. And it would be great if you provide bootstrap menu widgets in them.

    The design has a left sidebar with a list containing 50+ links, making it a menu seems most logical. Maybe I should make it a submenu of mobile navigation menu.

    Irrelevant babbling:
    The website I’m working on is a replication of a previously made – poorly designed and unresponsive site, with two sidebars each containing multiple menus with plethora of items. Given how unhappy I’m about it, I’m not going to post its link anywhere, ever.

    If you could post to the development site I would be happy to look at the bootstrap menu your trying.
    Ben

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