Problems with Mobile Menu


#1

Hi, thank you for the great theme.

Website is http://blomstra.de/

Couple of problems (all about the mobile version):

  1. If you expand the mobile menu there is a small gap between the top of the page and the menu. Any ideas what causes that and how this can be solved?

  2. On all pages besides the home page (e.g. the about page) I still have the black box behind logo & hamburger menu (I do want it like that), but the black box is too big. How do I reduce its size to be just big enough to cover logo & hamburger menu?

  3. I want to have a sticky menu on the home page and have tried implementing the following code:

   @media only screen and (max-width: 1024px) {
      .site .site-header.fixed.float-header {
        position: fixed !important;
      }
    } 

With this there are two problems though: The hamburger menu is invisible on white background and the menu is already shown while still on the header, which looks weird.
is there any way of having the black matte that usually goes behind the menu appear, but only after the header?

Thank you very much & all the best!


#2

Another small one: The icons on the Services Widget are the correct size for roughly half a second after the site has loaded, after that they immediately become quite small. Is this supposed to be like this or is there a way to increase the size of the icons?


#3

Hello there,

1

For the solution of mobile menu space at the top, add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 767px) {
      #mainnav-mobi {
        margin-top: 0;
      }
    }

For your other questions, it would be better if you could post them in separate topics. Avoid posting multiple questions at once, so we can track progress of it easily. Doing so also will help us archive this support forum better. So it’ll be easier to read for other users.

Regards,
Kharis


#4

Oh ok. Thank you, I wasn’t aware of that. Will post them in separate topics.

@media only screen and (min-width: 767px) {
#mainnav-mobi {
margin-top: 0;
}
}

Does not seem to work.


#5

Hello there,

I am sorry for suggested incorrect code. Try this one, please:

    @media only screen and (max-width: 767px) {
      #mainnav-mobi {
        margin-top: 0;
      }
    } 

Regards,
Kharis


#6

Works, thank you bro!


#7

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis