Button in menu to display on mobile device - Forum | JoomShaper
Solved Templates

Button in menu to display on mobile device

Asked by O. Harris 5 years ago Last activity 5 years ago

I am using the template Fortune and would like the button that displays in menu area on large screens, to also display on mobile device.

See demo site address - http://janadians.com/maple/

Joomla version 3.9.25

Accepted answer

Marked as the solution
Rashida Rahman Staff
5 years ago

Hi,

You can use the following code then instead of the previous:

@media (max-width: 767px)
{
#sp-logo.col-12{
    flex: 0 0 30%!important;
    max-width: 30%!important;
}

#sp-menu.d-none.col-lg-9 {
    display: flex!important;
    flex: 0 0 70%;
    max-width: 70%;
}
}

Hope this will solve the issue for you!

Best Regards

5 more replies

Oldest first Newest first Most helpful
Rashida Rahman Staff
5 years ago

Hi there!

Thanks for contacting us.

Are you using predefined header or custom header, please?

However, you can use the following code in your custom CSS:

#sp-menu.d-none {
    display: block !important;
        }

Note: Path towards custom CSS:
Extensions>Templates>Styles>
Click on your current default template name then choose Template Options.
Then find custom CSS within the custom code.

https://prnt.sc/pu705g

https://prnt.sc/pu70zn

Best Regards

O. Harris Asked this
5 years ago

Great. Appears to work, EXCEPT that the button shifts under the header area when on mobile device. How can I fix that?

Rashida Rahman Staff
5 years ago

Hi,

If your issue is resolved you may close the post:)

Regards

O. Harris Asked this
5 years ago

All well now.

Rashida Rahman Staff
5 years ago

Glad to know that:)

Log in to reply.