Bootscore has 11 widget and 2 menu positions for seamless customization and enhanced navigation options.
Click to enlarge 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 New in v6
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.
piko cillo
says:How is possible to make a mega menu?
Basti
says:Code it in header.php.
1. Use a snippet https://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
todata-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
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
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
5. Replace this lines with
Now parent item is clickable.
Add CSS
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
In case that the Offcanvas should close when you click on the parent menu item, search in the custom.js for
and replace
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
Basti
says:Hi Richard,
first check this comment for more modern solution https://bootscore.me/documentation/widget-menu-positions/#comment-6270
In your video it seems that you are using positioning classes in navbar to create the underline effect. But I cannot say something just by watching the video without checking your code. Please remove everything what you did in dev console until menu works fine again and try to find a better solution.
Note that a nav-underline will come with Bootstrap 5.2.0 by default https://github.com/twbs/bootstrap/pull/33126
Maybe you take a look to deployment site and check how they did that?
deploy-preview-33126–twbs-bootstrap.netlify.app/docs/5.0/components/navs-tabs/#underlineBasti
RICHARD BULL
says:Thanks – I could easily use https://bootstrap-menu.com/ with the following code below. It still could not figure out where to put the menu. I think using flex to expand the UL to the full height of the nav. I’m going back to a fixed pixel height and now just have to vertically centre the inside .
Thank you for your help and suggestions.
function menukit_menu_add_hover_class($classes, $item, $args) {
if($args->walker->has_children) {
$classes[] = ‘hover’;
}
return $classes;
}
add_filter(‘nav_menu_css_class’, ‘menukit_menu_add_hover_class’, 1, 3);
Lo Rednib
says:Hi Basti,
Sorry if I post this in the wrong area.
I tried to add a simply dropdown menu but it won’t open …
“`
Dropdown
Collection 1
Disabled action
Section header
Collection 2
After divider Collection 3
“`
I don’t know what I’ve done wrong.
Lo Rednib
says:Sorry you can’t see the code …
Dropdown
Action
Disabled action
Section header
Action
After divider action
Lo Rednib
says:👋 Hi Basti,
Sorry if I post this in the wrong area.
I tried to add a simply dropdown menu but it won’t open …
https://getbootstrap.com/docs/5.0/components/dropdowns
Any idea ? 💡
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
<
instead of<
for opening tag brackets.Your dropdown works now?
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.
😉
Basti
says:Sorry, my bad 😉
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
Basti
says:Hello Andrey,
thanks. Of course, it’s possible. Go to header.php and move both
< a class="navbar-brand"...
elements below the div< a class="header-actions"...
. Then logo is on the right.Header has 3 horizontal parts:
1. Logo
2. Offcanvas menu
3. Buttons
You can change this by reorder them. Read https://bootscore.me/blog/bootstrap/preparing-bootstrap-5-1-0/ for a quick overview about header structure.
Check https://getbootstrap.com/docs/5.1/components/navbar/ about navbar component.
Check also https://getbootstrap.com/docs/5.1/components/offcanvas/ if you want to change offcanvas open from left, top or bottom..
At least check https://getbootstrap.com/docs/5.1/utilities/flex/ flex-classes and https://getbootstrap.com/docs/5.1/utilities/spacing/ for margins to adjust expanded menu.
Or use custom css 😉
Andrey
says:Wonderful! Thanks for such a wide answer. Now I see it’s possible 😉
Cheers!
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)
villamila.nlBasti
says:Hi Lennert,
yes, Marshalls solution was still v4 nav-walker. You can do that in two ways:
1. Dequeue v5 nav-walker, register v4 in child theme and do steps above like I did it on a project https://intelligent-heizen.info/. This site was developed before v5 nav-walker arrived. So, this is a rough solution and I do not recommend this way.
2. Much better:
Check https://bootstrap-menu.com/.
There you will find many code snippets to extend default Bootstrap 5 menu.
There are many other examples out there as well without touching the nav-walker:
https://www.backarapper.com/how-to-make-parent-element-clickable-in-bootstrap-dropdown-menu/
https://javascript.tutorialink.com/bootstrap-4-keeping-parent-of-dropdown-a-clickable-link/
https://stackoverflow.com/questions/16731974/bootstrap-drop-down-top-level-navigation-make-a-clickable-link/33450219
All of them should work in v5 too, but I did not tested them yet.
Lennert Fabriek
says:Hi Basti,
Thank you so much!
Just with this code it is clickable:
$(document).ready(function () {
$(‘a.nav-link.dropdown-toggle’).click(function() {
location.href = this.href;
});
});
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 onesticky-top
div.1. Copy
sidebar.php
from parent to your child.2. Add
sticky-top
in this file towidget-area
in line 16 to make sure sticky is direct inside the col.3. Adjust top position via CSS.
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?
Basti
says: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
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!
Basti
says: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
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.php –
col-md-8
>col-lg-8
sidebar.php –
col-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 ?
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 removenavbar-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 andd-lg-none
from the burger toggler – that’s it. Try it on a fresh header.php.