Responsive Menu dropdown - WP

Krav
75 Posts
Krav posted this 23 March 2016

Hi There,
Would very much value some help please?

I am creating a simple website that has a 'fixed on scroll' grey bar at the top of the page (contains logo, menu and search button), so on scroll, all other content slides nicely underneath this - see screenshot.

menu-a.jpg

When in responsive mode for Laptop, Tablet and Phone the 'menu' is abbreviated - see screenshot.

menu-1.jpg

Unfortunately, when you click on the menu icon/button, the menu headers do drop down, but go over the content below and are unreadable on other pages + the small MHWA logo and search bar move down at the same time (they should stay at the top inline with the menu icon/button) - see screenshot.

Menu2.jpg

So, my questions are:

  • How can I get the small logo and search bar to stay put (I have tried 'stick on scroll' for each, but it does not work),
  • How can I get the menu on dropdown to be more readable (perhaps % tint background that appears when the menu drops down, or the whole grey band at the top expands downwards when the menu is expanded?).

I've included the .zip for info.

Any help would be great as this will impact on future websites I do - thanks very much.

Regards Krav

Hi There, Would very much value some help please? I am creating a simple website that has a 'fixed on scroll' grey bar at the top of the page (contains logo, menu and search button), so on scroll, all other content slides nicely underneath this - see screenshot. !menu-a.jpg! When in responsive mode for Laptop, Tablet and Phone the 'menu' is abbreviated - see screenshot. !menu-1.jpg! Unfortunately, when you click on the menu icon/button, the menu headers do drop down, but go over the content below and are unreadable on other pages + the small MHWA logo and search bar move down at the same time (they should stay at the top inline with the menu icon/button) - see screenshot. !Menu2.jpg! So, my questions are: - How can I get the small logo and search bar to stay put (I have tried 'stick on scroll' for each, but it does not work), - How can I get the menu on dropdown to be more readable (perhaps % tint background that appears when the menu drops down, or the whole grey band at the top expands downwards when the menu is expanded?). I've included the .zip for info. Any help would be great as this will impact on future websites I do - thanks very much. Regards Krav
wordpress responsive-menu layout-for-mobile
Fixed-on-scroll-top-grey-bar.jpg
menu-1.jpg
Menu2.jpg
menu-a.jpg
MHWA22316b2.zip
Vote to pay developers attention to this features or issue.
4 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 23 March 2016

Hi,

Please switch to the tablet view and open the Header >> More options. Set the height to 100%. Do the same for the phone view. Let me know if that solution is suitable for you.

Sincerely,
Hella

Hi, Please switch to the tablet view and open the Header >> More options. Set the height to 100%. Do the same for the phone view. Let me know if that solution is suitable for you. Sincerely, Hella
Krav
75 Posts
Krav posted this 23 March 2016

Hi Hella,
Thank you for getting back to me quickly - much appreciated.

I thought that it may be a simple fix, and your answer has gone along way to helping out, thank you, I can work with that.

But if I did require the small logo and search button to remain at the top with the Menu button, and in a line, how would I go about doing that?

Also, and I'm sure that it is a simple solution as well, could you help with my previous post: 'Title appearing incorrectly on multiply page - Wordpress' (https://answers.themler.com/questions/69278/title-appearing-incorrectly-on-multiply-page-wordpress)

Thanks Hella.

Regards Krav

Hi Hella, Thank you for getting back to me quickly - much appreciated. I thought that it may be a simple fix, and your answer has gone along way to helping out, thank you, I can work with that. But if I did require the small logo and search button to remain at the top with the Menu button, and in a line, how would I go about doing that? Also, and I'm sure that it is a simple solution as well, could you help with my previous post: 'Title appearing incorrectly on multiply page - Wordpress' (https://answers.themler.com/questions/69278/title-appearing-incorrectly-on-multiply-page-wordpress) Thanks Hella. Regards Krav
Support Team
Support Team posted this 24 March 2016

Hello Krav,
you may try the following solution (it is very much like the approach used in default Themler theme)
1.add Container inside Header;
2.set Height for the Container if needed
4.move Horizontal menu inside this Container;
5.remove Height of Horizontal Menu in Tablet and Phone modes.

regards,
Aileen

Hello Krav, you may try the following solution (it is very much like the approach used in default Themler theme) 1.add Container inside Header; 2.set Height for the Container if needed 4.move Horizontal menu inside this Container; 5.remove Height of Horizontal Menu in Tablet and Phone modes. regards, Aileen
jameswalterra8262
35 Posts
jameswalterra8262 posted this 11 September 2024

I would like to make the dropdown menu easier to read. Is there a way to make the entire gray band at the top grow downward when the menu is enlarged, or is there another way to make the backdrop color change when the menu drops down?

,
,
,
retaining walls hamilton

I would like to make the dropdown menu easier to read. Is there a way to make the entire gray band at the top grow downward when the menu is enlarged, or is there another way to make the backdrop color change when the menu drops down? , , , [retaining walls hamilton][1] [1]: https://hamiltondemolition.co.nz/retaining-walls/
You must log in or register to leave comments