Navigation bar-menu disappears (does not collapse) for smaller screens

niklasalbin

Hi, I'm trying to make my website fully responsive using JA Conf template. But my navigation bar/menu does not collapse for smaller screen sizes, like on the demo page: https://ja-conf.demo.joomlart.com/index.php/en/

I have "Collapse navigation for small screens" turned to Enable in the template styles manager. Is there something else I need to enable/do?

(PS: I have converted my navigation bar/menu into a sticky menu, with fixed position. I'm not sure if this has affected things.)

teitbite

niklasalbin Hi. Can You please describe what changes has been done to template? It looks like part of functionality for collapsed menu has been removed.

niklasalbin

Hi teitbite - I have commented out the logo section of header.php to remove the logo.

I have also added the following to the .t3-mainnav class in the relevant less/css file:

.t3-mainnav {
    position: fixed;
    background: #fff;
    border-left: 0;
    border-right: 0;
    margin-bottom: 0;
    padding: 20px 0;
    border-radius: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
}

Other than that, I can't think of any changes made that would be affecting the collapsed menu functionality.

aman204

niklasalbin Try to replace the current file i.e./templates/ja_conf/tpls/blocks/header.php from default unzipped template package file downloaded from here

Also, The toggle menu appears when both "Off-canvas Sidebar" and "Collapse navigation for small screens" are turned on

Would suggest to also take backup of your current file before performing aforesaid steps, in case rollback required whilst facing any issues e.t.c and also, to have the code intact for bringing sticky menu functionality

niklasalbin

Hi aman204, thanks for the suggestions. I have now:

1) Replaced the header.php and navbar.less files with the original default files from the template package
2) Turned on both "off canvas sidebar" and "collapse navigation for small screens" in the template style manager.

The toggle menu button now appears on smaller screen sizes. However, when you click on this toggle menu button, nothing happens. The menu does not appear.

Are there any further steps I can take to solve this?

aman204

niklasalbin However, when you click on this toggle menu button, nothing happens. The menu does not appear.

To troubleshoot further, Kindly try to replace this file also ensuring to take backup of current file - /plugins/system/t3/base-bs3/js/nav-collapse.js

niklasalbin

aman204 - I've replaced this file, but it has had no effect. The toggle menu button still does nothing when clicked.

aman204

niklasalbin Kindly try to disable 3rd party extensions one by one to check for js conflict as the collapse menu functionality works fine for me in responsive mode while replicating on local install

niklasalbin

Hi aman204 - it turns out the dropdown menu was appearing, but not on the visible part of the screen. Instead, it was appearing below, and can be seen if scrolling down. See picture

This can be fixed by altering the less/css in navbar.less to:

@media (max-width: 1200px)
.t3-mainnav {
    position: fixed;
	}

And then applying other css changes to get the desired style, position, width, etc.

Thank you for your help.

aman204

niklasalbin Nice that it appears sorted now

Kindly let us know if all relative issue to parent topic has been resolved so as to mark the thread as resolved or need further assistance on the same 🙂

niklasalbin

aman204 - yes, this issue has been resolved. Thanks for your help.