Page 1 of 1

put background color on topbar

Posted: 10 Feb 2022, 13:10
by ritonglue
Only the "menu type" "horizontal" adds some background color to the topbar.

It's a problem if you put some logo with transparent background in the topbar. If you switch the menu type, the logo disappears.

Is it possible to apply the background color for every "menu type" ?

Re: put background color on topbar

Posted: 14 Feb 2022, 11:36
by mert.sincan
Hi,

The logo is not transparent. It is hidden on horizontal mode.

Code: Select all

@media (min-width: 1281px)
.layout-wrapper.layout-horizontal .layout-sidebar .layout-sidebar-logo {
    display: none;
}
You need to make some changes for this. Please try;

Code: Select all

// topbar.xhtml
...
<div class="layout-topbar">
        <a href="#" id="layout-menu-btn" class="menu-btn">
            <i class="pi pi-bars"/>
        </a>

        <div class="layout-topbar-logo">      // Please add this line
            <a href="dashboard.xhtml">
                <p:graphicImage name="images/logo-manhattan.png" library="manhattan-layout" />
            </a>
        </div>
        
        <div class="topbar-search">
        ...

Code: Select all

.layout-wrapper .layout-topbar .layout-topbar-logo {
    margin-right: 1rem;
    display: none;
}

.layout-wrapper .layout-topbar .layout-topbar-logo img {
    width: 34px;
}

@media (min-width: 1281px) {
    .layout-wrapper.layout-horizontal .layout-topbar .layout-topbar-logo {
        display: inline-block;
    }
}
You can override my custom css according to your needs.

Best Regards,