Change the location of the hamburger button

Hello,

Where do I change the location of where the hamburger button is located for the iPad-size version of the website? For the mobile version, it's automatically on the right (where it needs to be), but on the iPad version, it switches to the left-hand side of the screen. As you can see in the attached image, the hamburger button is set to be on the right (in Theme Options), but it's on the left.

Thanks, JL


Comments

  • Hi,

    Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

    Thanks

  • Oh, I'm sorry. Here's one of the pages where the hamburger button is on the left using the iPad, but it's consistent with all of the pages on the website.

    Click here.

    Thanks, JL

  • Thanks, I have passed it on to the dev team, and we will make adjustments to this.

    For now, please use the following CSS code:

    @media only screen and (max-width:960px) and (min-width:768px){
     #Top_bar .menu_wrapper .responsive-menu-toggle{
      float: right!important;
     }
    }
    

    Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.


    Best regards

  • Hello,

    I placed that code into the website. I checked it with my iPad and the hamburger button is still on the left-hand side of the screen. Further, it shows the button is on the right-side (where it's supposed to be) in the viewing mode. (Difficult to explain, so I'm sending a picture.)

    I'm currently in two different discussion forums (I thought I was done with this hamburger button issue). If you need to log in to our website, I sent that information to you in a private message already. Here's the other discussion forum: click here.

    It says the button is on the right:


    My iPad's screenshot:

    Thank you, JL

  • Please replace the previous code with the one below, and recheck it:

    @media only screen and (max-width:1240px) and (min-width:768px){
     #Top_bar .menu_wrapper .responsive-menu-toggle{
      float: right!important;
     }
    }
    

    Best regards

  • I placed the new CSS into the website. On the iPad still, the hamburger button is now on the right, but the menu still appears on the left.

    Thanks, JL

    https://apparitionmovie.com/actor-darren-sliva/


  • Add also this CSS, please:

    @media only screen and (max-width: 1239px) {
     .header-stack .menu_wrapper #menu {
      left: auto!important;
      right: 0!important;
     }
    }
    

    Best regards

Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.