Center menu while scrolling down

ArjanDenHaag · July 2021

Hello,

How can I center the menu while scrolling down? Is it possible?

#Top_bar.is-sticky .top_bar_left{

margin-left: 150px!important;

}

does not work for me. If I put -150px, it loos ok on a big screen, but not on smaller ones.

The website is now online: https://sandradierx.nl

Thanks in advance.

Greetings,

Arjan

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

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

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

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

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

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

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

Center menu while scrolling down

Comments