Loading...

Widget & Menu Positions

bootScore has nine widget and two 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 widget. On mobile screens, it is shown as a dropdown button next to the burger menu. Widget title is hidden in frontend. You can use any kind of widget here. Change search icon in header.php.
  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 ≤991px and expands ≥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.

41 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')
            });
        
      • RICHARD BULL

        says:

        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

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

  • Andrey

    says:

    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

    says:

    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)

    https://www.villamila.nl/

  • Daniel Aguirre

    says:

    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

      says:

      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.

      Check sticky sidebar here https://bootscore.me/theme/cheatsheet/

      Does that help?

      • Daniel Aguirre

        says:

        Yes, it helps a lot!

        I knew it was simple. Thank you!

  • mister geddes

    says:

    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?

      • mister geddes

        says:

        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

          says:

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

  • ramis can

    says:

    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

      says:

      Hi ramis,

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

      page.phpcol-md-8 > col-lg-8

      sidebar.phpcol-md-4 > col-lg-4

      Breakpoint is now at 992px.

      • ramis can

        says:

        Thank you so much. Kind regards.

  • Lo Rednib

    says:

    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 ?
    https://www2.maison-chateau-laguiole.fr/
    burger menu => “nos marques”

    • Basti

      says:

      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

        says:

        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

          says:

          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

            says:

            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.

Leave a Comment

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