Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #831540

    Hi all,

    I’d like to move the hamburger menu up to the top bar on the left.

    Is it possible, or do I need to get a 3rd-party hamburger plugin?



    Hey sdigit,
    Try going to Enfold Theme Options > Header > Menu and Logo Position and choosing “Logo right, Menu left”
    If this is not what you mean, Please include the url to the page in question so we can take a closer look.

    Best regards,


    Hi Mike,

    Thanks for the reply. Actually, I’m talking about the top bar, which contains the social icons.

    Instead of the hamburger appearing in the header, I wanted it to appear at the very top-left of the screen, in the opposite corner to the social icons.

    I’ve included the URL in the Private Content below.

    Thanks for any help.



    You`ll need to hire a freelance to accomplish it.

    Best regards,
    John Torvik


    Hi John,

    What about using Theme Options -> Header -> Extra Elements -> Secondary Menu in top bar at the left ?

    With this I was able to create a secondary menu with a hamburger in the top left.

    Currently the hamburger gets pushed down into the header on smaller screen sizes, but I expect I can fix that with CSS.

    Does this seem like a workable solution?



    Assuming it is workable, I’m a bit confused why it is sitting so low in the top bar.

    Doesn’t seem to be any CSS I can use to change its vertical position, do you know of any?


    Try this code in the General Styling > Quick CSS field:

    .av_secondary_left .sub_menu {top: -1px!important; }

    I see your menu items are white on white right now, this will help:

    #top .header_color .sub_menu li ul a {color: #6787a8 !important; }

    Best regards,


    Try this updated code for mobile and tablet:

    @media only screen and (max-width: 767px){
    .responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul {
        top: -18px!important; 
        left: -90px!important; 
        position: relative!important; 
    @media only screen and (min-width: 768px) and (max-width: 989px) {
    .av_secondary_left .sub_menu {top: -1px!important; }}

    Best regards,


    Wow, thanks Mike! Looks great.

    Two questions:
    1) Only issue now is that the hamburger moves horizontally with changes in screen size.
    For example on iPhone 7 landscape it is toward the middle of the screen, and in portrait, it is halfway off the screen on the left.
    Is there a way to fix it in place (in the upper left)?

    2) As you may have noticed the Enfold hamburger is not appearing. I didn’t do this with CSS – it just stopped appearing after the most recent theme update. Doesn’t seem to be causing problems now – but should I hide it with CSS to make sure it doesn’t come back in a future update?

    Thanks again.


    I seem to have fixed the issue by removing

    left: -90px !important;

    and adding

    @media only screen and (max-width: 767px) {
    #avia2-menu {
    text-align:left !important;

    This keeps the hamburger in the upper-left of the screen at all resolutions.



    Great, glad you found a solution and thanks for sharing, much appreciated. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,


    Hi Rikard – yes I think you can close this one! Thanks.



    All right, we’ll close this topic now. For any other questions or issues, feel free to post them here on the forum and we will do our best to assist you.

    Thank you for using Enfold.


Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Move Hamburger Mobile Menu – to Topbar’ is closed to new replies.