Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • June 20, 2018 at 6:27 pm #975414
    SvHa

    Hi!
    In my mobile+tablet Version (Link attached) the height of the menu bar is to small – especially the logo is to small as you can see. Tried to increase the height, but my “beginner CSS” did not work as I wanted…
    What I want – and only for mobile and tablet version:
    – height of Logo increased – lets say 150px
    – all the other elements adapt to the bigger height: Green background of burger icon reaches from top to bottom of this area and is aligned vertically in the middle.

    Is that possible?
    Thank you!

    June 21, 2018 at 4:08 am #975635
    Ismael

    Hey SvHa,

    Thank you for using Enfold.

    This css code should increase the height of the logo on mobile view or when the screen width is equal or less than 767px.

    @media only screen and (max-width: 767px) {
.responsive .logo img {
    max-height: 150px;
}
}

    Let us know if it helps. :)

    Best regards,
    Ismael

    June 21, 2018 at 8:05 am #975678
    SvHa

    Hey Ismael,
    thnak you that helps. I added a few lines so der Burger icon fits in as well:

    @media only screen and (max-width: 767px) {
    .responsive .logo img {
    max-height: 150px;
    }
    .responsive.html_header_sidebar #header .av-main-nav{
    padding-right: 20px;
    }
    .responsive #top #wrap_all .main_menu{
    height: 150px;
    }
    }

    June 21, 2018 at 9:28 am #975708
    Nikko

    Hi SvHa,

    Glad to hear that :)
    Let us know if you need further assistance or if we can close this thread.

    Best regards,
    Nikko

    June 21, 2018 at 9:44 am #975719
    SvHa

    .. there is one thing you can help me: how can i fix the “logo-burger-bar” on mobile when scrolling?

    June 21, 2018 at 2:43 pm #975803
    Nikko

    Hi SvHa,

    Just to clarify what you’re trying to achieve, do you perhaps want it to stick on top when scrolling?

    Best regards,
    Nikko

    June 21, 2018 at 3:39 pm #975834
    SvHa

    Hi Nikko,
    yes thats what i want :-)
    Thanks

    June 22, 2018 at 6:49 am #976103
    Ismael

    Hi,

    That’s possible but not needed on mobile view or phone devices. Fixed elements take up space and may cover important content. Anyway, you can use this css code.

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all .main_menu {
    position: fixed;
    top: 0;
    right: 20px;

}
}

    Best regards,
    Ismael

    June 22, 2018 at 10:54 am #976230
    SvHa

    …okay thanks a lot – thats not exactly what i wanted, but its maybe a nice solution because only the Burger-Icon is fixed (not the whole bar incl. logo) – looks like a stamp in the upper right corner :-)

    June 22, 2018 at 11:37 am #976260
    Nikko

    Hi SvHa,

    To make the whole header sticky instead of just the menu, you can use this css code:

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

    Best regards,
    Nikko

    June 22, 2018 at 12:15 pm #976286
    SvHa

    thanks, is working. You can close this thread.
    :-)

    June 22, 2018 at 12:33 pm #976292
    Nikko

    Hi SvHa,

    Glad that we could help :)
    Feel free to comeback if you need further assistance.
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Logo area higher’ is closed to new replies.