Account
Cart

Widget & Menu Positions

| 41 Comments on Widget & Menu Positions

Bootscore has 11 widget and 2 menu positions for seamless customization and enhanced navigation options.

Bootscore Widget & Menu positions map

Menus

  • Main Menu
    It is the main menu of the site. It collapses to offcanvas on <lg breakpoint and has a depth of two items.
  • Footer Menu
    It is a secondary menu at the bottom of the page below the footer columns. It has a depth of one item.

Widgets

  • Top Bar
    Position to drop an important message to the site visitors like a coupon or something new. This position has no styling, use plain HTML in a Custom HTML block.
  • Top Nav
    Position for a small information like a contact button, a language switcher or the dark-mode switch in the header navbar. It stays on <lg screens next to the burger menu/searchform.
  • Top Nav 2
    Same as Top Nav position, but moves to offcanvas on <lg screens.
  • Top Nav Search
    Is made for the searchform, but any widget type can be used here. Searchform collapses on <lg screens. Trigger button for collapse is shown on <lg screens. Searchform in WooCommerce header is always collapsed.
  • Sidebar
    Can be shown on right or left side, depends on which template you have selected. Sidebar uses responsive offcanvas on mobile screens.
  • Footer Top
    Above the footer columns, good for a newsletter.
  • Footer 1-4
    These widget positions are good for showing menus to display terms, privacy, contact, payment methods, or any information such as social buttons.
  • Footer Info
    Add additional information next to the copyright. This position is well-suited to add the initialization of the bs Cookie Settings plugin.
  • 404
    Use any widget here to edit the 404 page.

41 Comments on “Widget & Menu Positions”

  • piko cillo

    How is possible to make a mega menu?

    • Basti

      Code it in header.php.

      1. Use a snippet bootstrap-menu.com/index.html (Bootstrap 4, but should work in Bootstrap 5). In this case you should register an own nav-walker for each parent menu item.

      2. Use widget based nav-walker https://github.com/jaycbrf4/WP-Bootstrap4-MegaMenu-Navwalker (Bootstrap 4, change data-toggle to data-bs-toggle in line 65 in wp_bootstrap4-mega-navwalker.php and it should work in Bootstrap 5).

      3. Code yourself like I did on a client project https://www.vdzev.de/

  • marshall reyher

    When I have a navigation menu and submenu, the parent item is not clickable (it only opens the dropdown). I want to use only anchor links to different sections in my navigation, but would like both main menu links and submenu links to go to various sections. I am re-creating this site here https://naklopalace.org/deep-green-building/. Is it possible to make this work?

    • Basti

      Of course, that’s possible.

      1. Add some CSS to open dropdown menu on hover
      2. Add JS or edit nav-walker to make parent item clickable

      I have snippets for that. When you’re ready, I’ll help you get this working.

      • marshall reyher

        Thanks so much for your response, it is much appreciated. I have looked all over for solutions online, but haven’t had much luck. Can you please provide me with the snippets and let me know where to put them? I know where to add CSS, but with nav-walker, I want to copy class-wp-bootstrap-navwalker.php to my child theme and then make adjustments, right?

      • Basti

        It will be very helpful to have a link to your working site, because i do not know what you did. If you do not want to share public, you can sent me the link via the contact form.

    • Basti

      Hello Marshall,

      here is how it works. Example and download at the bottom.

      I see you have installed child theme 5.0.0.1 which has no own .js.

      First step is to deactivate the slide animation for submenu animation.

      Deactivate the slide animation for dropdown

      1. Copy in parent theme folder js the theme.js
      2. Create folder js in child-theme and paste file there, rename it to custom.js
      3. Paste following code in child functions.php

      // Dequeue bootScore theme.js
function bootscore_remove_scripts() {
        
    // Dequeue theme.js
    wp_dequeue_script( 'bootscore-script' );
    wp_deregister_script( 'bootscore-script' );
        
    // Enqueue child chustom.js
    wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom.js', false, '', true);

}
add_action( 'wp_enqueue_scripts', 'bootscore_remove_scripts', 20 );

      Now the parent theme.js is deactivated and custom.js of child-theme is used instead.

      4. Open custom.js and comment or delete slide up code from line 41 to 53. When clicking the parent menu item, dropdown menu should open with no effect.

      Register new nav-walker

      1. Copy in parent theme folder inc the class-wp-bootstrap-navwalker.php
      2. Create folder inc in child-theme and paste file there
      3. Open functions.php in parent and copy pluggable function from line 16 to 22, paste it in child theme functions.php

      Now the new nav-walker is used.

      4. Open class-wp-bootstrap-navwalker.php in child theme. In lines 215 and 216 you will find

      $atts['href']          = '#';
