Support » Theme: Hestia » Dropdown menu position

  • Hello, The dropdown menus on Hestia open to the left (right edge in line with carat). I want to switch this so that they open to the right (left edge aligned with left of nav menu item). I have tried targeting them in css with “.navbar .dropdown-menu” and using various left and right functions to move them around( i.e.”left:50px;” “left:50%;”), which sort of works, however, it is both hard to control the location, and it messes with the formatting of the dropdown menu. I am a beginner at this and I was wondering if anyone has a way to achieve this result cleanly. Thanks for your help.

    • This topic was modified 1 year, 4 months ago by  ivbw.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Hello @ivbw

    Please share your website URL so I will check your website and provide you appropriate code according to it.


    Hi @ivbw,

    You can try adding the following code to your Admin Panel > Appearance > Customize > Additional CSS field:

    .navbar-right .dropdown-menu {
      left: 0;
      right: auto;


    Worked like a charm. Thanks!

    I have the same issue.
    The CSS code is working but if I have 3 or more menu layers the third layer is at the same position and therefore it hides the second layer instead of opening right to it.
    Any ideas? Thanks.

    This works:

    .navbar-right .dropdown-menu { 
    .navbar-right .dropdown-menu ul { 
      left: 100%; 


    Dropdown Letter out of Position;
    I have problem with dropdown letter that does not paste normally and out of position.

    Each time I prepare text with drop down letter, format the text but when I post the text to my website, the drop down letter will only paste on top of the text separately rather than on its normal drop down position.

    I do not know whether it is WordPress plugin or system that is not compatible with my formatting from word/window 10 on my computer.
    When the formatted text is posted to my site to be pasted; I am not able to remove the rectangle or square with dotted line that surround the dropdown letter, which I easily do on my computer word/window 10, for it to paste normally in all the posts. I tried notepad. It was of no help notepad.
    The main problem I think is my inability to remove the rectangle or square with dotted line that surround the dropdown letter at the dashboard post area and the frontend post area, which may have something to do with WordPress plugin or system. If the rectangle or square with dotted line can be removed and dropdown letter remain plain like every other letter, on post, it will paste normally rather than just jump out of position to the top and paste separately on its own.
    On my computer when composing or writing; when the rectangle or square with dotted line surround a dropdown letter appear, I only need to click the mouse right or left, the rectangle, etc. will disappear. The letter will then remain plain like every other letters. When it is copied or sent out as email or attachment, it remain or paste normally without jumping out on its own.
    At the dash board area and the frontend post area of my website, I am not able to do this for the rectangle or square that surround the dropdown letter to disappear for it to remain plain before post.
    Examples of this problem of dropdown letter out of position are at on Demonstration Articles and Dropdown Letter out of Position.

    Please what is the solution? What can I do to solve the dropdown letter out of position?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Dropdown menu position’ is closed to new replies.