Positioning and Size of Mobile Menu and Navigation Search

[Günther]

I have two (related I think) questions, that’s why I put them in the same topic.

1) I would like to reduce the size of the mobile menu which appears after clicking the hamburger menu, so it doesn’t cover the whole screen on mobile but leaves part of the underlying page visible. Also I would like to move it a couple of pixels down. How would I go about this?

2) Regarding navigation search, I have found forum topics how to change size of the nav search:

/* search form styling */
.navigation-search {
      max-width: 300px;
      max-height: 50%;
}

I would like to also move it a couple of pixels down, because it is “stuck” to the top of the page.

I tried:
vertical-align: -25px !important;

(in the code above for the .navigation-search element), but that didn’t change anything.

Thanks for your help 🙂

GP Premium 1.4.1

[Leo]

Hi there,

Any chance you can link me to the site so I can try to nail down the CSS faster?

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leo]

1) You can try decrease the menu item height for mobile only using the toggle:
https://docs.generatepress.com/article/menu-item-height-width/#height

Not sure what you mean by moving it a couple px down?

2) Try adding margin-top: 20px;

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Günther]

great thanks, worked both!

[Leo]

Glad I could help!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts