Header Categories Navbar

theme-component
,
21

I got the problem its only shown in the top left corner and not full width. Im using the full width and header seach theme component. I dont have any plugins installed.

image (1)
image (1)1894×127 7.38 KB

2 Likes
22

I can reproduce the problem using the header categories navbar and full width component together.

3 Likes
23

to get this working along with the full width component, you’d need to add some CSS to your theme…

Something like this should get you in better shape:

html:not(.has-full-page-chat) .custom-categories-navbar {
  grid-column-start: 1;
  grid-column-end: -1;
}

.has-sidebar-page .d-header > .wrap .contents {
  gap: 0 1em;
}
4 Likes
24

Thank you, this fixed the problem!

Also im wondering if there is a way to sort the categories shown there?

1 Like
25

I think the order is the same as on the categories page. You can change that by following Reorder / adjust category listings and set fixed category positions

3 Likes
26

Next problem:

image
image1390×125 10.8 KB

When in a topic im trying to click on a category.

Then this happens:

image
image1662×113 6.46 KB

The menu disappears.

Console error:

custom-categories-navbar.js:64 Uncaught (in promise) 
TypeError: Cannot read properties of null (reading 'scrollIntoView')
    at n.setActiveSlug (custom-categories-navbar.js:64:52)
    at new n (custom-categories-navbar.js:48:12)
    at EmberGlimmerComponentManager.createComponent (base-component-manager.js:26:14)
    at EmberGlimmerComponentManager.createComponent (ember-component-manager.js:51:29)
    at M.create (manager.js:543:1)
    at Object.evaluate (runtime.js:2676:1)
    at Object.evaluate (runtime.js:1052:1)
    at It.evaluateSyscall (runtime.js:4204:1)
    at It.evaluateInner (runtime.js:4175:1)
    at It.evaluateOuter (runtime.js:4168:1)
    at Wt.next (runtime.js:4999:1)
    at Wt._execute (runtime.js:4986:1)
    at Wt.execute (runtime.js:4979:1)
    at $t.insertItem (runtime.js:4468:1)
    at $t.sync (runtime.js:4429:1)
    at $t.evaluate (runtime.js:4366:1)
    at Dt._execute (runtime.js:4247:1)
    at Dt.execute (runtime.js:4232:1)
    at qt.rerender (runtime.js:4547:1)
    at hr.render (index.js:4674:1)
    at index.js:4934:1
    at Nt (runtime.js:4080:1)
    at gr._renderRoots (index.js:4916:1)
    at gr._renderRootsTransaction (index.js:4960:1)
    at gr._revalidate (index.js:4992:1)
    at invoke (backburner.js.js:280:1)
    at h.flush (backburner.js.js:197:1)
    at p.flush (backburner.js.js:358:1)
    at B._end (backburner.js.js:798:1)
    at B.end (backburner.js.js:589:1)
    at B._run (backburner.js.js:842:1)
    at B._join (backburner.js.js:819:1)
    at B.join (backburner.js.js:629:1)
    at Array.<anonymous> (index.js:4765:1)
    at B._trigger (backburner.js.js:896:1)
    at B._end (backburner.js.js:811:1)
    at B._boundAutorunEnd (backburner.js.js:523:1)
3 Likes
27

Same problem here

To reproduce: click on a category + F5

5 Likes
28

I’ve just made some updates that should fix this

5 Likes
29

Thank you so much for fixing!

Could you consider to add an option to apply sidebar sorting order to the header categories navbar? This would bring the chance that users can apply their own choices to the header categories navbar.

1 Like
30

This is helpful but doesn’t work anymore, try this

html:not(.has-full-page-chat) .d-header:has(.horizontal-overflow-nav) {
    height: 5em !important;
}
2 Likes
31

Getting a “page not found” on the preview link in first post

2 Likes
32

Ah, sorry about that. Try it again now. :+1:

1 Like