Docs

[msf_nathan]

In need of some help with 2 things at the following site:

http://msfglobal.net/_development/msfnew/

Work With Us button in menu: can you send me some css to center the button in the mobile dropdown and remove the grey background? Grey background would stay behind other links.

Hamburger menu reveal: Need this to show at 1080px wide. Right now I think it is 980px.

Thanks!

[Rupok]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.x-navbar .mobile .menu-item-104 > a {
  background-color: transparent!important;
}
.x-navbar .mobile .menu-item-104 > a span {
  display: block;
}
.x-navbar .mobile .menu-item-104 > a .x-btn {
  display: block;
  float: none;
  margin: 0 auto;
}

If you want to to trigger the mobile menu at higher screen size, you can just follow this reply – https://community.theme.co/forums/topic/making-the-responsive-menu-show-at-certain-screen-port-width/#post-779359

Make sure to change the max-width value to your preferred value.

Hope this helps.

Cheers!

[msf_nathan]

Awesome. Thanks for your help.

One thing on triggering the mobile menu at a larger size – I noticed that with the css provided at the link provided, there the dropdown menu loses its slide-in effect. Is it possible to correct this?

Thanks again.

[Joao]

Hi There,

It seems to be working fine on my end.

The code should not affect this.

Let us know which browser and device you are using while experiencing the issue.

Thanks

Joao

[msf_nathan]

Strange. I’m seeing it on both my iphone and desktop (chrome browser). There is even a slight delay after clicking before the hamburger menu appears, and then the menu just appears. There is no smooth slide in.

Thoughts?

[Rad]

Hi there,

It works on my end too, would you mind providing a video recording? And please clear your mobile browser’s cache before testing.

Thanks!

[msf_nathan]

Hello,

Here’s the link to the video:

https://www.dropbox.com/s/oownn4zszh4u59o/Video%20Oct%2027%2C%2010%2011%2000%20AM.mov?dl=0

See how it’s just jumping in rather than sliding in smoothly?

[Joao]

Hi There,

Yes that is how suppose to work.

In my humble point of view it is not jumpy at all.

To adjust the transition of the mobile menu sliding down or up, please add the following css code in the customizer, Appearance > Customize > Custom > CSS or insert this code in your child theme’s style.css

.site .x-nav-wrap.mobile,
.site .x-nav-wrap.mobile.collapsing {
  -webkit-transition: height 1s linear;
  transition: height 1s linear;
}

Hope it helps

Joao

[msf_nathan]

Thanks Joao. Still getting the same effect. Looking to go back to this but keep the new breakpoint that reveals the hamburger:

https://www.dropbox.com/s/0p7jb11pzk5lo32/Video%20Oct%2027%2C%204%2056%2034%20PM.mov?dl=0

Tried the provided css code in both the customizer and child theme style.css.

[Rue Nel]

Hello There,

I noticed that there is an invalid css block in your page. This might create issues.

Hope this helps.

[msf_nathan]

Thanks Rue. Unfortunately that didn’t fix the issue. Any further suggestions?

[Thai]

Hi There,

In this case, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link login to your site
– WordPress Admin username / Password

Don’t forget to select Set as a private reply. This ensures your information is only visible to our staff.

Thanks.

[msf_nathan]

This reply has been marked as private.

[Paul R]

Hi,

Please remove this line in your custom css as it causing a syntax error in your code.

//hubspot form//

If you would like to add comment please use /* */

eg.

/* hubspot form */

Thanks

[Author]

Posts