$atts['data-bs-toggle']   = 'dropdown';

      5. Replace this lines with

      $atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts['data-hover'] = 'dropdown';

      Now parent item is clickable.

      Add CSS

      @media (max-width: 991px) {
    
    /* Keep mobile dropdown always open */
    .navbar .dropdown-menu:not(.navbar .dropdown-menu.dropdown-search) {
        display: block;
    }

    /* Override Bootstrap invisible class on resize */
    .navbar .nav-item .dropdown-menu.invisible {
        visibility: visible !important;
    }
}

@media (min-width: 992px) {

    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        transition: .7s;
    }
    
    /* Open dropdown-menu on hover parent menu item */ 
    .navbar .nav-item:hover .dropdown-menu {
        visibility: visible !important;
        opacity: 1;
    }

}

      Parent Menu item opens dropdown-menu on hover and is clickable to any kind of link. Mobile dropdown-menu is always open.

      You can download child-theme via Github

      • marshall reyher

        Hi Basti,

        Thanks so much for this. I followed your steps, and now the mobile menu won’t work at all. It’s possible I messed something up, but pretty sure I did exactly as you instructed.

        Marshall

      • Basti

        Hi Marshall,

        please reply to the top post, otherwise comments will be nested endless 😉

        I see, you are using bootScore 5.0.0.4, some js and the lines changed. So, in your case lines 41 to 53 are wrong, sorry for that.

        There is a missing ) in your custom.js in line 44. Please copy the complete content from parent theme.js again and remove then the slide up animation. You can download and install the example https://github.com/craftwerkberlin/bootscore-5-child-parent-dropdown-clickable and check if that is what you want. It does not replace your child, you will not lose any work.

        This code must be removed in custom.js

            // Dropdown menu animation
    $('.dropdown-menu').addClass('invisible'); //FIRST TIME INVISIBLE

    // Add slideup animation to dropdown open
    $('.dropdown').on('show.bs.dropdown', function (e) {
        $('.dropdown-menu').removeClass('invisible');
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
    });

    // Add slideup animation to dropdown close
    $('.dropdown').on('hide.bs.dropdown', function (e) {
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
    });

        In case that the Offcanvas should close when you click on the parent menu item, search in the custom.js for

            // Close dropdown and offcanvas on click .dropdown .nav-link, keep .dropdown-menu open
    $('.navbar-nav>li>a:not(.dropdown-toggle), a.dropdown-item').on('click', function () {
        $('.offcanvas').removeClass('show')
        $('body').removeClass('offcanvas-backdrop offcanvas-freeze offcanvas-open')
    });

        and replace

            // Close dropdown and offcanvas on click .dropdown .nav-link, keep .dropdown-menu open
    $('.navbar-nav>li>a, a.dropdown-item').on('click', function () {
        $('.offcanvas').removeClass('show')
        $('body').removeClass('offcanvas-backdrop offcanvas-freeze offcanvas-open')
    });

      • RICHARD BULL

        Thanks for posting this, I need it too.
        I’ve had to modify the menu in a project to have a tall li element with the a that expands (flex rather than fixed px height) to fit it, all to get an orange bar under the currently active menu.
        On closing the menu, there is a weird behaviour. You can see the short clip here.
        https://www.dropbox.com/s/tnesq89v8606twu/bootscore%20bs%205%20menu%20behaviour.mov?dl=0
        Seen anything like this before?
        Thank you,
        Richard

    • Lo Rednib

      Sorry for that Basti ,
      I just copy it from bootstrap 5 and it works.
      You can erase those comments.
      I think I can’t

      By the way I don’t know how to put code in my post …

      • Basti

        Hi Lo,

        to show HTML code in comments you can use &#60; instead of < for opening tag brackets.

        Your dropdown works now?

        "By the way I don’t know how to put code in my post …"

        Use Gutenberg Custom HTML Block to insert code.

        Does that help?

        • Lo Rednib

          “By the way I don’t know how to put code in my post …”
          I was asking when I want to show some code in your comments not in WP posts.
          😉

          • Basti

            Sorry, my bad 😉

  • Andrey

    Hi Basti, awesome work with bootScore, thanks.

    Is it possible to set the navbar-brand on the right, and the menu content on the left of the navigation bar? I tried .navbar-right or .pull-right classes but they didn’t work.

    Best regards, Andrey

  • Lennert Fabriek

    Hi Basti,

    How can I make my dropdown link clickable instead of activating the dropdown (like Marshalls question above. But I use navwalker bootstrap 5)

    villamila.nl

  • Daniel Aguirre

    Hey guys!
    I’m fairly familiar with Bootstrap 5 but not so much with WordPress. I really like this theme but I’ve come across a problem. Is there a way to make the sidebar sticky? In Bootstrap 5 it is fairly easy. You just use the classes position-sticky, sticky-top, etc., to the divs and that’s basically it. But when I try to add those classes to some of the divs, it just doesn’t work, or rather I’m not sure if I’m adding the classes to right elements. Should I modify the style.css file instead? And if so, what should I edit?

    • Basti

      Hi Daniel,

      sticky classes will only work if there is enough space in parent element to be sticky. If you add class to a div which is wrapped in an element which is not sticky, nothing happens. In conclusion, you have to wrap all sidebar widgets in one sticky-top div.

      1. Copy sidebar.php from parent to your child.
      2. Add sticky-top in this file to widget-area in line 16 to make sure sticky is direct inside the col.
      3. Adjust top position via CSS.

      Does that help?

      • Daniel Aguirre

        Yes, it helps a lot!

        I knew it was simple. Thank you!

  • mister geddes

    Hi there,

    I noticed when I first installed bootcommerce that the search icon disappears about a second after first page load. Any ideas how to fix this?

    • Basti

      Yes, theme checks if there is a widget inside. If no widget is inside it hides search button. If site is cached, this will not happen. To avoid any page flickering, use the preloader https://bootscore.me/documentation/bs-preloader/

      • mister geddes

        Thanks for such a quick response! I installed the preloader but the search toggler still remains hidden after the page has loaded. Do I need to add something to the widget area? I tried adding a search widget using the block editor but it had the default wp styling…

        • mister geddes

          I worked out the issue – the custom widget was in the ‘inactive widgets’ list. Thanks for your help!

          • Basti

            Sorry, my bad. Yes, in a fresh WP installation there are Gutenberg sidebar widgets by default. Gutenberg in widgets are deactivated by the theme. Please check here https://bootscore.me/blog/wordpress/bootstrap-5-1-0-and-wordpress-5-8/

            So, simple remove all widgets in sidebar and add new then and everything works fine.

  • ramis can

    Hi.
    1-So that the top section disappears when my page is pulled down; I changed the fixed-top section to container-fluid in the navbar section. Then, so that the mobile menu will appear at lower than 1200 pixels; I replaced the navbar-expand-lg line with navbar-expand-xl. Looks like no problem so far. (I hope I made the right changes)
    2-On screens smaller than 768 pixels, the sidebar section goes down. All the columns are one after the other. On screens larger than 768 pixels, the sidebar section is on the right. (approximately 65% x 35%)
    How can we increase this to 992 pixels. I struggled with col-lg col-md codes and it didn’t work. Kind regards.

    • Basti

      Hi ramis,

      just change col-* classes in files. For example:

      page.php – col-md-8 > col-lg-8

      sidebar.php – col-md-4 > col-lg-4

      Breakpoint is now at 992px.

      • ramis can

        Thank you so much. Kind regards.

  • Lo Rednib

    Hi Basti,
    I have a dropdown menu that does not move the other menus when I click on it.
    However, when I close it, the menu underneath returns.
    An idea ?
    maison-chateau-laguiole.fr/
    burger menu => “nos marques”

    • Basti

      Hi Lo,

      you did a lot refactoring the navbar. Especially you placed the navbar offcanvas outside the #nav-main. If you want to use burger-menu on all screen sizes, just remove navbar-expand-class from navbar. So, there can be many issues. I would suggest to keep a copy of your header.php and start with a fresh header-woocommerce.php from scratch by doing changes you did in your header.php step-by-step again in fresh header.php until you find the bug.

      • Lo Rednib

        Thanks Basti for your answer.
        I review my code. You’re right, when the .my-offcancas-sidenavbar is in #nav-main the menu works perfectly but I want it to be hide
        That’s why I have to put .my-offcancas-sidenavbar out of #nav-main. Exactly as offcanvas user or offcanvas cart.
        As it works fine for both offcanvas user and offcanvas cart, the offcancas-sidenavbar won’t.

        • Lo Rednib

          It’s fine now Basti
          I had to embed my offcanvas sidenavbar with a div with a .navbar class to make it work.
          Thanks for your time 🙏

          • Basti

            Hi Lo,

            why so complicated? Cart and user offcanvas differs from menu offcanvas. Menu offcanvas must be inside the navbar for correct working. If you want to hide menu on all screen sizes in the burger button, just remove navbar-expand-lg class from navbar and d-lg-none from the burger toggler – that’s it. Try it on a fresh header.php.

Comments are closed.