Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 9, 2017 at 6:09 pm #874801
    YOUNIS

    Hello,
    I want to have a fixed header on the mobile version of my website on smartphones and tablets!

    And also I want to adapt the space between the logo and the mobile menu symbol and the boarder of the smartphone / tablet screen, the hight of the header on the mobile version, the size and position of the logo on the mobile version by myselves?!

    Also when I click on the mobile menu of the mobile version of my website on the smartphone there is very much white space in the menu list before the 1st menu point is shown?!
    How can I delete this unnecessary white space?!
    If you need the login data of my wordpress account please let me know!
    My website is http://www.healthtrainer.at
    Thank you very much for your help!!
    Kind regards :)

    November 9, 2017 at 6:41 pm #874807
    John Torvik

    Hey younis,

    I do not know if you added some custom CSS code, but there is 372px of padding in the av-burger-menu-ul class (that is causing the large white space at the burger menu) – To fix it, add this custom CSS code:

    @media only screen and (max-width: 769px) {
  .av-burger-menu-ul {
     padding: 60px 0px !important;
  }
}

    To manage the logo position, use this custom code and change the left values:

    @media only screen and (max-width: 769px) {
  .logo {
    position: relative;
    left: 119px;
  }
}

    Best regards,
    John Torvik

    November 10, 2017 at 3:42 pm #875190
    YOUNIS

    Hello John,

    thank you for your message!

    I tried to include your quick css for deleting the white space in the burger menu but it does not work!

    I definetely have saved many quick css and maybe some of them work against your quick css :/

    Maybe I can send you the WP logins in a private message and you have the knowledge to know which quick css work against it?!

    PS: Do you also know how I can set a fixed header on the mobile versions (smartphone and tablet) of the website?!

    Thanks again for your help John!

    Kind regards

    November 11, 2017 at 3:16 pm #875468
    Victoria

    Hi younis,

    Your header is 372px in height, do you want it fixed to take up the most of the height of the viewport?

    Best regards,
    Victoria

    November 13, 2017 at 11:05 am #876025
    YOUNIS

    Hello Victoria,

    thank you for your message!

    1. I would like the fixed header on the mobile menu that the logo and the burger menu is shown always on the top of the smartphone screen also when you scroll down!

    2. I want to adapt the border of the logo and burger menu to the screens edge and the size and position of both only on the mobile version by myself.

    3. I would like to minimize the size of the header widget (this green 3D button with the text “JETZT gesünder &…….) only on the mobile version on the smartphone.

    I hope that all these 3 points are possible as I imagine and you maybe have a solution for it.

    Thanks again Victoria!

    Best regards

    November 15, 2017 at 5:14 am #876907
    Ismael

    Hi,

    1.) This is possible but the header will end up consuming most of the devices’ screen.

    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all #header {
        position: fixed;
   }
}

    2.) Do you want to create space on both edges of the screen? Please look for the following css modification.

    #header .container {
    width: 100% !important;
}

    Wrap it inside a css media query so that it only affects the desktop view.

    @media only screen and (min-width: 768px) {
    #header .container {
        width: 100% !important;
    }
}

    3.) Where do you want to position the widget on mobile view? If you want to hide, just add the css code.

    @media only screen and (max-width: 767px) {
    #header .widget {
       display: none;
    }
}

    Best regards,
    Ismael

    November 17, 2017 at 12:29 pm #878030
    YOUNIS

    Hello Ismael,

    thank you for your message!

    To point
    1.) You are right! Now the fixed header is consuming the most space of the mobile device screen!
    The problem is my opinion that I have included this header widget “button JETZT gesünder &….” to the “Header Area” in the Widgets menu!

    In my opinion if I delete the widget from the header are the problem of the consuming of the most screen space on mobile devices would be solved but then in which Widget Area should I include this Button Widget else?!

    Do you have a solution for that?!

    Thank you very much for your help Ismael!!!

    Kind regards!!

    November 18, 2017 at 8:35 am #878406
    Ismael

    Hi,

    You can decrease the size of the widget then re-position it between the logo and the mobile menu. 

    @media only screen and (max-width: 767px) {
    #header .widget img {
        max-width: 50px;
    }

    #header .widget {
        padding: 0;
        position: absolute;
        top: 0;
        left: auto;
        right: 130px;
    }
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.