Display of logo in horizontal menu mode

Post Reply
statistik_at
Posts: 5
Joined: 04 Jul 2018, 13:29

25 Oct 2018, 08:44

Hi,

I am using the horizontal menu mode in my application. When I load the application and decrease the width of my browser below 1025px, suddenly the logo of the application is displayed incorrectly above the top of the page.

The bug is also reproducable in the demo serenity application. Go to https://www.primefaces.org/serenity-ng/#/forms, change the Menu Mode to Horizontal Menu and decrease the width of the browser window (I am using Chrome, but the same happens on Firefox and IE).

I so far figured out, that the bug has to do with the component that is displayed on startup of the application. The demo applikation starts with the dashboard component, defined in app.routes.ts:

Code: Select all

{path: '', component: DashboardComponent},
When I swith the component to e.g.

Code: Select all

{path: '', component: FormsDemoComponent},
the bug appears.

In my application I use an empty component at startup so far, so the logo bug is apparent.

User avatar
aragorn
Posts: 3486
Joined: 29 Jun 2013, 12:38

25 Oct 2018, 09:58

Thanks a lot for the info. We'll check and get back to you.

merve7
Posts: 441
Joined: 12 Sep 2017, 10:44

25 Oct 2018, 10:39

Please you can add the below code in your stylesheet until release;

Code: Select all

.layout-wrapper .layout-main .layout-topbar .topbar-logo {
    display: none;
}

statistik_at
Posts: 5
Joined: 04 Jul 2018, 13:29

07 Nov 2018, 14:59

Sorry for the late reply. When I add this to my styles.scss, the logo and the application name completetly disappears.

merve7
Posts: 441
Joined: 12 Sep 2017, 10:44

12 Nov 2018, 14:36

Logo and application name should only appear in horizontal mode.
In mobile mode, it should be as follows.
Image

statistik_at
Posts: 5
Joined: 04 Jul 2018, 13:29

19 Nov 2018, 09:56

Yes, but when I add the lines, the display of the name and the logo disappears in the non-moblie mode, which is not what I want.

merve7
Posts: 441
Joined: 12 Sep 2017, 10:44

20 Nov 2018, 13:21

Image


To display the logo and name, your mode should be horizontal and you need to have topbar-logo style classes like the above. Please, could you check?

statistik_at
Posts: 5
Joined: 04 Jul 2018, 13:29

27 Nov 2018, 09:50

Yes, my menu mode is horizontal and the topbar-logo style class is there.

User avatar
aragorn
Posts: 3486
Joined: 29 Jun 2013, 12:38

28 Nov 2018, 09:12

Could you please try the following code instead of the above code?

Code: Select all

/* styles.scss */

@media (max-width: 1024px) {
    .layout-wrapper .layout-main .layout-topbar .topbar-logo {
        display: none;
    }
}

statistik_at
Posts: 5
Joined: 04 Jul 2018, 13:29

21 Jan 2019, 15:29

That worked, thanks!

Post Reply

Return to “Serenity - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest