How to move navbar below header in DSpace 7?

[euler]

Dear Angular experts,

I am working on a DSpace 7.6.1 site. I want to ask about the steps on how to move or separate the navbar from the header. I want to move the navbar below the header and above the breadcrumbs. Looking at src/themes/dspace/app/header/header.component.html, I found the '<ds-themed-navbar></ds-themed-navbar>' just before the header ending tag. It seems that ds-themed-navbar is inside the ds-themed-header.

How can I move or separate the navbar from the header as shown in the image below? I inspected the source from this repository using my browser's developer tools and found that the ds-themed-navbar is at the same level as the ds-themed-header.

Image from https://dr.lib.iastate.edu/home

Thanks in advance!

Sincerely,

euler

[euler]

Dear All,

Unfortunately, the SSL Certificate from the repository of Iowa State University expired this June 24 so if they did not renew their SSL Certificate, you can't view their repository site. Other repository sites running DSpace 7 wherein the navbar is below the header are OKR of WorldBank and the eCommons of Cornell University. Screenshots provided below.

Thanks in advance!

[Anne Shelley]

Hello. In case it's helpful, our service provider renewed the certificate for the ISU Digital Repository and it's back up now: https://dr.lib.iastate.edu/home

Best,

Anne Shelley

Iowa State University Library

aesh...@iastate.edu

[DSpace Technical Support]

Hi Euler,

The out-of-the-box "custom" theme defaults to displaying the navbar separate from the header.   This custom theme uses only basic Bootstrap styles and that slightly different header.  See the theme settings docs for how to enable it:

https://wiki.lyrasis.org/display/DSDOC7x/User+Interface+Configuration#UserInterfaceConfiguration-ThemeSettings

(Simply change the "themes" list to use "custom" instead of the default "dspace" theme)

And here's more information on how to create your own theme starting from either the "dspace" or "custom" themes available out-of-the-box: https://wiki.lyrasis.org/display/DSDOC7x/User+Interface+Customization#UserInterfaceCustomization-CreatingaCustomTheme

Tim

[euler]

Hi Tim,

Thanks for pointing me to the User Interface Configuration and Customization page. I tried following the instructions on enabling the custom theme instead of the dspace theme. So here are the steps that I have taken. First, I commented out the "DSpaceEagerThemeModule" and uncomment the CustomEagerThemeModule found in the src/themes/eager-themes.module.ts. Then in my config.dev.yml, under the Themes Config, I put "- name: custom" instead of "- name: dspace". Then I run "yarn start:dev" and it compiled successfully. The navbar is now below the header as seen in the screenshot below:

This is what I am trying to implement, however, I noticed an odd behavior when the viewport is below 768 where the navbar was collapsed. Clicking the "hamburger" icon does not do anything, and the expected behavior for this action is that the icon would "expand" and show the navbar right? Am I missing something? I did not modify the default (header or navbar) files in the custom theme even though the HTML and the scss files were blank because, upon inspection, the styleUrls and the templateUrl in the .ts files is pointing to the base theme.

Is this a bug in the custom theme? Or am I just missing something? Can somebody please confirm if they experience the same behavior?

Thanks in advance and best regards,

euler

[euler]

Dear All,

I tested again (version 7.6.1 and 8.0), this time using the base theme and the result is still the same. The collapsed navbar does not expand after clicking it. Well, I guess this is a bug but I can't be sure since I can't replicate this on the demo site because it uses the DSpace theme and not the default bootstrap or custom theme.

Thanks in advance anyway if anybody can help me how to resolve this.

Best regards,

euler

[DSpace Technical Support]

Hi euler,

The issue with the collapsed navbar (hamburger menu) sounds like it might be related to https://github.com/DSpace/dspace-angular/issues/2372 , which was fixed in https://github.com/DSpace/dspace-angular/pull/2444 for the "dspace" theme.  It *might be* that this issue also needs fixing for the "custom" theme (I haven't had a chance to look into it, but these sound similar).

If you have time to verify whether that fix works for the "custom" theme, then I'd recommend creating a new bug ticket (or Pull Request if you are comfortable doing so) and link it back to that older issue. Tickets can be submitted at https://github.com/DSpace/dspace-angular/issues

Tim