Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 7, 2019 at 5:31 pm #1145854
    jaroljmek

    Hi!

    Sorry to post this – I’m sure it’s answered somewhere.

    How can I adjust the Mobile Header height in the same way as I can for the Desktop height in the Theme Options. I’d like to make it 50px high.

    Thanks so much!
    Best

    October 8, 2019 at 6:13 am #1146009
    Rikard

    Hey jaroljmek,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.responsive #header_main .container {
    height: 50px !important;
}
.responsive .logo a {
    vertical-align: top !important;
}
.responsive .logo img {
    max-height: 50px !important;
}
}

    Best regards,
    Rikard

    October 8, 2019 at 10:53 am #1146099
    jaroljmek

    Thanks Rikard

    That work well for the header height and logo but the hamburger menu icon needs vertical alignment also. Please could you help with the CSS to adjust the hamburger menu icon?

    Thanks!

    October 8, 2019 at 1:12 pm #1146158
    Rikard

    Hi,

    This is the CSS which is currently applying:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all .main_menu {
    top: 0;
    height: 80px;
    left: auto;
    right: 0;
    display: block;
    position: absolute;
}
}

    Try to copy it to Quick CSS and adjust the values to your liking.

    Best regards,
    Rikard

    October 8, 2019 at 1:26 pm #1146164
    jaroljmek

    Hi Rikard

    Sorry, my CSS had disappeared for some reason.

    Currently I have the following CSS:

    @media only screen and (max-width: 767px) {
    .responsive #header_main .container {
    height: 60px !important;
    }
    .responsive .logo a {
    vertical-align: top !important;
    }
    .responsive .logo img {
    max-height: 60px !important;
    }
    }

    This works nicely in mobile view.

    I have added the CSS below but it does not affect the hamburger icon which is not vertically aligned in mobile view. It is too low.

    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .main_menu {
    top: 0;
    height: 60px;
    left: auto;
    right: 0;
    display: block;
    position: absolute;
    }
    }

    Thank you.

    October 9, 2019 at 5:29 am #1146365
    Rikard

    Hi,

    Try a negative value for top:

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

    Best regards,
    Rikard

    October 9, 2019 at 11:31 am #1146471
    jaroljmek

    Hi Rikard

    Thanks for this. Works great for mobile – the hamburger icon is vertically centred.

    However – sorry last question – the hamburger icon does not respond to the following CSS for Tablet screens. It drops lower between 768px and 1024px !

    @media only screen and (max-width: 1024px) {
    .responsive #header_main .container {
    height: 70px !important;
    }
    .responsive .logo a {
    vertical-align: top !important;
    }
    .responsive .logo img {
    max-height: 70px !important;
    }
    }
    @media only screen and (max-width: 1024px) {
    .responsive #top #wrap_all .main_menu {
    top: -5px;
    }
    }

    Would you be able to help with the CSS for the top value for Tablet screens?

    Thank you!

    October 10, 2019 at 5:41 am #1146732
    Rikard

    Hi,

    Please try this instead:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive #top #wrap_all .av_mobile_menu_tablet .main_menu {
    top: -15px;
}
}

    Best regards,
    Rikard

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