Center menu while scrolling down

Comments

• Phil

  July 2021

  Hello,

  I can see that you have minifying plugins enabled on your website.

  Can you turn them off for a while because I need to take a closer look at the page source.

  
  

  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• ArjanDenHaag

  July 2021

  Hello,

  Thanks for your reply. I have disabled WP Rocket.

  Greetings,

  Arjan
• Phil

  July 2021

  It will be hard to achieve it with custom CSS code.

  Instead, I suggest using the Header Builder plugin to put the menu in the sticky header at the center.

  To learn more about this tool, check the following links:

  https://support.muffingroup.com/video-tutorials/how-to-build-a-custom-header/

  https://support.muffingroup.com/documentation/header-builder/

  
  

  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• ArjanDenHaag

  July 2021

  Hello,

  Thanks. The Header Builder rather works for me. That's what the client wants. Still got to work on the colors etc. And now the submenu's are too small. The css I did apply first do not work anymore. I am not that good at css.. Can you help me out? Probably just one rule.. :)

  Greetings,

  Arjan
• ArjanDenHaag

  July 2021 edited July 2021

  Ok. I just made a name shorter in the sub-submenu. Rather works too. If the client is not ok with it, I will get feedback. But in the sub-menu the width is not ok. The arrow besides Trainer/Coach is toooo close to the text.
• Phil

  July 2021

  Can you turn off the minifying plugins for a while, please?

  When they are enabled, I am not able to write a proper CSS for you.

  
  

  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• ArjanDenHaag

  July 2021

  Hello..

  Yes sure. It is deactivated.

  Thanks in advance.

  Greetings,

  Arjan
• Phil

  July 2021

  Please, try the following code:

  .mhb-menu .menu li ul li{
     width: 250px!important;
  }
  .mhb-menu .menu li ul li ul{
     left: 250px!important;
  }
  

  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• ArjanDenHaag

  July 2021

  Hello,

  Thank you very much!

  But Header Builder still give me headaches. :( Now the submenu and the arrows do not correspond as well on mobile. And I did set the background of the whole menu to the grey color, but somehow it did pick white and grey. Now I did set it to white completely.

  Getting there :) But not an easy one. I did thougt all the settings in Header Builder were set ok, but apparantly not.

  

  So, the sub-menu was at the same grey color above. Just wanted the whole menu in the grey color, just like the menu on desktop.

  Greetings,

  Arjan
• Phil

  August 2021

  Please, try the following code:

  @media only screen and (max-width: 767px){
      .mhb-menu .menu,
    .mhb-menu .menu li ul{
         background-color: #7f7f7f!important;
           width: 250px!important;
    }
  }
  

  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• ArjanDenHaag

  August 2021

  Thank you very much!

  Went trough the website again and all looks fine and legit now I guess. Customer will check this week. I guess she is even more pleased now with the menu centered and mobile and tablet looking good.

  Again, thanks!

  Greetings,

  Arjan
• ArjanDenHaag

  August 2021

  For the follow BeTheme users, it concerns: https://sandradierx.nl
• Phil

  August 2021

  I am glad that I could help.

  If will have any further questions or problems, feel free to ask. ?

  
  

  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next