Loading...

Widget & Menu Positions

bootScore has 9 widgets and 2 menu positions.

Widgets

  1. Top Nav. This is perfect for small information like a contact button or a language switcher in the header navbar. It is on mobile screen still visible beside the burger menu. Widget title is hidden in frontend.
  2. Top Nav Search. Is reserved for the search module and can only display this. On mobile screens, it is shown as a dropdown button next to the burger menu. Widget title is hidden in frontend.
  3. Sidebar. Can be displayed on right or left side, depends on which template you have selected.
  4. Top Footer. Above the footer columns, perfect for a newsletter widget.
  5. Footer 1-4. Usual footer column widgets to show something.
  6. 404. Place whatever you want in your 404 page.

Menus

  1. Main Menu. It is the main menu of the site. It is collapsed inside the burger menu below 992px and expands above 992px screen width. It has a depth of two items.
  2. Footer Menu. It is a secondary menu at the bottom of the page below the footer columns. Use it not for important informations like privacy etc. It will be covered by the cookie consent banner on some screen sizes, and that is not GDPR ready. Use a navigation widget in Footer 1-3 for important informations instead. It has a depth of one item.

16 Comments on “Widget & Menu Positions”

  • piko cillo

    says:

    How is possible to make a mega menu?

  • marshall reyher

    says:

    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

      says:

      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

        says:

        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

        says:

        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

      says:

      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

        says:

        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

        says:

        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')
            });
        
    • Lo Rednib

      says:

      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

        says:

        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

          says:

          “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.
          😉

Leave a Comment

Cookies help us deliver our services. By using our services, you agree to our use of cookies. More Information