Agency Demo - Mobile Menu

[dfardon]

Hi, We’re buliding a site using the Agency Demo as a base, and have run into a couple of problems regarding the mobile menu.

1. We have changed the header colour and the mobile menu is no longer visible, and there is no option to change the mobile menu colours in the Customizer. We’d like the mobile menu to maintain the same colours as the normal menu.

2. Clicking on where the mobile menu is, we don’t see any dropdown menu appearing (this is the same in the Agency demo. It appears the Agency demo mobile menu doesn’t actually link to any pages, and this is presumably the same on our site.

The site is here: http://jda.dev-rev.com/

Thanks!

[Prasant]

Hello @dfardon,

Thanks for asking.

Please add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .x-btn-navbar.collapsed {
    color: #0d233f !important;
}
}

The reason why mobile menu is not collapsing is because you are using incompatible version of X Theme and Cornerstone. Please update X Theme to 6.1.5 from 6.0.4. You are using latest version of Cornerstone, so no issues in that. Please take a look at our theme and plugin update guide for more information on updating X Theme:

How to Update | Themeco Docs

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[dfardon]

Hi Prasant,

Thanks for that, I hadn’t noticed the Theme needed updating, that’s been done, and the css has been added, but the mobile menu is still the same colour as the nav bar background and it still doesn’t expand to show the menu.

In case it makes any difference, we still have the original css additions from the Agency demo in X > Theme Options > CSS.

Thanks, David

[Prasant]

Hello @dfardon,

Thanks for updating the thread.

You probably need to clear browser cache as I can see the changes on my end. Please see screencast. https://cl.ly/1A2R1e180R36

In the screencast you will notice that the upon clicking the hamburger menu button it kind of fades away in the background. To fix that problem, please add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .x-btn-navbar:hover {
    color: #0d233f;
}
}

Thanks.

[dfardon]

Thanks Prasant,

That works just fine.

The reason we were unable to see the mobile menu previously is that it only shows up on screen sizes of 600px and below, while the desktop menu is only visible at 900px and above - so between 600 and 900px, we don’t see a menu.

I assume by increasing the max-width parameter in the css you provided, we can make the mobile menu display above 600px width?

How can we make the desktop menu display below 900px wide?

Thanks for your help,

David

[friech]

Hi David,

Yes, please update that (max-width: 600px)@media query to (max-width: 979px) because that is when the mobile menu button shows up.

Hope it helps,
Cheers!

[dfardon]

Thanks Friech,

Is there a way to make the desktop menu stay visible to a narrower width? We have a bit of space to play with, it currently switches to the mobile menu a little too early.

And one final thing (I hope), the leftmost item on the desktop menu (Home) has no left hand border (or it needs the colour changing). I tried adding

.x-navbar .desktop .x-nav>li>a{border-left: 1px solid rgba(12,34,63,0.5);}

as we have the same thing for the right hand border in the global css but it didn’t change anything.

Regards,

David

[basanta]

Hi There,

Its not recommended to change the mobile breakpoint for the menu display.
It may cause the issue of mobile menu functioning.

Regarding the border issue, please try this CSS instead of the above.

.x-navbar .desktop .x-nav>li:first-child>a {
border-left: 1px solid rgba(12,34,63,0.5) !important;
}

Hope this helps!

[dfardon]

Hi Basanta,

Thanks, that’s fixed it!

Last question, I promise - on the agency demo, there are five logos horizontally towards the bottom of the home page. Is there a way we could maintain this section, but make the logos side scrolling so we could have say 10 logos in total, 5 would always be visible, and the logos would either scroll left to right automatically, or with nav arrows.

Is this possible inside Theme X? Or will we need to find a plugin, or similar?

Thanks very much,

David

[Prasant]

Hello David,

Logo carousel is not a feature provided by X Theme. But you can create a logo carousel using plugins. Please take a look at Revolution Slider plugin that can be installed from X > Validation > Extensions. You can also take a loko at following Google search result for more options. Please click here.

To get started with Revolution Slider, please take a look at following resources.

Slider Revolution | Themeco Docs

Thanks.

[dfardon]

Thanks Prasant,

Top support from all of you, much appreciated.

I’ll have a look at how to make Rev Slider do what we want.

Thanks again,

David

[Prasant]

You are most welcome.