I built an English language web site, and now I'm working on the Arabic version.

How do I change the navigation bar to be displayed right to left?
I'm using the Bootstrap theme 3.3.5.

  • Are you using the Bootstrap theme's default navbar(which has logo/site-name/menu-items/My-account/logout). Or you have navigation with just items? – CodeNext Aug 17 '16 at 19:22
  • yes i'm using the default one – Aymen Aug 17 '16 at 19:34
  • Your need can be done using CSS ro nav-bar. But I think you should see also RLT bootstrap theme here(stackoverflow.com/questions/19730598/…). – CodeNext Aug 17 '16 at 19:39
  • Since for D8 there is only a 3.0 release, and for D7 there is a 3.6 release (already), my best guess is that this question is about D7. However, to answer questions "I" do not like to guess about the release of Drupal. Please edit your question to avoid we have to guess ... – Pierre.Vriens Aug 17 '16 at 19:46

Note: Following answer is for D7, but the concept is same for D8 also I think, if you want to do using CSS, Just you need to apply the same logic where to apply CSS float: left; and float: right;.

This you can do with CSS.

If there is just a menu with list of items, you can do easily with float: right at appropriate place.

But, bootstrap's default nav-bar contains Logo Site name primary-menu and Secondary-menu, Hence css will be some complicated.

Now, I have used the following set (LTR Default),

enter image description here

And after looking their HTML I have applied following CSS,

.navbar {
    .navbar-header {float: right;
        a.logo { float: right !important;}
        nav {

            ul.menu.navbar-nav {float: right;
                li {
                    float: right;
            ul.menu.navbar-nav.secondary {float: left !important;
                li {
                    float: right;


After applying the CSS, It has arranged in such a way.

enter image description here

If you slightly practice, you can by yourself come to know how it works, it is easy.

  • I have the impression that this solution could work for either D7 or D8, am I right? I think you should add something about that (an extra "note" or so) to clarify that also ... – Pierre.Vriens Aug 18 '16 at 6:29
  • @Pierre.Vriens Thanks for pointing out. This answer is for D7, I will add that one. Thanks again. – CodeNext Aug 18 '16 at 11:41

Its a matter of Twig and/or CSS.

Try to change the float in CSS or to change the DOM order of the twig block dealing with the sidebar.

If there is only one sidebar block, it is only a CSS issue and should be changed from the CSS files.

My answer to "How to create an RTL CSS file (style-rtl.css) for Drupal modules" deals with RTLizing the CSS of Drupal 8 modules but can give serve for themes as well.

For your need the code should be something like:

#sidebar-first {float: left} 

Or otherwise

.region-sidebar-first {float: left}

Note: In the start I said Twig and/or CSS because sometimes both should be changed. In any case, usually it's indeed a matter of either or both (DOM order and/or float).

  • Do you have any sample code available, which shows the default (probably LTR) and how to make that the ther way around (say RTL)? – Pierre.Vriens Aug 17 '16 at 19:44
  • Sure, one moment and I'll attach it. – user16289 Aug 17 '16 at 19:46
  • Attachments don't work around here ... but I look forward to whatever format you'll come up with. – Pierre.Vriens Aug 17 '16 at 19:48
  • I meant I will attach a link... Added it... – user16289 Aug 17 '16 at 19:51
  • Close to perfect ... though I wonder what is different from using LTR. I bet it's either "just omit then entire line(s), or otherwise change "left" to "right" ... am I right? PS: you made me curious about your BTW, is it a question you posted somewhere? If so can I read it (left to right please ...)? – Pierre.Vriens Aug 17 '16 at 19:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.