Documentation Theme

Widget & Menu Positions

bootScore has 11 widget and 2 menu positions.

Theme disables Gutenberg in widgets and uses classic widgets. Go in Backend to Appearance > Widgets and remove all widgets first and readd them again.

Click to enlarge map


  • 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. Use it not for important informations like privacy etc. It will be covered by the cookie consent banner on some screen sizes. Use a navigation widget in Footer 1-3 for important informations instead.


  • 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. Widget title is hidden in frontend.
  • 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.
  • Top Footer
    Above the footer columns, good for a newsletter widget.
  • Footer 1-4
    Usual footer column widgets to show something.
  • Footer Info
    Add additional information next to the copyright
  • 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?

  • 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 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.


      • Basti


        Hi Marshall,

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

        I see, you are using bootScore, 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) {
                $(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 () {
                $('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 () {
                $('body').removeClass('offcanvas-backdrop offcanvas-freeze offcanvas-open')


        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.
        Seen anything like this before?
        Thank you,

    • 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)


  • 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,