Toggle menu


I am a beginner and just bought the license for bootstrap studio.

I have a question regarding navigation clean. I would like to know how I can position the toggle menu on the phone sceen mode to toggle to the right side of the screnn instead of the left side. I understand that is really a beginner question but I have spent quite a lot of time and would love a bit of help.

Thank you in advance.


Hi @franck.webagency, if I understand correctly, when you have the hamburger menu, when you click it you want the text to be aligned to the right?

If that is the case I think what you want to do is mimic the utility class text-right which is text-align: right!important;

So to do that add the following CSS, I'm assuming you want the dropdown and it's sub menus that way too..

.navigation-clean li, .navigation-clean .dropdown-item {

And then use the triple dot to the right of the CSS rule and select add media query, then change it so it's something like

@media (max-width: 767px) {
  .navigation-clean li, .navigation-clean .dropdown-item {

You can edit and set the max-width to whatever you would like your break point to be at.


Thanks a lot for your help.

An other question on your answer What is the value 768 doing I cannot see a lot of differnce if I put 1068 for instance.

Kind regards

Your welcome glad I could help.

Basically, it says if the browser window is smaller then 768px wide, apply this CSS rule. If the browser window is at least 768px wide or more then it will not apply this CSS rule.

Technically, you won't see it do something different unless you click the dropdown. There you should see when there isn't a hamburger menu, the dropdowns text will be left aligned. When there is a hamburger menu then all the text is right aligned, the navs and the dropdown links.

Hamburger menu - nav links right aligned, dropdown links right aligned.

No Hamburger menu - nav right aligned, nav links left aligned, dropdown links left aligned.


Thank you very much. Have a nice weekend