Okay
  Public Ticket #1170451
Mobile Header Questions
Closed

Comments

  •  1
    Chad started the conversation

    Hello,

    I have questions about 2 changes I'm trying to make to my mobile header:

    1. On the desktop version of my site, I utilize 2 menus (top area menu and full screen menu), but on the mobile version, I just want to show 1 menu (the full screen version). How can I remove the burger menu icon that shows up on the mobile for my top menu? 

     2. I’d like to left align my logo on the mobile version (instead of centering it). How can I do this?

    Last August, your support gave me the code below to do both #1 & 2 above, and it worked when I tested it back then. However I never made the changes to our actual website, and now that I am trying to use this code, its not working. I'm not sure why...

    @media only screen and (max-width: 767px) {
        .mobile_menu_button {
            display: none;
        }
        .logo_wrapper {
         left: 15%;
         padding-left: 10px;
        }
    }

    Could you provide me with a new, updated way to do this?

  •  657
    Qode replied

    Hello Chad, 

    You forgot to add closing curly bracket to media query above:

    https://www.screencast.com/t/bKYfBIYYIG

    Please add it there and your code should work.

    All the best,

    The new and improved Online Bridge Documentation is live. Check it out now - LINK

    Also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  •  1
    Chad replied

    Wow, thank you. I can't believe I missed that!

    2 followup questions:

    1. My logo is now left aligned, but it doesn't seem to move within the header container like the burger menu icon does. It almost seems outside of the mobile header container/grid. For example, on an iPhone 6, the logo is too far to the left (its actually cut off on an iPhone 5), but on an iPad, the logo is too far toward the center. I'm trying to make the gap between the edge of my logo and the edge of the left screen proportionally match the gap between the edge of the burger icon and the edge of the right screen. Is there a way to better accomplish this than the code I'm currently using?

    2. Is there a way to make the burger menu icon for the fullscreen menu larger on the mobile version of my site (without making it bigger on the desktop)? Again, I was given a code for this a while back, but it isn't seeming to work now. Did I miss something here?

    @media screen and (max-width: 1000px) {
    header .side_menu_button > a {
      font-size: 25px !important;
    }
    }

  •  657
    Qode replied

    Hello Chad,

    Please try with this code

    @media only screen and (max-width: 600px) {
      .logo_wrapper {    
        left: 25% !important;    
        padding-left: 10px;
      }
    } @media only screen and (min-width: 600px) and (max-width: 1000px) {
      .logo_wrapper {    
        left: 10% !important;    

      }
    }

    You can only change the width like this:

    @media screen and (max-width: 1000px) {
      .popup_menu .line, .popup_menu .line:after, .popup_menu .line:before {    
        width: 20px !important;
      }
    }

    All the best,

    The new and improved Online Bridge Documentation is live. Check it out now - LINK

    Also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  •  1
    Chad replied

    Hi,

    That code to make the burger menu wider worked and looks great. Thank you.


    As for my header logo, for some reason it is now centered (not left aligned) after I inserted the code you gave. Any ideas as to how I might left align this?

  •  657
    Qode replied

    Hello,

    try with this snippet in Qode Options>General>Custom Css

    @media only screen and (max-width: 600px) {
      .logo_wrapper {    
        left: 30% !important;
      }
    }

    All the best,

    The new and improved Online Bridge Documentation is live. Check it out now - LINK

    Also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  •  1
    Chad replied

    Hmm that doesn't seem to work. Was I supposed to replace my old code with this new one, or add it in addition to my old code (I replaced my old code and it didn't change anything).

  •  657
    Qode replied

    Hello Chad:

    The code is correct, but any changes you make into custom css can't be displayed at this moment. Please check if some caching is enabled on your server. Contact your hosting provider service and tell them to disable it. 

    We suggest you not to install any caching tool before you finish with your website modifications, because this sometimes could cause the problem. So we thought that you don't have to be obsessed with your website speed before you finish with its modifications.

    All the best,

    The new and improved Online Bridge Documentation is live. Check it out now - LINK

    Also check our articles with useful tips and suggestions

    Best Regards,

    Qode